feat(a11y): avoid duplicated tabpanel DOM and keep ARIA wiring

Author: damevin

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

@@ -388,6 +388,7 @@ const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring:
 const copyCreateCommand = () => copyCreate(createCommand.value)
 
 const tablistNavigationKeys = new Set(['ArrowRight', 'ArrowLeft', 'Home', 'End'])
+const activePmId = computed(() => selectedPM.value ?? packageManagers[0]?.id ?? 'npm')
 
 function onTabListKeydown(event: KeyboardEvent) {
   if (!tablistNavigationKeys.has(event.key)) return
@@ -988,7 +989,6 @@ function handleClick(event: MouseEvent) {
               :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="
@@ -1004,12 +1004,9 @@ function handleClick(event: MouseEvent) {
           </div>
         </div>
         <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"
+          :id="`pm-panel-${activePmId}`"
+          :aria-labelledby="`pm-tab-${activePmId}`"
           class="relative group"
         >
           <!-- Terminal-style execute command -->
@@ -1082,7 +1079,6 @@ function handleClick(event: MouseEvent) {
               :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="
@@ -1098,12 +1094,9 @@ function handleClick(event: MouseEvent) {
           </div>
         </div>
         <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"
+          :id="`pm-panel-${activePmId}`"
+          :aria-labelledby="`pm-tab-${activePmId}`"
           class="relative group"
         >
           <!-- Terminal-style install command -->