Merge pull request #93 from gooddata/fix/mobile-side-menu

fix: enhance accessibility by adding tabindex attributes to navigatio…

Author: ParzivalPavlis

assets/scss/skip-links.scss

@@ -1,9 +1,15 @@
 // Skip links for accessibility
 .skip-links {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
-  z-index: 1050; // Higher than other elements
+  width: 100%;
+  z-index: 9999;
+  pointer-events: none;
+
+  a {
+    pointer-events: auto;
+  }
 }
 
 .sidebar-skip-links {
@@ -14,8 +20,7 @@
 
 .skip-link {
   position: absolute;
-  left: -10000px;
-  top: auto;
+  left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
@@ -26,22 +31,26 @@
   text-decoration: none;
   border: 2px solid #000;
   border-radius: 4px;
-  z-index: 1050;
-  
-  &:focus {
-    position: static;
+  white-space: nowrap;
+
+  &:focus,
+  &:active {
+    position: fixed;
+    top: 10px;
+    left: 10px;
     width: auto;
     height: auto;
     overflow: visible;
-    margin: 10px;
-    outline: 3px solid #2563eb; // Focus indicator
+    clip: auto;
+    outline: 3px solid #2563eb;
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
+    z-index: 9999;
   }
-  
+
   // Variants
   &--sidebar {
     margin-bottom: 5px;
-    
+
     &:focus {
       position: static;
       width: 100%;
@@ -51,7 +60,7 @@
       text-align: center;
     }
   }
-  
+
   &--footer {
     &:focus {
       position: static;
@@ -63,4 +72,4 @@
       text-align: center;
     }
   }
-} 
+}

layouts/partials/header-menu.html

@@ -11,7 +11,7 @@
 <nav class="gd-docs-header-nav__center gd-header" aria-label="Main">
     {{ if $mainMenu }}
         <input type="checkbox" hidden tabindex="-1" id="gd-header-mobile-menu-trigger-input" name="gd-header-mobile-menu-trigger-input" class="gd-header-mobile gd-header-mobile-menu-trigger-input" aria-label="Open navigation menu" aria-controls="gd-header-mobile-menu" aria-expanded="false">
-        <button id="gd-header-mobile-menu-button" type="button" class="gd-header-mobile gd-header-mobile-menu-trigger" aria-controls="gd-header-mobile-menu" aria-expanded="false" aria-label="Open navigation menu">
+        <button id="gd-header-mobile-menu-button" tabindex="5" type="button" class="gd-header-mobile gd-header-mobile-menu-trigger" aria-controls="gd-header-mobile-menu" aria-expanded="false" aria-label="Open navigation menu">
             <span aria-hidden="true"></span>
         </button>
         <ul id="gd-header-mobile-menu" class="gd-docs-header-nav__menu gd-header-links">

layouts/partials/navbar.html

@@ -7,7 +7,7 @@
 {{ if not $whitelabeled }}
 <div class="gd-docs-header-nav gd-docs-header-nav__first">
   <nav class="gd-docs-header-nav__left" aria-label="Homepage">
-    <a class="gd-docs-header-nav__logo gd-header-nav__logo" href="{{ .Site.Home.RelPermalink }}" aria-label="Go to documentation homepage">
+    <a tabindex="1" class="gd-docs-header-nav__logo gd-header-nav__logo" href="{{ .Site.Home.RelPermalink }}" aria-label="Go to documentation homepage">
       {{ with resources.Get "icons/GoodDataLearn.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
     </a>
     <span class="gd-header-nav__logo-text">Learn</span>
@@ -21,9 +21,7 @@
   </div>
   {{ if not .Params.no_search }}
   <div class="gd-docs-header-nav__center">
-    {{ if eq .Page.Type "docs" }}
-      <div id="adds-container" class="gd-docs-header-nav__search"></div>
-    {{ end }}
+    <div id="adds-container" class="gd-docs-header-nav__search"></div>
   </div>
   {{ end }}
   {{ if .Site.Params.versions }}

layouts/partials/sidebar.html

@@ -1,5 +1,5 @@
 {{/* (C) 2023 GoodData Corporation */}}
-<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">
+<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">
   <span class="gd-docs-menu__mobile-icon" aria-hidden="true"></span>
 </button>
 <div class="gd-docs-menu__mobile-bg"></div>

layouts/partials/skip-links.html

@@ -1,8 +1,8 @@
 {{/* (C) 2023 GoodData Corporation */}}
 <div class="skip-links">
-  <a href="#main-content" class="skip-link">Skip to main content</a>
-  <a href="#gd-docs-menu" class="skip-link">Skip to sidebar</a>
+  <a href="#main-content" tabindex="2" class="skip-link">Skip to main content</a>
+  <a href="#gd-docs-menu" tabindex="3" class="skip-link">Skip to sidebar</a>
   {{ if not .Params.no_search }}
-  <a href="#adds-container" class="skip-link">Skip to search</a>
+  <a href="#adds-container" tabindex="4" class="skip-link">Skip to search</a>
   {{ end }}
-</div> 
+</div>