Finalize tabs with automatic activation

Author: gcamacho079

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,13 +91,20 @@ export default {
     return {
       selectedLanguage: this.languages[0],
       uniqueId: null,
+      focusedTabIndex: null,
     };
   },
 
   mounted() {
     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>

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");