From e7983889a67b7970d741522b9d85afcbc1fa96b6 Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Wed, 19 Nov 2025 08:55:07 -0800
Subject: [PATCH 1/3] Refactor code toggle markup

---
 .../.vuepress/theme/components/CodeToggle.vue | 45 +++++++++----------
 docs/.vuepress/theme/styles/color-mode.pcss   |  2 +-
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/docs/.vuepress/theme/components/CodeToggle.vue b/docs/.vuepress/theme/components/CodeToggle.vue
index b074341f6..cf89a8c81 100644
--- a/docs/.vuepress/theme/components/CodeToggle.vue
+++ b/docs/.vuepress/theme/components/CodeToggle.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="code-toggle">
-    <ul class="code-language-switcher theme-default-content-override" v-if="!usePageToggle">
-      <li v-for="(language, index) in languages" :key="index">
-        <button
-          :class="{ active: isSelectedLanguage(language) }"
-          :aria-selected="isSelectedLanguage(language)"
-          role="tab"
-          :aria-controls="'#' + getLanguageTabId(language)"
-          @click="setLanguage(language)"
-        >{{ getLanguageLabel(language) }}</button>
-      </li>
-    </ul>
+    <div class="code-lang-switcher theme-default-content-override" role="tablist" v-if="!usePageToggle">
+      <button
+        v-for="(language, index) in languages" :key="index"
+        :class="{ active: isSelectedLanguage(language) }"
+        :aria-selected="isSelectedLanguage(language)"
+        role="tab"
+        :aria-controls="getLanguageTabId(language)"
+        @click="setLanguage(language)"
+      >{{ getLanguageLabel(language) }}</button>
+    </div>
     <div
       v-for="(language, index) in languages"
       :key="index"
@@ -42,31 +41,27 @@
   }
 }
 
