Merge pull request #94 from gooddata/fix/tab-order

fix: add tabindex handling for sidebar mobile trigger accessibility

Author: ParzivalPavlis

layouts/partials/hooks/body-end.html

@@ -9,3 +9,4 @@
 <script src="/js/embedded-image.js"></script>
 <script src="/js/heading-anchor.js"></script>
 <script src="/js/prism-accessibility.js"></script>
+<script src="/js/tab-order.js"></script>

layouts/partials/sidebar.html

@@ -1,13 +1,13 @@
 {{/* (C) 2023 GoodData Corporation */}}
-<button tabindex="6" type="button" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-btn" aria-expanded="false" aria-controls="gd-docs-menu" aria-label="Toggle navigation menu">
+<button type="button" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-btn" aria-expanded="false" aria-controls="gd-docs-menu" aria-label="Toggle navigation menu">
   <span class="gd-docs-menu__mobile-icon" aria-hidden="true"></span>
 </button>
 <div class="gd-docs-menu__mobile-bg"></div>
 <nav id="gd-docs-menu" class="gd-docs-menu init" aria-label="Articles">
     <div class="sidebar-skip-links">
         <a href="#main-content" class="skip-link skip-link--sidebar">Skip to main content</a>
     </div>
-    
+
     {{ if .Site.Params.versions }}
         {{ partial "navbar-version-selector.html" . }}
     {{ end }}

static/js/tab-order.js

@@ -0,0 +1,59 @@
+$(document).ready(function () {
+    // mobile menu trigger
+    const mobileTrigger = $("#gd-header-mobile-menu-trigger-input");
+    // sidebar trigger
+    const sideTrigger = $("#gd-docs-menu__mobile-trigger");
+
+    // Initial check
+    if (mobileTrigger.attr('aria-expanded') === 'false') {
+        sideTrigger.attr('tabindex', 6)
+    }
+
+    // Function to handle aria-expanded changes
+    function handleAriaExpandedChange(element, isExpanded) {
+        const elementId = element.attr('id');
+
+        if (elementId === 'gd-header-mobile-menu-trigger-input') {
+            // Mobile menu trigger logic
+            if (isExpanded) {
+                sideTrigger.removeAttr('tabindex');
+            } else {
+                sideTrigger.attr('tabindex', 6);
+            }
+        } else if (elementId === 'gd-docs-menu__mobile-trigger') {
+            // Sidebar trigger logic
+            if (isExpanded) {
+                sideTrigger.removeAttr('tabindex');
+            } else {
+                sideTrigger.attr('tabindex', 6);
+            }
+        }
+    }
+
+    // Create observer for both elements
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.attributeName === 'aria-expanded') {
+                const $target = $(mutation.target);
+                const isExpanded = $target.attr('aria-expanded') === 'true';
+                handleAriaExpandedChange($target, isExpanded);
+            }
+        });
+    });
+
+    // Observe mobile trigger
+    if (mobileTrigger.length > 0) {
+        observer.observe(mobileTrigger[0], {
+            attributes: true,
+            attributeFilter: ['aria-expanded']
+        });
+    }
+
+    // Observe sidebar trigger
+    if (sideTrigger.length > 0) {
+        observer.observe(sideTrigger[0], {
+            attributes: true,
+            attributeFilter: ['aria-expanded']
+        });
+    }
+});