feat(a11y): add roving tabindex + tabpanels for package manager tabs

Author: damevin

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

@@ -387,6 +387,37 @@ const createCommand = computed(() => {
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
 const copyCreateCommand = () => copyCreate(createCommand.value)
 
+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())
+}
+
 // Primary run command parts
 const runCommandParts = computed(() => {
   if (!executableInfo.value?.hasExecutable) return []
@@ -947,12 +978,18 @@ function handleClick(event: MouseEvent) {
             class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"
             role="tablist"
             aria-label="Package manager"
+            @keydown="onTabListKeydown"
           >
             <button
               v-for="pm in packageManagers"
               :key="pm.id"
+              :id="`pm-tab-${pm.id}`"
               role="tab"
               :aria-selected="isMounted && selectedPM === pm.id"
+              :aria-controls="`pm-panel-${pm.id}`"
+              :tabindex="isMounted && selectedPM === pm.id ? 0 : -1"
+              :data-pm-id="pm.id"
+              type="button"
               class="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"
               :class="
                 isMounted && selectedPM === pm.id
@@ -966,7 +1003,15 @@ function handleClick(event: MouseEvent) {
             </button>
           </div>
         </div>
-        <div class="relative group">
+        <div
+          v-for="pm in packageManagers"
+          :key="pm.id"
+          role="tabpanel"
+          :id="`pm-panel-${pm.id}`"
+          :aria-labelledby="`pm-tab-${pm.id}`"
+          v-show="selectedPM === pm.id"
+          class="relative group"
+        >
           <!-- Terminal-style execute command -->
           <div class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
             <div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
@@ -1027,12 +1072,18 @@ function handleClick(event: MouseEvent) {
             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"
               :aria-selected="isMounted && selectedPM === pm.id"
+              :aria-controls="`pm-panel-${pm.id}`"
+              :tabindex="isMounted && selectedPM === pm.id ? 0 : -1"
+              :data-pm-id="pm.id"
+              type="button"
               class="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"
               :class="
                 isMounted && selectedPM === pm.id
@@ -1046,7 +1097,15 @@ function handleClick(event: MouseEvent) {
             </button>
           </div>
         </div>
-        <div class="relative group">
+        <div
+          v-for="pm in packageManagers"
+          :key="pm.id"
+          role="tabpanel"
+          :id="`pm-panel-${pm.id}`"
+          :aria-labelledby="`pm-tab-${pm.id}`"
+          v-show="selectedPM === pm.id"
+          class="relative group"
+        >
           <!-- Terminal-style install command -->
           <div class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
             <div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">