From 65fcacdb8f49ce7930fe3bb587eb289f5ae8def3 Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Thu, 26 Feb 2026 17:05:08 +0800
Subject: [PATCH 1/3] fix html validation

---
 app/components/Package/ManagerSelect.vue |   2 +-
 app/components/ReadmeTocDropdown.vue     | 136 +++++++++++------------
 nuxt.config.ts                           |   5 +-
 3 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/app/components/Package/ManagerSelect.vue b/app/components/Package/ManagerSelect.vue
index 2f9e3d5dc..cbd442130 100644
--- a/app/components/Package/ManagerSelect.vue
+++ b/app/components/Package/ManagerSelect.vue
@@ -92,7 +92,7 @@ function handleKeydown(event: KeyboardEvent) {
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.get_started.pm_label')"
-    :aria-controls="listboxId"
+    :aria-controls="isOpen ? listboxId : undefined"
     @click="toggle"
     @keydown="handleKeydown"
   >
diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index 66f92d08e..2907856d5 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -166,85 +166,83 @@ function handleKeydown(event: KeyboardEvent) {
   </ButtonBase>
 
   <Teleport to="body">
-    <Transition
-      :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
-      :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
-      enter-to-class="opacity-100"
-      :leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
-      leave-from-class="opacity-100"
-      :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
+    <div
+      :id="listboxId"
+      ref="listRef"
+      role="listbox"
+      :aria-hidden="!isOpen"
+      :aria-activedescendant="
+        isOpen && highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
+      "
+      :aria-label="$t('package.readme.toc_title')"
+      :style="
+        isOpen
+          ? getDropdownStyle()
+          : { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
+      "
+      :class="[
+        'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
+        !isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
+      ]"
     >
-      <div
-        v-if="isOpen"
-        :id="listboxId"
-        ref="listRef"
-        role="listbox"
-        :aria-activedescendant="
-          highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
-        "
-        :aria-label="$t('package.readme.toc_title')"
-        :style="getDropdownStyle()"
-        class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain"
-      >
-        <template v-for="node in tocTree" :key="node.id">
+      <template v-for="node in tocTree" :key="node.id">
+        <NuxtLink
+          :id="`${listboxId}-${node.id}`"
+          :to="`#${node.id}`"
+          role="option"
+          :aria-selected="activeId === node.id"
+          class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
+          :class="[
+            activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
+            highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
+          ]"
+          dir="auto"
+          @click="select()"
+          @mouseenter="highlightedIndex = getIndex(node.id)"
+        >
+          <span class="truncate">{{ node.text }}</span>
+        </NuxtLink>
+
+        <template v-for="child in node.children" :key="child.id">
           <NuxtLink
-            :id="`${listboxId}-${node.id}`"
-            :to="`#${node.id}`"
+            :id="`${listboxId}-${child.id}`"
+            :to="`#${child.id}`"
             role="option"
-            :aria-selected="activeId === node.id"
-            class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
+            :aria-selected="activeId === child.id"
+            class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
             :class="[
-              activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
-              highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
+              activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
+              highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
             ]"
             dir="auto"
             @click="select()"
-            @mouseenter="highlightedIndex = getIndex(node.id)"
+            @mouseenter="highlightedIndex = getIndex(child.id)"
           >
-            <span class="truncate">{{ node.text }}</span>
+            <span class="truncate">{{ child.text }}</span>
           </NuxtLink>
 
