♿ [#5] Implement tabs on landing page in an accessible way

All the credit goes to the MDN docs:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role

The markup, JS and CSS are updated so that it's accessible and
understood by screenreaders. Following Chris' feedback, the JS is
updated to use accessible queries to select elements, which helps lock
in the a11y requirements.

The CSS is modified slightly to account for the (new) button element
which comes with some default background styling out of the box,
and the 'active' modifier is no longer required on the tab panels.

Note that each tab element is now a button because that handles the
Enter and spacebar keys properly to activate the associated tab panel.

Author: sergei-maertens

maykin_common/static/maykin_common/css/api.css

@@ -108,6 +108,7 @@
     padding-block: 0.5rem;
     padding-inline: 1rem;
     border: solid 1px transparent;
+    background-color: transparent;
     cursor: pointer;
     color: var(--tabs-item-color, var(--link-color));
 
@@ -133,9 +134,7 @@
   }
 
   .tabs__pane {
-    display: none;
-
-    &.tabs__pane--active {
+    &:not('[hidden]') {
       display: flex;
       flex-direction: column;
     }

maykin_common/static/maykin_common/js/nav-tabs.js

@@ -1,25 +1,70 @@
+// See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role
+// for the accessibility requirements.
+
 const initTabs = () => {
     const tabNodes = document.querySelectorAll('.tabs');
     for (const node of tabNodes) {
-        // bind events to toggle tabs for each component occurrence
-        for (const tabBtn of node.querySelectorAll('.tabs__item')) {
-            tabBtn.addEventListener('click', event => {
+        const tabList = node.querySelector('[role="tablist"]');
+        const tabs = tabList.querySelectorAll(':scope > [role="tab"]');
+
+        // Handle clicks on each tab to activate the associated panel
+        for (const tabBtn of tabs) {
+            tabBtn.addEventListener('click', () => {
                 // ignore if it's already active
-                if (tabBtn.classList.contains('.tabs__item--active')) {
+                if (tabBtn.getAttribute('aria-selected') === 'true') {
                     return;
                 }
 
-                // otherwise, remove the active class from the active button and pane
-                node.querySelector('.tabs__item--active').classList.remove('tabs__item--active');
-                node.querySelector('.tabs__pane--active').classList.remove('tabs__pane--active');
+                // Remove all current selected tabs
+                // and remove the active class from the active button and pane
+                tabList
+                    .querySelectorAll(':scope > [aria-selected="true"]')
+                    .forEach(tab => {
+                        tab.setAttribute("aria-selected", false);
+                        tab.classList.remove('tabs__item--active');
+                        const panelId = tab.getAttribute('aria-controls');
+                        const panel = node.querySelector(`#${panelId}`);
+                        panel.setAttribute('hidden', true)
+                    });
 
-                // and activate the target
+                // mark this tab as selected/active
+                tabBtn.setAttribute('aria-selected', true);
                 tabBtn.classList.add('tabs__item--active');
-                const id = tabBtn.dataset.id;
-                const tabPane = document.getElementById(id);
-                tabPane.classList.add("tabs__pane--active");
+
+                // lookup the panel to activate
+                const panelId = tabBtn.getAttribute('aria-controls');
+                const panel = node.querySelector(`#${panelId}`);
+                panel.removeAttribute('hidden');
             });
         }
+
+        let tabFocusIndex = 0;
+
+        // Handle keyboard navigation to focus other tabs
+        tabList.addEventListener('keydown', event => {
+            // move right or left -> remove tab focus from current tab
+            if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+              tabs[tabFocusIndex].setAttribute("tabindex", -1);
+
+              if (event.key === "ArrowRight") {
+                tabFocusIndex++;
+                // If we're at the end, go to the start
+                if (tabFocusIndex >= tabs.length) {
+                  tabFocusIndex = 0;
+                }
+                // Move left
+              } else if (event.key === "ArrowLeft") {
+                tabFocusIndex--;
+                // If we're at the start, move to the end
+                if (tabFocusIndex < 0) {
+                  tabFocusIndex = tabs.length - 1;
+                }
+              }
+
+              tabs[tabFocusIndex].setAttribute("tabindex", 0);
+              tabs[tabFocusIndex].focus();
+            }
+        });
     }
 };
 

maykin_common/templates/maykin_common/api/index_base.html

@@ -13,6 +13,9 @@
     {% block content_en %}
         <p>This API is awesome because ...</p>
     {% endblock %}
+
+See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role
+for the accessible markup.
 {% endcomment %}
 
 {% block view_class %}{{ block.super }} landing-page{% endblock %}
@@ -35,16 +38,49 @@ <h1 class="page-title__title">
 
     <article class="page-content page-content--centered">
         <nav class="tabs">
-            <ul class="tabs__list">
-                <li class="tabs__item tabs__item--active" data-id="nl" aria-role="tab">Nederlands</li>
-                <li class="tabs__item" data-id="en" aria-role="tab">English</li>
-            </ul>
+            <div role="tablist" class="tabs__list">
+                <button
+                    class="tabs__item tabs__item--active"
+                    id="tab-nl"
+                    role="tab"
+                    aria-controls="content-nl"
+                    aria-selected="true"
+                    tabindex="0"
+                >
+                    Nederlands
+                </button>
+                <button
+                    class="tabs__item"
+                    id="tab-en"
+                    role="tab"
+                    aria-controls="content-en"
+                    aria-selected="false"
+                    tabindex="-1"
+                >
+                    English
+                </button>
+            </div>
 
             <div class="tabs__content">
-                <div class="tabs__pane tabs__pane--active" id="nl" lang="nl">
+                <div
+                    class="tabs__pane"
+                    id="content-nl"
+                    lang="nl"
+                    role="tabpanel"
+                    tabindex="0"
+                    aria-labelledby="tab-nl"
+                >
                     {% block content_nl %}Override block content_nl{% endblock content_nl %}
                 </div>
-                <div class="tabs__pane" id="en" lang="en">
+                <div
+                    class="tabs__pane"
+                    id="content-en"
+                    lang="en"
+                    role="tabpanel"
+                    tabindex="0"
+                    aria-labelledby="tab-en"
+                    hidden
+                >
                     {% block content_en %}Override block content_en{% endblock content_en %}
                 </div>
             </div>