Merge branch 'main' into feat/brand-page

Author: Adebesin-Cell

.github/workflows/ci.yml

@@ -111,14 +111,14 @@ jobs:
         run: pnpm vp test --project nuxt --coverage --reporter=default --reporter=junit --outputFile=test-report.junit.xml
 
       - name: ⬆︎ Upload coverage reports to Codecov
-        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5
         with:
           report_type: test_results
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
       - name: ⬆︎ Upload coverage reports to Codecov
-        uses: codecov/codecov-action@671740ac38dd9b0130fbe1cec585b89eea48d3de # v5
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 

app/components/Compare/FacetBarChart.vue

@@ -113,6 +113,13 @@ function buildExportFilename(extension: string): string {
 const config = computed<VueUiHorizontalBarConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t('package.trends.chart_assistive_text.keyboard_navigation_vertical'),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     userOptions: {
       buttons: {
         tooltip: false,
@@ -272,6 +279,12 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   <div class="font-mono facet-bar">
     <ClientOnly v-if="dataset.length">
       <VueUiHorizontalBar :key="chartKey" :dataset :config class="[direction:ltr]">
+        <template #hint="{ isVisible }">
+          <p v-if="isVisible" class="text-accent text-xs pt-2" aria-hidden="true">
+            {{ $t('compare.packages.bar_chart_nav_hint') }}
+          </p>
+        </template>
+
         <template #pattern="{ patternId, seriesIndex }">
           <ChartPatternSlot
             v-if="seriesIndex != 0"
@@ -349,6 +362,19 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
   </div>
 </template>
 
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px !important;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
+</style>
+
 <style>
 .facet-bar .atom-subtitle {
   width: 80% !important;

app/components/Header/ConnectorModal.vue

@@ -41,6 +41,7 @@ const executeNpmxConnectorCommand = computed(() => {
   return getExecuteCommand({
     packageName: 'npmx-connector',
     packageManager: selectedPM.value,
+    isBinaryOnly: true,
   })
 })
 </script>

app/components/Package/TrendsChart.vue

@@ -1388,6 +1388,15 @@ watch(
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : ('' as VueDataUiTheme),
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     chart: {
       height: chartHeight.value,
       backgroundColor: colors.value.bg,
@@ -1878,6 +1887,13 @@ watch(selectedMetric, value => {
             @zoomEnd="setIsZoom"
             @zoomReset="isZoomed = false"
           >
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
               <!-- Estimation lines for monthly & yearly granularities when the end date induces a downwards trend -->
@@ -2130,6 +2146,19 @@ watch(selectedMetric, value => {
   </div>
 </template>
 
+<style scoped>
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0;
+}
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
+</style>
+
 <style>
 .vue-ui-pen-and-paper-actions {
   background: var(--bg-elevated) !important;

app/components/Package/VersionDistribution.vue

@@ -161,6 +161,15 @@ const hasMinimap = computed<boolean>(() => {
 const chartConfig = computed<VueUiXyConfig>(() => {
   return {
     theme: isDarkMode.value ? 'dark' : '',
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     chart: {
       title: {
         text: dateRangeLabel.value,
@@ -447,6 +456,13 @@ const chartConfig = computed<VueUiXyConfig>(() => {
       <ClientOnly v-if="xyDataset.length > 0 && !error">
         <div class="chart-container w-full" :key="groupingMode">
           <VueUiXy :dataset="xyDataset" :config="chartConfig" class="[direction:ltr]">
+            <!-- Keyboard navigation hint -->
+            <template #hint="{ isVisible }">
+              <p v-if="isVisible" class="text-accent text-xs -mt-6 text-center" aria-hidden="true">
+                {{ $t('compare.packages.line_chart_nav_hint') }}
+              </p>
+            </template>
+
             <!-- Injecting custom svg elements -->
             <template #svg="{ svg }">
               <!-- Inject legend during SVG print only -->
@@ -664,6 +680,18 @@ const chartConfig = computed<VueUiXyConfig>(() => {
 :deep(.vue-ui-xy) svg rect {
   transition: none !important;
 }
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 1px solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 0 !important;
+}
+
+:deep(.vue-ui-user-options-button:focus-visible),
+:deep(.vue-ui-user-options :first-child:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.25rem;
+}
 </style>
 
 <style>

app/components/Package/WeeklyDownloadStats.vue

@@ -313,6 +313,15 @@ function layEgg() {
 
 const config = computed<VueUiSparklineConfig>(() => {
   return {
+    a11y: {
+      translations: {
+        keyboardNavigation: $t(
+          'package.trends.chart_assistive_text.keyboard_navigation_horizontal',
+        ),
+        tableAvailable: $t('package.trends.chart_assistive_text.table_available'),
+        tableCaption: $t('package.trends.chart_assistive_text.table_caption'),
+      },
+    },
     theme: 'dark',
     /**
      * The built-in skeleton loader kicks in when the component is mounted but the data is not yet ready.
@@ -416,6 +425,13 @@ const config = computed<VueUiSparklineConfig>(() => {
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
             <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+              <!-- Keyboard navigation hint -->
+              <template #hint="{ isVisible }">
+                <p v-if="isVisible" class="text-accent text-xs text-center mt-2" aria-hidden="true">
+                  {{ $t('package.downloads.sparkline_nav_hint') }}
+                </p>
+              </template>
+
               <template #skeleton>
                 <!-- This empty div overrides the default built-in scanning animation on load -->
                 <div />
@@ -493,6 +509,12 @@ const config = computed<VueUiSparklineConfig>(() => {
 .opacity-leave-from {
   opacity: 1;
 }
+
+:deep(.vue-data-ui-component svg:focus-visible) {
+  outline: 0.1rem solid var(--accent-color) !important;
+  border-radius: 0.1rem;
+  outline-offset: 3px;
+}
 </style>
 
 <style>

app/pages/package/[[org]]/[name].vue

@@ -1107,7 +1107,7 @@ const showSkeleton = shallowRef(false)
       'install sidebar'
       'vulns   sidebar'
       'readme  sidebar';
-    grid-template-rows: auto auto auto auto 1fr;
+    grid-template-rows: auto auto auto 1fr;
   }
 }
 
@@ -1120,6 +1120,7 @@ const showSkeleton = shallowRef(false)
       'install sidebar'
       'vulns   sidebar'
       'readme  sidebar';
+    grid-template-rows: auto auto auto 1fr;
   }
 }
 

cli/src/cli.ts

@@ -6,7 +6,7 @@ import * as p from '@clack/prompts'
 import { defineCommand, runMain } from 'citty'
 import { serve } from 'srvx'
 import { createConnectorApp, generateToken, CONNECTOR_VERSION } from './server.ts'
-import { getNpmUser } from './npm-client.ts'
+import { getNpmUser, NPM_REGISTRY_URL } from './npm-client.ts'
 import { initLogger, showToken, logInfo, logWarning, logError } from './logger.ts'
 
 const DEFAULT_PORT = 31415
@@ -15,7 +15,7 @@ const DEV_FRONTEND_URL = 'http://127.0.0.1:3000/'
 
 async function runNpmLogin(): Promise<boolean> {
   return new Promise(resolve => {
-    const child = spawn('npm', ['login'], {
+    const child = spawn('npm', ['login', `--registry=${NPM_REGISTRY_URL}`], {
       stdio: 'inherit',
       shell: true,
     })

cli/src/npm-client.ts

@@ -10,6 +10,16 @@ import { PackageNameSchema, UsernameSchema, OrgNameSchema, ScopeTeamSchema } fro
 import { logCommand, logSuccess, logError, logDebug } from './logger.ts'
 
 const execFileAsync = promisify(execFile)
+export const NPM_REGISTRY_URL = 'https://registry.npmjs.org/'
+
+function createNpmEnv(overrides: Record<string, string> = {}): Record<string, string> {
+  return {
+    ...process.env,
+    ...overrides,
+    FORCE_COLOR: '0',
+    npm_config_registry: NPM_REGISTRY_URL,
+  }
+}
 
 /**
  * Validates an npm package name using the official npm validation package
@@ -191,10 +201,7 @@ async function execNpmInteractive(
     let authUrlTimeout: ReturnType<typeof setTimeout> | null = null
     let authUrlTimedOut = false
 
-    const env: Record<string, string> = {
-      ...(process.env as Record<string, string>),
-      FORCE_COLOR: '0',
-    }
+    const env = createNpmEnv()
 
     // When openUrls is false, tell npm not to open the browser.
     // npm still prints the auth URL and polls doneUrl
@@ -330,7 +337,7 @@ async function execNpm(args: string[], options: ExecNpmOptions = {}): Promise<Np
     // On Unix, we keep it false for better security and performance
     const { stdout, stderr } = await execFileAsync('npm', npmArgs, {
       timeout: 60000,
-      env: { ...process.env, FORCE_COLOR: '0' },
+      env: createNpmEnv(),
       shell: process.platform === 'win32',
     })
 
@@ -606,7 +613,7 @@ export async function packageInit(
       const { stdout, stderr } = await execFileAsync('npm', npmArgs, {
         timeout: 60000,
         cwd: tempDir,
-        env: { ...process.env, FORCE_COLOR: '0' },
+        env: createNpmEnv(),
         shell: process.platform === 'win32',
       })
 

i18n/locales/en.json

@@ -483,6 +483,12 @@
       "maintainer_template": "{avatar} {char126}{name}"
     },
     "trends": {
+      "chart_assistive_text": {
+        "keyboard_navigation_horizontal": "Use the left and right arrow keys to cycle through data points.",
+        "keyboard_navigation_vertical": "Use the up and down arrow keys to cycle through data points.",
+        "table_available": "A data table for this chart is available below.",
+        "table_caption": "Chart data table"
+      },
       "granularity": "Granularity",
       "granularity_daily": "Daily",
       "granularity_weekly": "Weekly",
@@ -541,7 +547,8 @@
     "downloads": {
       "title": "Weekly Downloads",
       "community_distribution": "View community adoption distribution",
-      "subtitle": "Across all versions"
+      "subtitle": "Across all versions",
+      "sparkline_nav_hint": "Use ← →"
     },
     "install_scripts": {
       "title": "Install Scripts",
@@ -1106,7 +1113,9 @@
       "empty_title": "Select packages to compare",
       "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics.",
       "table_view": "Table",
-      "charts_view": "Charts"
+      "charts_view": "Charts",
+      "bar_chart_nav_hint": "Use ↑ ↓",
+      "line_chart_nav_hint": "Use ← →"
     },
     "selector": {
       "search_label": "Search for packages",