Merge pull request #742 from craftcms/a11y/tab-aria

Updates tabs/tabpanel to match markup/ARIA for tabs with automated activation

Author: gcamacho079

docs/.vuepress/theme/components/CodeToggle.vue

@@ -1,21 +1,27 @@
 <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="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="isSelectedTab(language) ? null : '-1'"
+        v-on:keyup="handleKeyup"
+      >{{ getLanguageLabel(language) }}</button>
+    </div>
     <div
       v-for="(language, index) in languages"
+      tabindex="0"
       :key="index"
-      :id="getLanguageTabId(language)"
-      :hidden="!isSelectedLanguage(language)"
+      :id="getTabPanelId(language)"
+      :hidden="!isSelectedTab(language)"
+      :aria-labelledby="getTabId(language)"
       role="tabpanel">
       <slot :name="language" />
     </div>
@@ -42,48 +48,63 @@
   }
 }
 
-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;
+  gap: .3rem;
 
-  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;
+    border: 1px solid transparent;
+    &:hover {
+      background-color: var(--sidebar-bg-color);
+    }
 
-      &:hover {
-        background-color: var(--sidebar-bg-color);
-      }
+    &:focus-visible {
+      outline: var(--custom-focus-outline);
+      outline-offset: 2px;
+    }
 
-      &.active {
-        color: var(--text-color);
-        background-color: var(--bg-color);
-      }
+    &.active {
+      border-color: var(--active-tab-border-color);
+      color: var(--text-color);
+      background-color: var(--bg-color);
     }
   }
 }
 
 .theme-default-content {
-  ul.code-language-switcher {
+  .code-lang-switcher {
     @apply mb-0;
   }
 }
 </style>
 
 <script>
-import { isStarted } from 'nprogress';
+import { v4 as uuidv4 } from 'uuid';
 
 export default {
   props: ["languages", "labels"],
 
   data() {
     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) {
@@ -98,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];
@@ -111,20 +138,53 @@ export default {
         (themeLanguages && themeLanguages[language]) ||
         language
       );
-
-      return language;
     },
-    isSelectedLanguage(language) {
+    isSelectedTab(language) {
       return (
         language ==
         (this.usePageToggle
           ? this.$store.state.codeLanguage
           : this.selectedLanguage)
       );
     },
-    getLanguageTabId(language) {
-      return `tab-${this._uid}-${language}`;
-    }
+    getTabId(language) {
+      return `tab-${this.uniqueId}-${language}`;
+    },
+    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");

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 {