Merge branch 'refactor/remove-redirect-on-typing' of https://github.com/MatteoGabriele/npmx.dev into refactor/remove-redirect-on-typing

Author: MatteoGabriele

README.md

@@ -4,7 +4,7 @@
 
 <p align="center">
   <a href="https://npmx.dev/">
-    <img width="1090" alt="Screenshot of npmx.dev showing the nuxt package" src="https://github.com/user-attachments/assets/229497a2-8491-461c-aa1d-fba981215340">
+    <img width="1090" alt="Screenshot of npmx.dev showing the nuxt package" src="https://github.com/user-attachments/assets/1a2a3205-0227-46dc-b1f9-48f9a65691d3">
   </a>
 </p>
 

app/components/PackageDownloadAnalytics.vue

@@ -49,8 +49,6 @@ watch(
 
 const isDarkMode = computed(() => resolvedMode.value === 'dark')
 
-// oklh or css variables are not supported by vue-data-ui (for now)
-
 const accentColorValueById = computed<Record<string, string>>(() => {
   const map: Record<string, string> = {}
   for (const item of accentColors) {

app/components/PackageManagerTabs.vue

@@ -1,19 +1,55 @@
 <script setup lang="ts">
 const selectedPM = useSelectedPackageManager()
+
+const tablistNavigationKeys = new Set(['ArrowRight', 'ArrowLeft', 'Home', 'End'])
+
+function onTabListKeydown(event: KeyboardEvent) {
+  if (!tablistNavigationKeys.has(event.key)) return
+  const tablist = event.currentTarget as HTMLElement | null
+  if (!tablist) return
+
+  const tabs = Array.from(tablist.querySelectorAll<HTMLElement>('[role="tab"]'))
+  const count = Math.min(tabs.length, packageManagers.length)
+  if (!count) return
+
+  event.preventDefault()
+
+  let activeIndex = packageManagers.findIndex(pm => pm.id === selectedPM.value)
+  if (activeIndex < 0) activeIndex = 0
+
+  let nextIndex = activeIndex
+  if (event.key === 'ArrowRight') nextIndex = (activeIndex + 1) % count
+  if (event.key === 'ArrowLeft') nextIndex = (activeIndex - 1 + count) % count
+  if (event.key === 'Home') nextIndex = 0
+  if (event.key === 'End') nextIndex = count - 1
+
+  const nextTab = tabs[nextIndex]
+  const nextId = packageManagers[nextIndex]?.id
+  if (nextId && nextId !== selectedPM.value) {
+    selectedPM.value = nextId
+  }
+
+  nextTick(() => nextTab?.focus())
+}
 </script>
 
 <template>
   <div
     class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
     role="tablist"
     :aria-label="$t('package.get_started.pm_label')"
+    @keydown="onTabListKeydown"
   >
     <button
       v-for="pm in packageManagers"
       :key="pm.id"
+      :id="`pm-tab-${pm.id}`"
       role="tab"
       :data-pm-tab="pm.id"
       :aria-selected="selectedPM === pm.id"
+      :aria-controls="`pm-panel-${pm.id}`"
+      :tabindex="selectedPM === pm.id ? 0 : -1"
+      type="button"
       class="pm-tab px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inline-flex items-center gap-1.5 hover:text-fg"
       @click="selectedPM = pm.id"
     >

app/components/PackageWeeklyDownloadStats.vue

@@ -116,10 +116,32 @@ const dataset = computed(() =>
 
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
-// oklh or css variables are not supported by vue-data-ui (for now)
 const config = computed(() => {
   return {
     theme: 'dark',
+    /**
+     * The built-in skeleton loader kicks in when the component is mounted but the data is not yet ready.
+     * The configuration of the skeleton is customized for a seemless transition with the final state
+     */
+    skeletonConfig: {
+      style: {
+        backgroundColor: 'transparent',
+        dataLabel: {
+          show: true,
+          color: 'transparent',
+        },
+        area: {
+          color: colors.value.borderHover,
+          useGradient: false,
+          opacity: 10,
+        },
+        line: {
+          color: colors.value.borderHover,
+        },
+      },
+    },
+    // Same idea: initialize the line at zero, so it nicely transitions to the final dataset
+    skeletonDataset: Array.from({ length: 52 }, () => 0),
     style: {
       backgroundColor: 'transparent',
       animation: { show: false },
@@ -196,16 +218,21 @@ const config = computed(() => {
 
       <div class="w-full overflow-hidden">
         <ClientOnly>
-          <VueUiSparkline class="w-full max-w-xs" :dataset :config />
+          <VueUiSparkline class="w-full max-w-xs" :dataset :config>
+            <template #skeleton>
+              <!-- This empty div overrides the default built-in scanning animation on load -->
+              <div />
+            </template>
+          </VueUiSparkline>
           <template #fallback>
             <!-- Skeleton matching sparkline layout: title row + chart with data label -->
-            <div class="max-w-xs">
-              <!-- Title row: date range -->
-              <div class="h-5 flex items-center ps-3">
+            <div class="min-h-[75.195px]">
+              <!-- Title row: date range (24px height) -->
+              <div class="h-6 flex items-center ps-3">
                 <span class="skeleton h-3 w-36" />
               </div>
-              <!-- Chart area: data label left, sparkline right (h-[51px] matches rendered SVG) -->
-              <div class="h-[55px] flex items-center">
+              <!-- Chart area: data label left, sparkline right -->
+              <div class="aspect-[500/80] flex items-center">
                 <!-- Data label (covers ~42% width) -->
                 <div class="w-[42%] flex items-center ps-0.5">
                   <span class="skeleton h-7 w-24" />

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

@@ -14,6 +14,8 @@ definePageMeta({
 const router = useRouter()
 
 const { packageName, requestedVersion, orgName } = usePackageRoute()
+const selectedPM = useSelectedPackageManager()
+const activePmId = computed(() => selectedPM.value ?? 'npm')
 
 if (import.meta.server) {
   assertValidPackageName(packageName.value)
@@ -845,11 +847,17 @@ function handleClick(event: MouseEvent) {
           <!-- Package manager tabs -->
           <PackageManagerTabs />
         </div>
-        <ExecuteCommandTerminal
-          :package-name="pkg.name"
-          :jsr-info="jsrInfo"
-          :is-create-package="isCreatePkg"
-        />
+        <div
+          role="tabpanel"
+          :id="`pm-panel-${activePmId}`"
+          :aria-labelledby="`pm-tab-${activePmId}`"
+        >
+          <ExecuteCommandTerminal
+            :package-name="pkg.name"
+            :jsr-info="jsrInfo"
+            :is-create-package="isCreatePkg"
+          />
+        </div>
       </section>
 
       <!-- Regular packages: Install command with optional run command -->
@@ -873,14 +881,20 @@ function handleClick(event: MouseEvent) {
           <!-- Package manager tabs -->
           <PackageManagerTabs />
         </div>
-        <InstallCommandTerminal
-          :package-name="pkg.name"
-          :requested-version="requestedVersion"
-          :jsr-info="jsrInfo"
-          :types-package-name="typesPackageName"
-          :executable-info="executableInfo"
-          :create-package-info="createPackageInfo"
-        />
+        <div
+          role="tabpanel"
+          :id="`pm-panel-${activePmId}`"
+          :aria-labelledby="`pm-tab-${activePmId}`"
+        >
+          <InstallCommandTerminal
+            :package-name="pkg.name"
+            :requested-version="requestedVersion"
+            :jsr-info="jsrInfo"
+            :types-package-name="typesPackageName"
+            :executable-info="executableInfo"
+            :create-package-info="createPackageInfo"
+          />
+        </div>
       </section>
 
       <div class="area-vulns space-y-6">

package.json

@@ -62,7 +62,7 @@
     "validate-npm-package-name": "^7.0.2",
     "virtua": "^0.48.3",
     "vue": "3.5.27",
-    "vue-data-ui": "^3.13.6"
+    "vue-data-ui": "^3.13.7"
   },
   "devDependencies": {
     "@iconify-json/carbon": "1.2.18",

pnpm-lock.yaml

@@ -0,0 +1,35 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.describe('Package Page', () => {
+  test('/vue → package manager tabs use roving tabindex', async ({ page, goto }) => {
+    await goto('/vue', { waitUntil: 'domcontentloaded' })
+
+    const tablist = page.locator('[role="tablist"]').first()
+    await expect(tablist).toBeVisible()
+
+    const tabs = tablist.locator('[role="tab"]')
+    const tabCount = await tabs.count()
+    expect(tabCount).toBeGreaterThan(1)
+
+    const firstTab = tabs.first()
+    await firstTab.focus()
+    await expect(firstTab).toBeFocused()
+
+    await page.keyboard.press('ArrowRight')
+
+    const secondTab = tabs.nth(1)
+    await expect(secondTab).toBeFocused()
+    await expect(secondTab).toHaveAttribute('aria-selected', 'true')
+    await expect(secondTab).toHaveAttribute('tabindex', '0')
+    await expect(firstTab).toHaveAttribute('tabindex', '-1')
+
+    const tabpanel = page.locator('[role="tabpanel"]').first()
+    const controls = await secondTab.getAttribute('aria-controls')
+    const panelId = await tabpanel.getAttribute('id')
+    expect(controls).toBe(panelId)
+
+    const labelledBy = await tabpanel.getAttribute('aria-labelledby')
+    const tabId = await secondTab.getAttribute('id')
+    expect(labelledBy).toBe(tabId)
+  })
+})