[n/a] add more a11y handling to tabs controller/demos

vigetlabs · Feb 4, 2022 · aa38986 · aa38986
1 parent 89e3bce
commit aa38986
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 13 deletions.
diff --git a/src/components/code-demo.astro b/src/components/code-demo.astro
@@ -20,12 +20,13 @@ const headingSlug = heading.replace(/\s+/g, '-').toLowerCase()
     <div class="flex absolute top-1 right-2 p-3 backdrop-blur-sm">
       <ul
         class="flex space-x-1 pr-1 mr-[6px] relative after:absolute after:inset-y-0 after:left-full after:w-[2px] after:bg-black after:bg-opacity-20 after:scale-y-75"
-        data-action="keyup->tabs#cycleTabs"
+        data-action="keyup->tabs#handleKeydown"
         role="tablist"
       >
         {['Preview', 'Code'].map((text, i) => (
           <li>
             <button
+              role="tab"
               data-tabs-target="tab"
               data-action="tabs#selectTab"
               class={cx(
@@ -59,6 +60,7 @@ const headingSlug = heading.replace(/\s+/g, '-').toLowerCase()
       class="rounded-lg p-8 pt-20 bg-gradient-to-r from-indigo-500 to-violet-500 text-slate-300 h-full overflow-auto"
       data-tabs-target="panel"
       role="tabpanel"
+      tabindex="0"
     >
       <slot name="preview" />
     </div>

diff --git a/src/js/controllers/tabs_controller.js b/src/js/controllers/tabs_controller.js
@@ -84,6 +84,7 @@ export default class extends Controller {
     prevTab.removeAttribute('aria-selected')
     prevTab.setAttribute('tabindex', -1)
     prevPanel.setAttribute('hidden', true)
+    prevPanel.removeAttribute('tabindex')
 
     const tab = this.tabTargets[this.indexValue]
     const panel = this.panelTargets[this.indexValue]
@@ -93,6 +94,7 @@ export default class extends Controller {
     tab.setAttribute('aria-selected', 'true')
     tab.removeAttribute('tabindex')
     panel.removeAttribute('hidden')
+    panel.setAttribute('tabindex', 0)
 
     this.currentTab = {
       tab,
@@ -108,11 +110,26 @@ export default class extends Controller {
     this.indexValue = this.tabTargets.indexOf(e.currentTarget)
   }
 
-  cycleTabs = (e) => {
+  handleKeydown = (e) => {
     const key = normalizeKeyCode(e)
+    console.log(key)
+    if (['ArrowRight', 'ArrowLeft'].includes(key)) {
+      this.cycleTabs(key)
+      return
+    }
+
+    if (key === 'Home') {
+      this.indexValue = 0
+      return
+    }
 
-    if (!['ArrowRight', 'ArrowLeft'].includes(key)) return
+    if (key === 'End') {
+      this.indexValue = this.panelTargets.length - 1
+      return
+    }
+  }
 
+  cycleTabs = (key) => {
     this.indexValue = wrap(
       key === 'ArrowRight' ? this.indexValue + 1 : this.indexValue - 1,
       this.panelTargets.length

diff --git a/src/js/util/key-codes.js b/src/js/util/key-codes.js
@@ -1,19 +1,21 @@
 const keyCodes = {
-  13: 'Enter',
-  32: 'Space',
   9: 'Tab',
+  13: 'Enter',
   27: 'Escape',
-  40: 'ArrowDown',
+  32: 'Space',
+  35: 'End',
+  36: 'Home',
   37: 'ArrowLeft',
-  39: 'ArrowRight',
   38: 'ArrowUp',
+  39: 'ArrowRight',
+  40: 'ArrowDown',
 }
 
 /**
-* Noramlize code & keyCode for keyboard events
-* @param {object} event
-* @return {?string}
-*/
+ * Noramlize code & keyCode for keyboard events
+ * @param {object} event
+ * @return {?string}
+ */
 export const normalizeKeyCode = ({ code, keyCode }) => {
   if (code !== undefined) return code
 

diff --git a/src/pages/tabs.astro b/src/pages/tabs.astro
@@ -74,12 +74,14 @@ import CodeDemo from '../components/code-demo.astro'
         >
           <ul
             class="flex justify-center mb-4"
-            data-action="keyup->tabs#cycleTabs"
+            data-action="keyup->tabs#handleKeydown"
             role="tablist"
+            aria-label="Example 2 Tabs"
           >
             {['Tab 1', 'Tab 2', 'Tab 3'].map((text, i) => (
               <li>
                 <button
+                  role="tab"
                   data-tabs-target="tab"
                   data-action="tabs#selectTab"
                   class={cx(
@@ -89,6 +91,7 @@ import CodeDemo from '../components/code-demo.astro'
                   )}
                   aria-selected={i === 0 ? 'true' : null}
                   tabindex={i !== 0 ? '-1' : null}
+                  id={`example-1-tab-${i + 1}`}
                 >
                   {text}
                 </button>
@@ -100,13 +103,16 @@ import CodeDemo from '../components/code-demo.astro'
             class="p-12 border-2 border-white border-opacity-20 rounded-md shadow-lg text-6xl text-center font-extrabold"
             data-tabs-target="panel"
             role="tabpanel"
+            tabindex="0"
+            aria-labelledby="example-1-tab-1"
           >
             Panel 1
           </div>
           <div
             class="p-12 border-2 border-white border-opacity-20 rounded-md shadow-lg text-6xl text-center font-extrabold"
             data-tabs-target="panel"
             role="tabpanel"
+            aria-labelledby="example-1-tab-2"
             hidden
           >
             Panel 2
@@ -115,6 +121,7 @@ import CodeDemo from '../components/code-demo.astro'
             class="p-12 border-2 border-white border-opacity-20 rounded-md shadow-lg text-6xl text-center font-extrabold"
             data-tabs-target="panel"
             role="tabpanel"
+            aria-labelledby="example-1-tab-3"
             hidden
           >
             Panel 3
@@ -184,12 +191,14 @@ import CodeDemo from '../components/code-demo.astro'
         >
           <ul
             class="flex justify-center md:hidden"
-            data-action="keyup->tabs#cycleTabs"
+            data-action="keyup->tabs#handleKeydown"
             role="tablist"
+            aria-label="Example 2 Tabs"
           >
             {['Tab 1', 'Tab 2', 'Tab 3'].map((text, i) => (
               <li>
                 <button
+                  role="tab"
                   data-tabs-target="tab"
                   data-action="tabs#selectTab"
                   class={cx(
@@ -199,6 +208,7 @@ import CodeDemo from '../components/code-demo.astro'
                   )}
                   aria-selected={i === 0 ? 'true' : null}
                   tabindex={i !== 0 ? '-1' : null}
+                  id={`example-2-tab-${i + 1}`}
                 >
                   {text}
                 </button>
@@ -211,13 +221,16 @@ import CodeDemo from '../components/code-demo.astro'
               class="p-12 border-2 border-white border-opacity-20 rounded-md shadow-lg text-3xl font-extrabold"
               data-tabs-target="panel"
               role="tabpanel"
+              tabindex="0"
+              aria-labelledby="example-2-tab-1"
             >
               Panel 1
             </div>
             <div
               class="p-12 border-2 border-white border-opacity-20 rounded-md shadow-lg text-3xl font-extrabold"
               data-tabs-target="panel"
               role="tabpanel"
+              aria-labelledby="example-2-tab-2"
               hidden
             >
               Panel 2
@@ -226,6 +239,7 @@ import CodeDemo from '../components/code-demo.astro'
               class="p-12 border-2 border-white border-opacity-20 rounded-md shadow-lg text-3xl font-extrabold"
               data-tabs-target="panel"
               role="tabpanel"
+              aria-labelledby="example-2-tab-3"
               hidden
             >
               Panel 3