msb-public
/
vitepress
mirror of https://github.com/vuejs/vitepress
2
1
Code Issues Projects Releases Wiki Activity

fix(theme/a11y): use ul and li for lists (#5326)

Browse Source
pull/5328/head
Bjorn Lu 2 months ago committed by GitHub
parent 79cdd8c018
commit 3f99872468
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 109 additions and 70 deletions
Show Stats Download Patch File Download Diff File

8
src/client/theme-default/components/VPFeatures.vue
Unescape View File

@ -37,8 +37,8 @@ const grid = computed(() => {
<template>
<div v-if="features" class="VPFeatures">
<div class="container">
<div class="items">
<div
<ul class="items">
<li
v-for="feature in features"
:key="feature.title"
class="item"
@ -53,8 +53,8 @@ const grid = computed(() => {
:rel="feature.rel"
:target="feature.target"
/>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>

8
src/client/theme-default/components/VPMenu.vue
Unescape View File

@ -10,8 +10,8 @@ defineProps<{
<template>
<div class="VPMenu">
<div v-if="items" class="items">
<template v-for="item in items" :key="JSON.stringify(item)">
<ul v-if="items" class="items">
<li v-for="item in items" :key="JSON.stringify(item)">
<VPMenuLink v-if="'link' in item" :item />
<component
v-else-if="'component' in item"
@ -19,8 +19,8 @@ defineProps<{
v-bind="item.props"
/>
<VPMenuGroup v-else :text="item.text" :items="item.items" />
</template>
</div>
</li>
</ul>
<slot />
</div>

10
src/client/theme-default/components/VPNavBarExtra.vue
Unescape View File

@ -26,13 +26,13 @@ const hasExtraContent = computed(
class="VPNavBarExtra"
label="extra navigation"
>
<div
<ul
v-if="localeLinks.length && currentLang.label"
class="group translations"
>
<p class="trans-title">{{ currentLang.label }}</p>
<li class="trans-title">{{ currentLang.label }}</li>
<template v-for="locale in localeLinks" :key="locale.link">
<li v-for="locale in localeLinks" :key="locale.link">
<VPMenuLink
:item="locale"
:external="false"
@ -42,8 +42,8 @@ const hasExtraContent = computed(
:dir="locale.dir"
data-allow-mismatch="attribute"
/>
</template>
</div>
</li>
</ul>
<div
v-if="

12
src/client/theme-default/components/VPNavBarMenu.vue
Unescape View File

@ -15,7 +15,8 @@ const { theme } = useData()
<span id="main-nav-aria-label" class="visually-hidden">
Main Navigation
</span>
<template v-for="item in theme.nav" :key="JSON.stringify(item)">
<ul class="list">
<li v-for="item in theme.nav" :key="JSON.stringify(item)">
<VPNavBarMenuLink v-if="'link' in item" :item />
<component
v-else-if="'component' in item"
@ -23,7 +24,8 @@ const { theme } = useData()
v-bind="item.props"
/>
<VPNavBarMenuGroup v-else :item />
</template>
</li>
</ul>
</nav>
</template>
@ -32,9 +34,13 @@ const { theme } = useData()
display: none;
}
.list {
display: flex;
}
@media (min-width: 768px) {
.VPNavBarMenu {
display: flex;
display: block;
}
}
</style>

10
src/client/theme-default/components/VPNavBarTranslations.vue
Unescape View File

@ -17,10 +17,10 @@ const { localeLinks, currentLang } = useLangs({
icon="vpi-languages"
:label="theme.langMenuLabel || 'Change language'"
>
<div class="items">
<p class="title">{{ currentLang.label }}</p>
<ul class="items">
<li class="title">{{ currentLang.label }}</li>
<template v-for="locale in localeLinks" :key="locale.link">
<li v-for="locale in localeLinks" :key="locale.link">
<VPMenuLink
:item="locale"
:external="false"
@ -30,8 +30,8 @@ const { localeLinks, currentLang } = useLangs({
:dir="locale.dir"
data-allow-mismatch="attribute"
/>
</template>
</div>
</li>
</ul>
</VPFlyout>
</template>

6
src/client/theme-default/components/VPNavScreenMenu.vue
Unescape View File

@ -8,7 +8,8 @@ const { theme } = useData()
<template>
<nav v-if="theme.nav" class="VPNavScreenMenu">
<template v-for="item in theme.nav" :key="JSON.stringify(item)">
<ul>
<li v-for="item in theme.nav" :key="JSON.stringify(item)">
<VPNavScreenMenuLink v-if="'link' in item" :item />
<component
v-else-if="'component' in item"
@ -21,6 +22,7 @@ const { theme } = useData()
:text="item.text || ''"
:items="item.items"
/>
</template>
</li>
</ul>
</nav>
</template>

8
src/client/theme-default/components/VPNavScreenMenuGroup.vue
Unescape View File

@ -31,8 +31,8 @@ function toggle() {
<span class="vpi-plus button-icon" />
</button>
<div :id="groupId" class="items">
<template v-for="item in items" :key="JSON.stringify(item)">
<ul :id="groupId" class="items">
<li v-for="item in items" :key="JSON.stringify(item)">
<div v-if="'link' in item" class="item">
<VPNavScreenMenuGroupLink :item />
</div>
@ -44,8 +44,8 @@ function toggle() {
<div v-else class="group">
<VPNavScreenMenuGroupSection :text="item.text" :items="item.items" />
</div>
</template>
</div>
</li>
</ul>
</div>
</template>

6
src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
Unescape View File

@ -11,7 +11,11 @@ defineProps<{
<template>
<div class="VPNavScreenMenuGroupSection">
<p v-if="text" class="title">{{ text }}</p>
<VPNavScreenMenuGroupLink v-for="item in items" :key="item.text" :item />
<ul>
<li v-for="item in items" :key="item.text">
<VPNavScreenMenuGroupLink :item="item" />
</li>
</ul>
</div>
</template>

8
src/client/theme-default/components/VPSidebarItem.vue
Unescape View File

@ -94,16 +94,16 @@ function onCaretClick() {
</div>
</div>
<div v-if="item.items && item.items.length" class="items">
<template v-if="depth < 5">
<ul v-if="item.items && item.items.length" class="items">
<li v-if="depth < 5">
<VPSidebarItem
v-for="i in item.items"
:key="i.text"
:item="i"
:depth="depth + 1"
/>
</template>
</div>
</li>
</ul>
</component>
</template>

16
src/client/theme-default/components/VPSocialLinks.vue
Unescape View File

@ -11,17 +11,17 @@ withDefaults(defineProps<{
</script>
<template>
<div class="VPSocialLinks">
<ul class="VPSocialLinks">
<li v-for="{ link, icon, ariaLabel, target } in links" :key="link" class="item">
<VPSocialLink
v-for="{ link, icon, ariaLabel, target } in links"
:key="link"
:icon
:link
:ariaLabel
:target
:me
/>
</div>
</li>
</ul>
</template>
<style scoped>
@ -29,4 +29,12 @@ withDefaults(defineProps<{
display: flex;
justify-content: center;
}
/* Reset styles from vp-doc if used in markdown */
.vp-doc .VPSocialLinks,
.vp-doc .VPSocialLinks .item {
list-style: none;
margin: 0;
padding: 0;
}
</style>

8
src/client/theme-default/components/VPSponsorsGrid.vue
Unescape View File

@ -22,8 +22,8 @@ useSponsorsGrid({ el, size: props.size })
</script>
<template>
<div class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
<div
<ul class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
<li
v-for="sponsor in data"
:key="sponsor.name"
class="vp-sponsor-grid-item"
@ -42,6 +42,6 @@ useSponsorsGrid({ el, size: props.size })
/>
</article>
</a>
</div>
</div>
</li>
</ul>
</template>

19
src/client/theme-default/components/VPTeamMembers.vue
Unescape View File

@ -17,11 +17,11 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
<template>
<div class="VPTeamMembers" :class="classes">
<div class="container">
<div v-for="member in members" :key="member.name" class="item">
<ul class="container">
<li v-for="member in members" :key="member.name" class="item">
<VPTeamMembersItem :size :member />
</div>
</div>
</li>
</ul>
</div>
</template>
@ -63,4 +63,15 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
margin: 0 auto;
max-width: 1152px;
}
/* Reset styles from vp-doc if used in markdown */
.vp-doc .VPTeamMembers .container {
list-style: none;
margin: 0 auto;
padding: 0;
}
.vp-doc .VPTeamMembers .item {
margin: 0;
padding: 0;
}
</style>

8
src/client/theme-default/styles/components/vp-sponsor.css
Unescape View File

@ -153,3 +153,11 @@
.dark .vp-sponsor-grid-image {
filter: grayscale(1) invert(1);
}
/* Reset styles from vp-doc if used in markdown */
.vp-doc .vp-sponsor-grid,
.vp-doc .vp-sponsor-grid-item {
list-style: none;
margin: 0;
padding: 0;
}

Write Preview
Loading…
Cancel
Save