-ul.code-language-switcher {
+.code-lang-switcher {
   @apply flex flex-row rounded-t box-border m-0 p-2;
   background: var(--border-color);
   z-index: 2;
 
-  li {
-    @apply p-0 mr-1 list-none;
-
-    button {
-      @apply block py-3 px-4 font-medium text-xs tracking-wider uppercase leading-none cursor-pointer rounded;
+  button {
+    @apply block py-3 px-4 font-medium text-xs tracking-wider uppercase leading-none cursor-pointer rounded;
 
-      &:hover {
-        background-color: var(--sidebar-bg-color);
-      }
+    &:hover {
+      background-color: var(--sidebar-bg-color);
+    }
 
-      &.active {
-        color: var(--text-color);
-        background-color: var(--bg-color);
-      }
+    &.active {
+      color: var(--text-color);
+      background-color: var(--bg-color);
     }
   }
 }
 
 .theme-default-content {
-  ul.code-language-switcher {
+  .code-lang-switcher {
     @apply mb-0;
   }
 }
diff --git a/docs/.vuepress/theme/styles/color-mode.pcss b/docs/.vuepress/theme/styles/color-mode.pcss
index ba34d37d5..da5f941d3 100644
--- a/docs/.vuepress/theme/styles/color-mode.pcss
+++ b/docs/.vuepress/theme/styles/color-mode.pcss
@@ -219,7 +219,7 @@
     border-bottom: 1px solid var(--border-color);
   }
 
-  ul.code-language-switcher {
+  div.code-language-switcher {
     background: var(--border-color);
 
     li a.active {

From 8185fe4bcf45b227595ca25c2d655cc42ab4d44d Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Wed, 19 Nov 2025 09:27:46 -0800
Subject: [PATCH 2/3] Add aria-labelledby reference to tabpanels

---
 .../.vuepress/theme/components/CodeToggle.vue | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/docs/.vuepress/theme/components/CodeToggle.vue b/docs/.vuepress/theme/components/CodeToggle.vue
index cf89a8c81..fe5baa91c 100644
--- a/docs/.vuepress/theme/components/CodeToggle.vue
+++ b/docs/.vuepress/theme/components/CodeToggle.vue
@@ -5,16 +5,19 @@
         v-for="(language, index) in languages" :key="index"
         :class="{ active: isSelectedLanguage(language) }"
         :aria-selected="isSelectedLanguage(language)"
+        :id="getTabId(language)"
         role="tab"
-        :aria-controls="getLanguageTabId(language)"
+        :aria-controls="getTabPanelId(language)"
         @click="setLanguage(language)"
+        :tabindex="isSelectedLanguage(language) ? null : '-1'"
       >{{ getLanguageLabel(language) }}</button>
     </div>
     <div
       v-for="(language, index) in languages"
       :key="index"
-      :id="getLanguageTabId(language)"
+      :id="getTabPanelId(language)"
       :hidden="!isSelectedLanguage(language)"
+      :aria-labelledby="getTabId(language)"
       role="tabpanel">
       <slot :name="language" />
     </div>
@@ -68,7 +71,7 @@
 </style>
 
 <script>
-import { isStarted } from 'nprogress';
+import { v4 as uuidv4 } from 'uuid';
 
 export default {
   props: ["languages", "labels"],
@@ -76,9 +79,14 @@ export default {
   data() {
     return {
       selectedLanguage: this.languages[0],
+      uniqueId: null,
     };
   },
 
+  mounted() {
+    this.uniqueId = uuidv4();
+  },
+
   computed: {
     usePageToggle() {
       if (this.$page === undefined) {
@@ -117,9 +125,12 @@ export default {
           : this.selectedLanguage)
       );
     },
-    getLanguageTabId(language) {
-      return `tab-${this._uid}-${language}`;
-    }
+    getTabId(language) {
+      return `tab-${this.uniqueId}-${language}`;
+    },
+    getTabPanelId(language) {
+      return `tabpanel-${this.uniqueId}-${language}`;
+    },
   }
 };
 </script>

From 4bbe5900b870dee68f78075ab494c44a18e2540d Mon Sep 17 00:00:00 2001
From: Guadalupe Camacho <lupe@pixelandtonic.com>
Date: Thu, 20 Nov 2025 10:34:10 -0800
Subject: [PATCH 3/3] Finalize tabs with automatic activation

---
 .../.vuepress/theme/components/CodeToggle.vue | 72 ++++++++++++++++---
 docs/.vuepress/theme/styles/base.pcss         |  1 +
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/docs/.vuepress/theme/components/CodeToggle.vue b/docs/.vuepress/theme/components/CodeToggle.vue
index fe5baa91c..896e53c71 100644
--- a/docs/.vuepress/theme/components/CodeToggle.vue
+++ b/docs/.vuepress/theme/components/CodeToggle.vue
@@ -2,21 +2,25 @@
   <div class="code-toggle">
     <div class="code-lang-switcher theme-default-content-override" role="tablist" v-if="!usePageToggle">
       <button
-        v-for="(language, index) in languages" :key="index"
-        :class="{ active: isSelectedLanguage(language) }"
-        :aria-selected="isSelectedLanguage(language)"
+        v-for="(language, index) in languages"
+        :key="language"
+        :class="{ active: isSelectedTab(language) }"
+        :aria-selected="isSelectedTab(language)"
         :id="getTabId(language)"
+        :data-language="language"
         role="tab"
         :aria-controls="getTabPanelId(language)"
         @click="setLanguage(language)"
-        :tabindex="isSelectedLanguage(language) ? null : '-1'"
+        :tabindex="isSelectedTab(language) ? null : '-1'"
+        v-on:keyup="handleKeyup"
       >{{ getLanguageLabel(language) }}</button>
     </div>
     <div
       v-for="(language, index) in languages"
+      tabindex="0"
       :key="index"
       :id="getTabPanelId(language)"
-      :hidden="!isSelectedLanguage(language)"
+      :hidden="!isSelectedTab(language)"
       :aria-labelledby="getTabId(language)"
       role="tabpanel">
       <slot :name="language" />
@@ -48,15 +52,22 @@
   @apply flex flex-row rounded-t box-border m-0 p-2;
   background: var(--border-color);
   z-index: 2;
+  gap: .3rem;
 
   button {
     @apply block py-3 px-4 font-medium text-xs tracking-wider uppercase leading-none cursor-pointer rounded;
-
+    border: 1px solid transparent;
     &:hover {
       background-color: var(--sidebar-bg-color);
     }
 
+    &:focus-visible {
+      outline: var(--custom-focus-outline);
+      outline-offset: 2px;
+    }
+
     &.active {
+      border-color: var(--active-tab-border-color);
       color: var(--text-color);
       background-color: var(--bg-color);
     }
@@ -80,6 +91,7 @@ export default {
     return {
       selectedLanguage: this.languages[0],
       uniqueId: null,
+      focusedTabIndex: null,
     };
   },
 
@@ -87,6 +99,12 @@ export default {
     this.uniqueId = uuidv4();
   },
 
+  watch: {
+    selectedLanguage(newLanguage) {
+      this.$el.querySelector(`button[data-language="${newLanguage}"]`).focus();
+    },
+  },
+
   computed: {
     usePageToggle() {
       if (this.$page === undefined) {
@@ -101,6 +119,12 @@ export default {
     setLanguage(language) {
       this.selectedLanguage = language;
     },
+    getLanguageFromIndex(index) {
+      return this.languages[index];
+    },
+    getIndexFromLanguage(language) {
+      return this.languages.indexOf(language);
+    },
     getLanguageLabel(language) {
       if (this.labels && this.labels[language]) {
         return this.labels[language];
@@ -114,10 +138,8 @@ export default {
         (themeLanguages && themeLanguages[language]) ||
         language
       );
-
-      return language;
     },
-    isSelectedLanguage(language) {
+    isSelectedTab(language) {
       return (
         language ==
         (this.usePageToggle
@@ -131,6 +153,38 @@ export default {
     getTabPanelId(language) {
       return `tabpanel-${this.uniqueId}-${language}`;
     },
+    getNextIndex(index) {
+      return index + 1 <= this.languages.length - 1 ? index + 1 : 0;
+    },
+    getPrevIndex(index) {
+      return index - 1 >= 0 ? index - 1 : this.languages.length - 1;
+    },
+    handleKeyup(event) {
+      const {keyCode, target} = event;
+      let indexToFocus;
+      const currentIndex = this.getIndexFromLanguage(target.getAttribute('data-language'));
+
+      switch (keyCode) {
+        case 37:
+          indexToFocus = this.getPrevIndex(currentIndex);
+          break;
+        case 39:
+          indexToFocus = this.getNextIndex(currentIndex);
+          break;
+        case 36:
+          indexToFocus = 0;
+          break;
+        case 35:
+          indexToFocus = this.languages.length - 1;
+          break;
+        default:
+          return;
+      }
+
+      if (indexToFocus !== undefined) {
+        this.setLanguage(this.getLanguageFromIndex(indexToFocus));
+      }
+    },
   }
 };
 </script>
diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss
index 502e85b04..4ee58a3c2 100644
--- a/docs/.vuepress/theme/styles/base.pcss
+++ b/docs/.vuepress/theme/styles/base.pcss
@@ -27,6 +27,7 @@
   --white: theme("colors.white");
   --black: theme("colors.black");
   --custom-focus-outline: 2px solid var(--link-color-default);
+  --active-tab-border-color: (theme("colors.slate"));
 
   /* Custom button */
   --button-background-color: theme("colors.blue.default");