Skip to content

Commit 65fcacd

Browse files
eryue0220eryue0220
committed
fix html validation
1 parent e61657e commit 65fcacd

3 files changed

Lines changed: 72 additions & 71 deletions

File tree

‎app/components/Package/ManagerSelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ function handleKeydown(event: KeyboardEvent) {
9292
:aria-expanded="isOpen"
9393
aria-haspopup="listbox"
9494
:aria-label="$t('package.get_started.pm_label')"
95-
:aria-controls="listboxId"
95+
:aria-controls="isOpen ? listboxId : undefined"
9696
@click="toggle"
9797
@keydown="handleKeydown"
9898
>

‎app/components/ReadmeTocDropdown.vue‎

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -166,85 +166,83 @@ function handleKeydown(event: KeyboardEvent) {
166166
</ButtonBase>
167167

168168
<Teleport to="body">
169-
<Transition
170-
:enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
171-
:enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
172-
enter-to-class="opacity-100"
173-
:leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
174-
leave-from-class="opacity-100"
175-
:leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
169+
<div
170+
:id="listboxId"
171+
ref="listRef"
172+
role="listbox"
173+
:aria-hidden="!isOpen"
174+
:aria-activedescendant="
175+
isOpen && highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
176+
"
177+
:aria-label="$t('package.readme.toc_title')"
178+
:style="
179+
isOpen
180+
? getDropdownStyle()
181+
: { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
182+
"
183+
:class="[
184+
'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
185+
!isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
186+
]"
176187
>
177-
<div
178-
v-if="isOpen"
179-
:id="listboxId"
180-
ref="listRef"
181-
role="listbox"
182-
:aria-activedescendant="
183-
highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
184-
"
185-
:aria-label="$t('package.readme.toc_title')"
186-
:style="getDropdownStyle()"
187-
class="fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain"
188-
>
189-
<template v-for="node in tocTree" :key="node.id">
188+
<template v-for="node in tocTree" :key="node.id">
189+
<NuxtLink
190+
:id="`${listboxId}-${node.id}`"
191+
:to="`#${node.id}`"
192+
role="option"
193+
:aria-selected="activeId === node.id"
194+
class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
195+
:class="[
196+
activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
197+
highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
198+
]"
199+
dir="auto"
200+
@click="select()"
201+
@mouseenter="highlightedIndex = getIndex(node.id)"
202+
>
203+
<span class="truncate">{{ node.text }}</span>
204+
</NuxtLink>
205+
206+
<template v-for="child in node.children" :key="child.id">
190207
<NuxtLink
191-
:id="`${listboxId}-${node.id}`"
192-
:to="`#${node.id}`"
208+
:id="`${listboxId}-${child.id}`"
209+
:to="`#${child.id}`"
193210
role="option"
194-
:aria-selected="activeId === node.id"
195-
class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
211+
:aria-selected="activeId === child.id"
212+
class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
196213
:class="[
197-
activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
198-
highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
214+
activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
215+
highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
199216
]"
200217
dir="auto"
201218
@click="select()"
202-
@mouseenter="highlightedIndex = getIndex(node.id)"
219+
@mouseenter="highlightedIndex = getIndex(child.id)"
203220
>
204-
<span class="truncate">{{ node.text }}</span>
221+
<span class="truncate">{{ child.text }}</span>
205222
</NuxtLink>
206223

207-
<template v-for="child in node.children" :key="child.id">
208-
<NuxtLink
209-
:id="`${listboxId}-${child.id}`"
210-
:to="`#${child.id}`"
211-
role="option"
212-
:aria-selected="activeId === child.id"
213-
class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
214-
:class="[
215-
activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
216-
highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
217-
]"
218-
dir="auto"
219-
@click="select()"
220-
@mouseenter="highlightedIndex = getIndex(child.id)"
221-
>
222-
<span class="truncate">{{ child.text }}</span>
223-
</NuxtLink>
224-
225-
<NuxtLink
226-
v-for="grandchild in child.children"
227-
:id="`${listboxId}-${grandchild.id}`"
228-
:to="`#${grandchild.id}`"
229-
:key="grandchild.id"
230-
role="option"
231-
:aria-selected="activeId === grandchild.id"
232-
class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
233-
:class="[
234-
activeId === grandchild.id ? 'text-fg font-medium' : 'text-fg-subtle',
235-
highlightedIndex === getIndex(grandchild.id)
236-
? 'bg-bg-elevated'
237-
: 'hover:bg-bg-elevated',
238-
]"
239-
dir="auto"
240-
@click="select()"
241-
@mouseenter="highlightedIndex = getIndex(grandchild.id)"
242-
>
243-
<span class="truncate">{{ grandchild.text }}</span>
244-
</NuxtLink>
245-
</template>
224+
<NuxtLink
225+
v-for="grandchild in child.children"
226+
:id="`${listboxId}-${grandchild.id}`"
227+
:to="`#${grandchild.id}`"
228+
:key="grandchild.id"
229+
role="option"
230+
:aria-selected="activeId === grandchild.id"
231+
class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
232+
:class="[
233+
grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
234+
highlightedIndex === getIndex(grandchild.id)
235+
? 'bg-bg-elevated'
236+
: 'hover:bg-bg-elevated',
237+
]"
238+
dir="auto"
239+
@click="select()"
240+
@mouseenter="highlightedIndex = getIndex(grandchild.id)"
241+
>
242+
<span class="truncate">{{ grandchild.text }}</span>
243+
</NuxtLink>
246244
</template>
247-
</div>
248-
</Transition>
245+
</template>
246+
</div>
249247
</Teleport>
250248
</template>

‎nuxt.config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,10 @@ export default defineNuxtConfig({
247247
htmlValidator: {
248248
enabled: !isCI || (provider !== 'vercel' && !!process.env.VALIDATE_HTML),
249249
options: {
250-
rules: { 'meta-refresh': 'off' },
250+
rules: {
251+
'meta-refresh': 'off',
252+
'prefer-native-element': ['error', { exclude: ['listbox'] }],
253+
},
251254
},
252255
failOnError: true,
253256
},

0 commit comments

Comments
 (0)