From 085dce121be7f3eb45fd3cfac90d09ca0a3d2dff Mon Sep 17 00:00:00 2001
From: Lupe Camacho <lupe@pixelandtonic.com>
Date: Thu, 20 Mar 2025 11:57:20 -0700
Subject: [PATCH] Use headings and nav for sidebars

---
 docs/.vuepress/theme/components/LeftBar.vue   |   5 +-
 docs/.vuepress/theme/components/RightBar.vue  |   4 +-
 .../theme/components/SidebarGroup.vue         | 100 +++++++++++-------
 .../theme/components/SidebarLinks.vue         |   8 ++
 4 files changed, 76 insertions(+), 41 deletions(-)

diff --git a/docs/.vuepress/theme/components/LeftBar.vue b/docs/.vuepress/theme/components/LeftBar.vue
index 9e334fe64..dbd29972e 100644
--- a/docs/.vuepress/theme/components/LeftBar.vue
+++ b/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">
diff --git a/docs/.vuepress/theme/components/RightBar.vue b/docs/.vuepress/theme/components/RightBar.vue
index f2b07a01b..a9ca5ad8a 100644
--- a/docs/.vuepress/theme/components/RightBar.vue
+++ b/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>
diff --git a/docs/.vuepress/theme/components/SidebarGroup.vue b/docs/.vuepress/theme/components/SidebarGroup.vue
index dfc516e9e..37ba4f186 100644
--- a/docs/.vuepress/theme/components/SidebarGroup.vue
+++ b/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() {
diff --git a/docs/.vuepress/theme/components/SidebarLinks.vue b/docs/.vuepress/theme/components/SidebarLinks.vue
index 94f2417cf..070e9f655 100644
--- a/docs/.vuepress/theme/components/SidebarLinks.vue
+++ b/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() {