feat(theme): a11y improvements

__tests__/e2e/multi-sidebar/index.test.ts

@@ -5,7 +5,7 @@ describe('test multi sidebar sort root', () => {
 
   test('using / sidebar', async () => {
     const sidebarLocator = page.locator(
-      '.VPSidebarItem.level-0 > .item > .link > .text'
+      '.VPSidebarItem.level-0 > .item > .text'
     )
 
     const sidebarContent = await sidebarLocator.allTextContents()
@@ -27,7 +27,7 @@ describe('test multi sidebar sort order', () => {
 
   test('using /multi-sidebar/ sidebar', async () => {
     const sidebarLocator = page.locator(
-      '.VPSidebarItem.level-0 > .item > .link > .text'
+      '.VPSidebarItem.level-0 > .item > .text'
     )
 
     const sidebarContent = await sidebarLocator.allTextContents()

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

@@ -29,7 +29,7 @@ const showFooter = computed(() => {
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
       <div v-if="hasEditLink" class="edit-link">
         <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
-          <VPIconEdit class="edit-link-icon" />
+          <VPIconEdit class="edit-link-icon" aria-label="edit icon"/>
           {{ editLink.text }}
         </VPLink>
       </div>

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

@@ -24,6 +24,7 @@ const { page } = useData()
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
+    tabindex="0"
   >
     {{ item.text }}
   </VPLink>

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

@@ -100,11 +100,12 @@ function poll() {
   <div v-if="theme.algolia" class="VPNavBarSearch">
     <VPAlgoliaSearchBox v-if="loaded" :algolia="theme.algolia" />
 
-    <div v-else id="docsearch" @click="load">
+    <div v-else id="docsearch">
       <button
         type="button"
         class="DocSearch DocSearch-Button"
         aria-label="Search"
+        @click="load"
       >
         <span class="DocSearch-Button-Container">
           <svg
@@ -112,6 +113,7 @@ function poll() {
             width="20"
             height="20"
             viewBox="0 0 20 20"
+            aria-label="search icon"
           >
             <path
               d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"

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

@@ -41,7 +41,10 @@ const classes = computed(() => [
   { 'has-active': hasActiveLink.value }
 ])
 
-function onItemClick() {
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter') {
+    return
+  }
   !props.item.link && toggle()
 }
 
@@ -52,14 +55,27 @@ function onCaretClick() {
 
 <template>
   <component :is="sectionTag" class="VPSidebarItem" :class="classes">
-    <div v-if="item.text" class="item" :role="itemRole" @click="onItemClick">
+    <div v-if="item.text"
+      class="item"
+      :role="itemRole"
+      v-on="item.items ? { click: onItemInteraction, keydown: onItemInteraction } : {}"
+      :tabindex="item.items && 0"
+    >
       <div class="indicator" />
 
-      <VPLink :tag="linkTag" class="link" :href="item.link">
+      <VPLink v-if="item.link" :tag="linkTag" class="link" :href="item.link">
         <component :is="textTag" class="text" v-html="item.text" />
       </VPLink>
-
+      <component v-else :is="textTag" class="text" v-html="item.text" />
-      <div v-if="item.collapsed != null" class="caret" role="button" @click="onCaretClick">
+
+      <div v-if="item.collapsed != null"
+        class="caret"
+        role="button"
+        aria-label="toggle section"
+        @click="onCaretClick"
+        @keydown.enter="onCaretClick"
+        tabindex="0"
+      >
         <VPIconChevronRight class="caret-icon" />
       </div>
     </div>

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

@@ -75,15 +75,16 @@ watch(checked, (newIsDark) => {
 </script>
 
 <template>
-  <VPSwitch
+  <label title="toggle dark mode">
-    class="VPSwitchAppearance"
+    <VPSwitch
-    aria-label="toggle dark mode"
+      class="VPSwitchAppearance"
-    :aria-checked="checked"
+      :aria-checked="checked"
-    @click="toggle"
+      @click="toggle"
-  >
+    >
-    <VPIconSun class="sun" />
+      <VPIconSun class="sun" />
-    <VPIconMoon class="moon" />
+      <VPIconMoon class="moon" />
-  </VPSwitch>
+    </VPSwitch>
+  </label>
 </template>
 
 <style scoped>

src/client/theme-default/styles/vars.css

@@ -13,7 +13,7 @@
   --vp-c-gray: #8e8e93;
 
   --vp-c-text-light-1: rgba(60, 60, 67);
-  --vp-c-text-light-2: rgba(60, 60, 67, 0.7);
+  --vp-c-text-light-2: rgba(60, 60, 67, 0.75);
   --vp-c-text-light-3: rgba(60, 60, 67, 0.33);
 
   --vp-c-text-dark-1: rgba(255, 255, 245, 0.86);

src/node/markdown/plugins/highlight.ts

@@ -110,10 +110,15 @@ export async function highlight(
     }
 
     const lineOptions = attrsToLines(attrs)
-    const cleanup = (str: string) =>
+    const cleanup = (str: string) => {
-      str
+      return str
-        .replace(preRE, (_, attributes) => `<pre ${vPre}${attributes}>`)
+        .replace(
+          preRE,
+          (_, attributes) =>
+            `<pre ${vPre}${attributes.replace(' tabindex="0"', '')}>`
+        )
         .replace(styleRE, (_, style) => _.replace(style, ''))
+    }
 
     const mustaches = new Map<string, string>()