Merge pull request #696 from craftcms/feature/pt-1087-sidebar-nav-heading-text-is-not-marked-as-a-heading

Use headings and nav for sidebars

Author: AugustMiller

docs/.vuepress/theme/components/LeftBar.vue

@@ -1,5 +1,6 @@
 <template>
-  <aside class="left-bar">
+  <nav class="left-bar" aria-labelledby="main-nav-heading">
+    <h2 id="main-nav-heading" class="sr-only">Sidebar</h2>
     <div class="wrap">
       <div id="top" class="h-12 flex items-center">
         <RouterLink :to="`/`" ref="siteName" class="site-name font-bold px-4 mt-1">{{ $siteTitle }}</RouterLink>
@@ -63,7 +64,7 @@
         </div>
       </transition>
     </div>
-  </aside>
+  </nav>
 </template>
 
 <style lang="postcss">

docs/.vuepress/theme/components/RightBar.vue

@@ -3,12 +3,14 @@
     <div class="switch-wrapper hidden xl:block">
       <ColorModeSwitch v-on="$listeners" :on="isDark" />
     </div>
-    <nav class="sidebar-link-wrapper">
+    <nav class="sidebar-link-wrapper" aria-labelledby="right-bar-nav-heading">
       <SidebarLinks
         :depth="depth"
         :sidebar-depth="$page.frontmatter.sidebarDepth || sidebarDepth"
         :items="headingItems"
         fixed-heading="On this Page"
+        fixed-heading-id="right-bar-nav-heading"
+        heading-level="h2"
       />
     </nav>
   </div>

docs/.vuepress/theme/components/SidebarGroup.vue

@@ -9,37 +9,42 @@
       `depth-${depth}`,
     ]"
   >
-    <RouterLink
-      v-if="item.path"
-      class="sidebar-heading clickable"
-      :class="{
-        open,
-        active: isActive($route, item.path),
-      }"
-      :to="item.path"
-      @click.native="$emit('toggle')"
+    <component 
+      :id="fixedHeadingId" 
+      :is="headingLevel"
     >
-      <span>{{ item.title }}</span>
-      <span v-if="collapsible" class="arrow" :class="open ? 'down' : 'right'" />
-    </RouterLink>
-
-    <button
-      v-else-if="collapsible"
-      class="sidebar-heading"
-      :class="{ open }"
-      @click="$emit('toggle')"
-    >
-      <span>{{ fixedHeading || item.title }}</span>
-      <span class="arrow" :class="open ? 'down' : 'right'" />
-    </button>
-
-    <p
-      v-else
-      class="sidebar-heading"
-      :class="{ open }"
-    >
-      <span>{{ fixedHeading || item.title }}</span>
-    </p>
+      <RouterLink
+        v-if="item.path"
+        class="sidebar-heading clickable"
+        :class="{
+          open,
+          active: isActive($route, item.path),
+        }"
+        :to="item.path"
+        @click.native="$emit('toggle')"
+      >
+        <span>{{ item.title }}</span>
+        <span v-if="collapsible" class="arrow" :class="open ? 'down' : 'right'" />
+      </RouterLink>
+
+      <button
+        v-else-if="collapsible"
+        class="sidebar-heading"
+        :class="{ open }"
+        @click="$emit('toggle')"
+      >
+        <span>{{ fixedHeading || item.title }}</span>
+        <span class="arrow" :class="open ? 'down' : 'right'" />
+      </button>
+
+      <p
+        v-else
+        class="sidebar-heading"
+        :class="{ open }"
+      >
+        <span>{{ fixedHeading || item.title }}</span>
+      </p>
+    </component>
 
     <DropdownTransition>
       <SidebarLinks
@@ -64,14 +69,33 @@ export default {
     DropdownTransition,
   },
 
-  props: [
-    "item",
-    "open",
-    "collapsible",
-    "depth",
-    "sidebarDepth",
-    "fixedHeading",
-  ],
+  props: {
+    item: {
+      type: Object
+    },
+    open: {
+      type: Boolean
+    },
+    collapsible: {
+      type: Boolean
+    },
+    depth: {
+      type: Number
+    },
+    sidebarDepth: {
+      type: Number
+    },
+    fixedHeading: {
+      type: String
+    },
+    fixedHeadingId: {
+      type: String
+    },
+    headingLevel: {
+      type: String,
+      default: 'h3'
+    }
+  },
 
   // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
   beforeCreate() {

docs/.vuepress/theme/components/SidebarLinks.vue

@@ -10,6 +10,8 @@
         :sidebar-depth="sidebarDepth"
         :depth="depth"
         :fixed-heading="fixedHeading"
+        :fixed-heading-id="fixedHeadingId"
+        :heading-level="headingLevel"
         @toggle="toggleGroup(i)"
       />
       <ToggleSidebarGroup
@@ -69,6 +71,12 @@ export default {
     fixedHeading: {
       type: String
     },
+    fixedHeadingId: {
+      type: String
+    },
+    headingLevel: {
+      type: String
+    }
   },
 
   data() {