-          <template v-for="child in node.children" :key="child.id">
-            <NuxtLink
-              :id="`${listboxId}-${child.id}`"
-              :to="`#${child.id}`"
-              role="option"
-              :aria-selected="activeId === child.id"
-              class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
-              :class="[
-                activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
-                highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
-              ]"
-              dir="auto"
-              @click="select()"
-              @mouseenter="highlightedIndex = getIndex(child.id)"
-            >
-              <span class="truncate">{{ child.text }}</span>
-            </NuxtLink>
-
-            <NuxtLink
-              v-for="grandchild in child.children"
-              :id="`${listboxId}-${grandchild.id}`"
-              :to="`#${grandchild.id}`"
-              :key="grandchild.id"
-              role="option"
-              :aria-selected="activeId === grandchild.id"
-              class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
-              :class="[
-                activeId === grandchild.id ? 'text-fg font-medium' : 'text-fg-subtle',
-                highlightedIndex === getIndex(grandchild.id)
-                  ? 'bg-bg-elevated'
-                  : 'hover:bg-bg-elevated',
-              ]"
-              dir="auto"
-              @click="select()"
-              @mouseenter="highlightedIndex = getIndex(grandchild.id)"
-            >
-              <span class="truncate">{{ grandchild.text }}</span>
-            </NuxtLink>
-          </template>
+          <NuxtLink
+            v-for="grandchild in child.children"
+            :id="`${listboxId}-${grandchild.id}`"
+            :to="`#${grandchild.id}`"
+            :key="grandchild.id"
+            role="option"
+            :aria-selected="activeId === grandchild.id"
+            class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
+            :class="[
+              grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
+              highlightedIndex === getIndex(grandchild.id)
+                ? 'bg-bg-elevated'
+                : 'hover:bg-bg-elevated',
+            ]"
+            dir="auto"
+            @click="select()"
+            @mouseenter="highlightedIndex = getIndex(grandchild.id)"
+          >
+            <span class="truncate">{{ grandchild.text }}</span>
+          </NuxtLink>
         </template>
-      </div>
-    </Transition>
+      </template>
+    </div>
   </Teleport>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a59a40988..3b61c6ecb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -247,7 +247,10 @@ export default defineNuxtConfig({
   htmlValidator: {
     enabled: !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML),
     options: {
-      rules: { 'meta-refresh': 'off' },
+      rules: {
+        'meta-refresh': 'off',
+        'prefer-native-element': ['error', { exclude: ['listbox'] }],
+      },
     },
     failOnError: true,
   },

From ef5755c446f25a741cf8df2fa87cfaac24a3392c Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Thu, 26 Feb 2026 22:35:59 +0800
Subject: [PATCH 2/3] add transition

---
 app/components/ReadmeTocDropdown.vue | 145 ++++++++++++++-------------
 1 file changed, 78 insertions(+), 67 deletions(-)

diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index 2907856d5..c5c231abd 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -166,83 +166,94 @@ function handleKeydown(event: KeyboardEvent) {
   </ButtonBase>
 
   <Teleport to="body">
-    <div
-      :id="listboxId"
-      ref="listRef"
-      role="listbox"
-      :aria-hidden="!isOpen"
-      :aria-activedescendant="
-        isOpen && highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
-      "
-      :aria-label="$t('package.readme.toc_title')"
-      :style="
-        isOpen
-          ? getDropdownStyle()
-          : { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
-      "
-      :class="[
-        'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
-        !isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
-      ]"
+    <Transition
+      :enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
+      :enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
+      enter-to-class="opacity-100"
+      :leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
+      leave-from-class="opacity-100"
+      :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
     >
-      <template v-for="node in tocTree" :key="node.id">
-        <NuxtLink
-          :id="`${listboxId}-${node.id}`"
-          :to="`#${node.id}`"
-          role="option"
-          :aria-selected="activeId === node.id"
-          class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
-          :class="[
-            activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
-            highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
-          ]"
-          dir="auto"
-          @click="select()"
-          @mouseenter="highlightedIndex = getIndex(node.id)"
-        >
-          <span class="truncate">{{ node.text }}</span>
-        </NuxtLink>
-
-        <template v-for="child in node.children" :key="child.id">
+      <div
+        :id="listboxId"
+        ref="listRef"
+        role="listbox"
+        :aria-hidden="!isOpen"
+        :aria-activedescendant="
+          isOpen && highlightedIndex >= 0 && toc[highlightedIndex]?.id
+            ? `${listboxId}-${toc[highlightedIndex]?.id}`
+            : undefined
+        "
+        :aria-label="$t('package.readme.toc_title')"
+        :style="
+          isOpen
+            ? getDropdownStyle()
+            : { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
+        "
+        :class="[
+          'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
+          !isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
+        ]"
+      >
+        <template v-for="node in tocTree" :key="node.id">
           <NuxtLink
-            :id="`${listboxId}-${child.id}`"
-            :to="`#${child.id}`"
+            :id="`${listboxId}-${node.id}`"
+            :to="`#${node.id}`"
             role="option"
-            :aria-selected="activeId === child.id"
-            class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
+            :aria-selected="activeId === node.id"
+            class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
             :class="[
-              activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
-              highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
+              activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
+              highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
             ]"
             dir="auto"
             @click="select()"
