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

src/client/theme-default/components/VPFeatures.vue

@@ -37,8 +37,8 @@ const grid = computed(() => {
 <template>
   <div v-if="features" class="VPFeatures">
     <div class="container">
-      <div class="items">
+      <ul class="items">
-        <div
+        <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>
+        </li>
-      </div>
+      </ul>
     </div>
   </div>
 </template>

src/client/theme-default/components/VPMenu.vue

@@ -10,8 +10,8 @@ defineProps<{
 
 <template>
   <div class="VPMenu">
-    <div v-if="items" class="items">
+    <ul v-if="items" class="items">
-      <template v-for="item in items" :key="JSON.stringify(item)">
+      <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>
+      </li>
-    </div>
+    </ul>
 
     <slot />
   </div>

src/client/theme-default/components/VPNavBarExtra.vue

@@ -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>
+      </li>
-    </div>
+    </ul>
 
     <div
       v-if="

src/client/theme-default/components/VPNavBarMenu.vue

@@ -15,15 +15,17 @@ 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">
-      <VPNavBarMenuLink v-if="'link' in item" :item />
+      <li v-for="item in theme.nav" :key="JSON.stringify(item)">
-      <component
+        <VPNavBarMenuLink v-if="'link' in item" :item />
-        v-else-if="'component' in item"
+        <component
-        :is="item.component"
+          v-else-if="'component' in item"
-        v-bind="item.props"
+          :is="item.component"
-      />
+          v-bind="item.props"
-      <VPNavBarMenuGroup v-else :item />
+        />
-    </template>
+        <VPNavBarMenuGroup v-else :item />
+      </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>

src/client/theme-default/components/VPNavBarTranslations.vue

@@ -17,10 +17,10 @@ const { localeLinks, currentLang } = useLangs({
     icon="vpi-languages"
     :label="theme.langMenuLabel || 'Change language'"
   >
-    <div class="items">
+    <ul class="items">
-      <p class="title">{{ currentLang.label }}</p>
+      <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>
+      </li>
-    </div>
+    </ul>
   </VPFlyout>
 </template>
 

src/client/theme-default/components/VPNavScreenMenu.vue

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

src/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -31,8 +31,8 @@ function toggle() {
       <span class="vpi-plus button-icon" />
     </button>
 
-    <div :id="groupId" class="items">
+    <ul :id="groupId" class="items">
-      <template v-for="item in items" :key="JSON.stringify(item)">
+      <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>
+      </li>
-    </div>
+    </ul>
   </div>
 </template>
 

src/client/theme-default/components/VPNavScreenMenuGroupSection.vue

@@ -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>
 

src/client/theme-default/components/VPSidebarItem.vue

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

src/client/theme-default/components/VPSocialLinks.vue

@@ -11,17 +11,17 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="VPSocialLinks">
+  <ul class="VPSocialLinks">
-    <VPSocialLink
+    <li v-for="{ link, icon, ariaLabel, target } in links" :key="link" class="item">
-      v-for="{ link, icon, ariaLabel, target } in links"
+      <VPSocialLink
-      :key="link"
+        :icon
-      :icon
+        :link
-      :link
+        :ariaLabel
-      :ariaLabel
+        :target
-      :target
+        :me
-      :me
+      />
-    />
+    </li>
-  </div>
+  </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>

src/client/theme-default/components/VPSponsorsGrid.vue

@@ -22,8 +22,8 @@ useSponsorsGrid({ el, size: props.size })
 </script>
 
 <template>
-  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
+  <ul class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
-    <div
+    <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>
+    </li>
-  </div>
+  </ul>
 </template>

src/client/theme-default/components/VPTeamMembers.vue

@@ -17,11 +17,11 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
 
 <template>
   <div class="VPTeamMembers" :class="classes">
-    <div class="container">
+    <ul class="container">
-      <div v-for="member in members" :key="member.name" class="item">
+      <li v-for="member in members" :key="member.name" class="item">
         <VPTeamMembersItem :size :member />
-      </div>
+      </li>
-    </div>
+    </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>

src/client/theme-default/styles/components/vp-sponsor.css

@@ -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;
+}