-            @mouseenter="highlightedIndex = getIndex(child.id)"
+            @mouseenter="highlightedIndex = getIndex(node.id)"
           >
-            <span class="truncate">{{ child.text }}</span>
+            <span class="truncate">{{ node.text }}</span>
           </NuxtLink>
 
-          <NuxtLink
-            v-for="grandchild in child.children"
-            :id="`${listboxId}-${grandchild.id}`"
-            :to="`#${grandchild.id}`"
-            :key="grandchild.id"
-            role="option"
-            :aria-selected="activeId === grandchild.id"
-            class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
-            :class="[
-              grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
-              highlightedIndex === getIndex(grandchild.id)
-                ? 'bg-bg-elevated'
-                : 'hover:bg-bg-elevated',
-            ]"
-            dir="auto"
-            @click="select()"
-            @mouseenter="highlightedIndex = getIndex(grandchild.id)"
-          >
-            <span class="truncate">{{ grandchild.text }}</span>
-          </NuxtLink>
+          <template v-for="child in node.children" :key="child.id">
+            <NuxtLink
+              :id="`${listboxId}-${child.id}`"
+              :to="`#${child.id}`"
+              role="option"
+              :aria-selected="activeId === child.id"
+              class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
+              :class="[
+                activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
+                highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
+              ]"
+              dir="auto"
+              @click="select()"
+              @mouseenter="highlightedIndex = getIndex(child.id)"
+            >
+              <span class="truncate">{{ child.text }}</span>
+            </NuxtLink>
+
+            <NuxtLink
+              v-for="grandchild in child.children"
+              :id="`${listboxId}-${grandchild.id}`"
+              :to="`#${grandchild.id}`"
+              :key="grandchild.id"
+              role="option"
+              :aria-selected="activeId === grandchild.id"
+              class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
+              :class="[
+                grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
+                highlightedIndex === getIndex(grandchild.id)
+                  ? 'bg-bg-elevated'
+                  : 'hover:bg-bg-elevated',
+              ]"
+              dir="auto"
+              @click="select()"
+              @mouseenter="highlightedIndex = getIndex(grandchild.id)"
+            >
+              <span class="truncate">{{ grandchild.text }}</span>
+            </NuxtLink>
+          </template>
         </template>
-      </template>
-    </div>
+      </div>
+    </Transition>
   </Teleport>
 </template>

From fabad0f78be6144433b04fd9b60c957914cd732d Mon Sep 17 00:00:00 2001
From: eryue0220 <eryue0220@gmail.com>
Date: Thu, 26 Feb 2026 22:48:24 +0800
Subject: [PATCH 3/3] fix ut

---
 app/components/ReadmeTocDropdown.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/app/components/ReadmeTocDropdown.vue b/app/components/ReadmeTocDropdown.vue
index c5c231abd..95a0e0f41 100644
--- a/app/components/ReadmeTocDropdown.vue
+++ b/app/components/ReadmeTocDropdown.vue
@@ -148,7 +148,7 @@ function handleKeydown(event: KeyboardEvent) {
     :aria-expanded="isOpen"
     aria-haspopup="listbox"
     :aria-label="$t('package.readme.toc_title')"
-    :aria-controls="listboxId"
+    :aria-controls="isOpen ? listboxId : undefined"
     @click="toggle"
     @keydown="handleKeydown"
     classicon="i-lucide:list"
@@ -175,25 +175,18 @@ function handleKeydown(event: KeyboardEvent) {
       :leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
     >
       <div
+        v-if="isOpen"
         :id="listboxId"
         ref="listRef"
         role="listbox"
-        :aria-hidden="!isOpen"
         :aria-activedescendant="
-          isOpen && highlightedIndex >= 0 && toc[highlightedIndex]?.id
+          highlightedIndex >= 0 && toc[highlightedIndex]?.id
             ? `${listboxId}-${toc[highlightedIndex]?.id}`
             : undefined
         "
         :aria-label="$t('package.readme.toc_title')"
-        :style="
-          isOpen
-            ? getDropdownStyle()
-            : { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
-        "
-        :class="[
-          'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
-          !isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
-        ]"
+        :style="getDropdownStyle()"
+        class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain"
       >
         <template v-for="node in tocTree" :key="node.id">
           <NuxtLink