From 35d53d2231bb45ca29edfb87e6d28b3f551144ce Mon Sep 17 00:00:00 2001
From: quanb-duy <quanbuid@gmail.com>
Date: Fri, 21 Mar 2025 16:56:27 +0100
Subject: [PATCH 1/2] Collapse/expand buttons in left navigation improvement
 for  navigating using keyboard

---
 assets/scss/menu.scss         | 118 +++++++++++++++++++++-------------
 layouts/partials/sidebar.html |  33 ++++++----
 static/js/menu.js             |  20 ++++++
 3 files changed, 114 insertions(+), 57 deletions(-)

diff --git a/assets/scss/menu.scss b/assets/scss/menu.scss
index 57c4318..a7756fc 100644
--- a/assets/scss/menu.scss
+++ b/assets/scss/menu.scss
@@ -47,43 +47,64 @@
         opacity: 0;
     }
 
-    &__mobile-trigger {
-        display: none;
-    }
-
-    &__mobile-icon {
+    &__mobile-btn {
         position: fixed;
         top: $header-first-nav-height-desktop;
+        left: 10px;
+        z-index: 34;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 55px;
         height: $header-second-nav-height;
-        left: 10px;
-        z-index: 34;
+        padding: 0;
+        background: transparent;
+        border: none;
         transition: $transition;
         cursor: pointer;
 
+        &:focus {
+            outline: 2px solid $color-shocking-pink;
+            outline-offset: 2px;
+        }
+
+        @include mq(large) {
+            display: none;
+        }
+    }
+
+    &__mobile-icon {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 26px;
+        height: 22px;
+
         &::before {
             content: url("../img/burger.svg");
             display: block;
             width: 26px;
             height: 22px;
         }
+    }
 
-        &::after {
-            content: "";
+    &__mobile-btn[aria-expanded="true"] {
+        left: calc(100% - 55px);
+
+        .gd-docs-menu__mobile-icon::before {
             display: none;
+        }
+
+        .gd-docs-menu__mobile-icon::after {
+            content: "";
+            display: block;
             width: 31px;
             height: 31px;
             background-image: url("../img/close.svg");
             background-repeat: no-repeat;
             background-size: contain;
         }
-
-        @include mq(large) {
-            display: none;
-        }
     }
 
     &__mobile-bg {
@@ -101,23 +122,11 @@
         }
     }
 
-    &__mobile-trigger:checked ~ &,
-    &__mobile-trigger:checked ~ &__mobile-bg {
+    &__mobile-btn[aria-expanded="true"] ~ &,
+    &__mobile-btn[aria-expanded="true"] ~ &__mobile-bg {
         left: 0;
     }
 
-    &__mobile-trigger:checked ~ &__mobile-icon {
-        left: calc(100% - 55px);
-
-        &::before {
-            display: none;
-        }
-
-        &::after {
-            display: block;
-        }
-    }
-
     & > &-section {
         padding-left: 0;
     }
@@ -141,6 +150,14 @@
         }
     }
 
+    &-section-wrapper {
+        display: none;
+        
+        &.expanded {
+            display: block;
+        }
+    }
+
     &-page__label ~ &-section {
         padding-left: 0;
     }
@@ -193,25 +210,42 @@
             }
         }
 
-        &__toggle {
-            display: none;
-        }
-
-        &__chevron {
+        &__toggle-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             margin: 4px 0 0;
+            padding: 4px;
+            background: transparent;
+            border: none;
             cursor: pointer;
-
-            svg {
+            
+            // Add focus styles for keyboard navigation
+            &:focus {
+                outline: 2px solid $color-shocking-pink;
+                outline-offset: 2px;
+                border-radius: 3px;
+            }
+            
+            // SVG rotation based on expanded state
+            &[aria-expanded="false"] .gd-docs-menu-page__chevron svg {
                 transform: rotate(180deg);
             }
-        }
-
-        &__toggle:checked ~ &__title &__chevron {
-            svg {
+            
+            &[aria-expanded="true"] .gd-docs-menu-page__chevron svg {
                 transform: rotate(0deg);
             }
         }
 
+        &__chevron {
+            display: flex;
+            margin: 0;
+        }
+
+        &__toggle {
+            display: none;
+        }
+
         &__label {
             display: block;
             flex: 0 0 auto;
@@ -223,14 +257,6 @@
         }
     }
 
-    &-page__toggle ~ &-section {
-        display: none;
-    }
-
-    &-page__toggle:checked ~ &-section {
-        display: block;
-    }
-
     .dropdown-toggle {
         display: flex;
         justify-content: space-between;
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 34c4827..94686ee 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,8 +1,9 @@
 {{/* (C) 2023 GoodData Corporation */}}
-<input type="checkbox" id="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-trigger" />
-<label for="gd-docs-menu__mobile-trigger" class="gd-docs-menu__mobile-icon"></label>
+<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 class="gd-docs-menu init">
+<nav id="gd-docs-menu" class="gd-docs-menu init">
     {{ if .Site.Params.versions }}
         {{ partial "navbar-version-selector.html" . }}
     {{ end }}
@@ -47,10 +48,6 @@
             {{ if $page.Params.navigationLabel }}
                 <span class="gd-docs-menu-page__label">{{ $page.LinkTitle }}</span>
             {{ else }}
-                {{ if $page.Pages }}
-                <input type="checkbox" id="gd-docs-menu-page__{{ $pageId }}" class="gd-docs-menu-page__toggle"{{ if $activeSection }} checked{{ end }} />
-                {{ end }}
-
                 <div class="gd-docs-menu-page__title">
                 {{ if $page.Params.externalLink }}
                     <a href="{{ $page.Params.externalLink }}" class="gd-docs-menu-page__link" target="_blank">{{ $page.LinkTitle }}</a>
@@ -59,15 +56,29 @@
                 {{ end }}
 
                 {{ if $page.Pages }}
-                    <label for="gd-docs-menu-page__{{ $pageId }}" class="gd-docs-menu-page__chevron">
-                    {{ with resources.Get "icons/chevron-menu.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}
-                    </label>
+                    <button 
+                      type="button"
+                      id="btn-{{ $pageId }}"
+                      class="gd-docs-menu-page__toggle-btn"
+                      aria-expanded="{{ if $activeSection }}true{{ else }}false{{ end }}"
+                      aria-controls="section-{{ $pageId }}"
+                      aria-label="{{ if $activeSection }}Collapse{{ else }}Expand{{ end }} {{ $page.LinkTitle }} section">
+                      <span class="gd-docs-menu-page__chevron">
+                        {{ with resources.Get "icons/chevron-menu.svg" }}
+                          {{ $svg := . | minify }}
+                          {{ $svg := replace $svg.Content "<svg " "<svg aria-hidden=\"true\" focusable=\"false\" " }}
+                          {{ $svg | safeHTML }}
+                        {{ end }}
+                      </span>
+                    </button>
                 {{ end }}
                 </div>
             {{ end }}
 
             {{ if $page.Pages }}
-                {{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site)  }}
+                <div id="section-{{ $pageId }}" class="gd-docs-menu-section-wrapper{{ if $activeSection }} expanded{{ end }}">
+                  {{ template "section-tree-nav-sections" (dict "root" $page.Pages "currentPage" $currentPage "activeSection" $activeSection "site" $site)  }}
+                </div>
             {{ end }}
             </li>
         {{ end }}
diff --git a/static/js/menu.js b/static/js/menu.js
index 19fdebf..d0d8bba 100644
--- a/static/js/menu.js
+++ b/static/js/menu.js
@@ -9,4 +9,24 @@ $(document).ready(function () {
     }
 
     menu.removeClass("init");
+    
+    $(".gd-docs-menu-page__toggle-btn").on("click", function() {
+        console.log("clicked");
+        var $button = $(this);
+        var $section = $("#" + $button.attr("aria-controls"));
+        var isExpanded = $button.attr("aria-expanded") === "true";
+        
+        $button.attr("aria-expanded", !isExpanded);
+        $button.attr("aria-label", (isExpanded ? "Expand" : "Collapse") + " " + 
+                                   $button.closest(".gd-docs-menu-page__title").find(".gd-docs-menu-page__link").text() + " section");
+        
+        $section.toggleClass("expanded");
+    });
+    
+    $("#gd-docs-menu__mobile-trigger").on("click", function() {
+        var $button = $(this);
+        var isExpanded = $button.attr("aria-expanded") === "true";
+        
+        $button.attr("aria-expanded", !isExpanded);
+    });
 });
\ No newline at end of file

From 7511e3d834746e8cdb3f0729ea81f1ea82c509a0 Mon Sep 17 00:00:00 2001
From: quanb-duy <quanbuid@gmail.com>
Date: Fri, 21 Mar 2025 18:04:58 +0100
Subject: [PATCH 2/2] added bypass blocks

---
 assets/scss/_styles_project.scss  |  1 +
 assets/scss/skip-links.scss       | 66 +++++++++++++++++++++++++++++++
 layouts/_default/baseof.html      |  5 ++-
 layouts/api-reference/baseof.html |  5 ++-
 layouts/docs/baseof.html          |  5 ++-
 layouts/partials/footer.html      |  2 +
 layouts/partials/sidebar.html     |  4 ++
 layouts/partials/skip-links.html  |  8 ++++
 layouts/swagger/baseof.html       |  5 ++-
 9 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 assets/scss/skip-links.scss
 create mode 100644 layouts/partials/skip-links.html

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 0c983fb..4606605 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -29,6 +29,7 @@
 @import "expand-content";
 @import "docs-homepage";
 @import "404";
+@import "skip-links";
 
 #print {
   display: none; // Hide print functionality for now
diff --git a/assets/scss/skip-links.scss b/assets/scss/skip-links.scss
new file mode 100644
index 0000000..02efeac
--- /dev/null
+++ b/assets/scss/skip-links.scss
@@ -0,0 +1,66 @@
+// Skip links for accessibility
+.skip-links {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1050; // Higher than other elements
+}
+
+.sidebar-skip-links {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.skip-link {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  background-color: #fff;
+  color: #000;
+  padding: 10px 15px;
+  font-weight: 600;
+  text-decoration: none;
+  border: 2px solid #000;
+  border-radius: 4px;
+  z-index: 1050;
+  
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    margin: 10px;
+    outline: 3px solid #2563eb; // Focus indicator
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
+  }
+  
+  // Variants
+  &--sidebar {
+    margin-bottom: 5px;
+    
+    &:focus {
+      position: static;
+      width: 100%;
+      height: auto;
+      overflow: visible;
+      margin: 0 0 5px 0;
+      text-align: center;
+    }
+  }
+  
+  &--footer {
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      margin: 10px auto;
+      display: block;
+      text-align: center;
+    }
+  }
+} 
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 09a3188..80ea98f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,8 +7,9 @@
     {{ partial "head.html" . }}
     {{ partial "meta-version.html" . }}
   </head>
-  <body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}">
+  <body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}" id="top">
     {{ partial "gtm-body.html" }}
+    {{ partial "skip-links.html" . }}
     <header>
       {{ partial "navbar.html" . }}
     </header>
@@ -21,7 +22,7 @@
           </div>
           <main class="
            col-12 col-xl-8
-           " role="main">
+           " role="main" id="main-content">
             {{ partial "version-banner.html" . }}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ if .Draft }}
diff --git a/layouts/api-reference/baseof.html b/layouts/api-reference/baseof.html
index 8c94b53..a2983ea 100644
--- a/layouts/api-reference/baseof.html
+++ b/layouts/api-reference/baseof.html
@@ -7,13 +7,14 @@
     {{ partial "head.html" . }}
     {{ partial "meta-version.html" . }}
   </head>
-  <body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}">
+  <body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}" id="top">
     {{ partial "gtm-body.html" }}
+    {{ partial "skip-links.html" . }}
     <header>
       {{ partial "navbar.html" . }}
     </header>
     <div class="container-fluid td-default td-outer">
-      <main role="main" class="td-main">
+      <main role="main" class="td-main" id="main-content">
         {{ block "main" . }}{{ end }}
       </main>
       {{ partialCached "footer.html" . }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index d2dca41..022a12f 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -10,8 +10,9 @@
       <meta http-equiv="refresh" content="0;url={{ .Params.externalLink }}" />
     {{ end }}
   </head>
-  <body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}">
+  <body class="td-{{ .Kind }}{{ if .Page.Params.edition }} doc{{ .Page.Params.edition }}{{ end }}{{ if .Page.Params.type }} {{ .Page.Params.type }}{{ end }}" id="top">
     {{ partial "gtm-body.html" }}
+    {{ partial "skip-links.html" . }}
     <header>
       {{ partial "navbar.html" . }}
     </header>
@@ -25,7 +26,7 @@
           <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
             {{ partial "toc.html" . }}
           </div>
-          <main class="col-12 col-lg-8 col-xl-7 pl-lg-5 ps-lg-5" role="main">
+          <main class="col-12 col-lg-8 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content">
             {{ partial "version-banner.html" . }}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ if .Draft }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7c88de3..d74871a 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -2,6 +2,8 @@
 {{ $footer := getJSON "https://www.gooddata.com/learn-assets/js/footer-definition.json" }}
 
 <footer class="gd-footer">
+  <a href="#top" class="skip-link skip-link--footer">Skip footer content</a>
+  
   {{ if $footer.footer.bannerLinks }}
     <ul class="gd-footer-banner-links gd-footer-links">
     {{ range $index, $link := $footer.footer.bannerLinks }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 94686ee..28ef676 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -4,6 +4,10 @@
 </button>
 <div class="gd-docs-menu__mobile-bg"></div>
 <nav id="gd-docs-menu" class="gd-docs-menu init">
+    <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 }}
diff --git a/layouts/partials/skip-links.html b/layouts/partials/skip-links.html
new file mode 100644
index 0000000..1fa6140
--- /dev/null
+++ b/layouts/partials/skip-links.html
@@ -0,0 +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>
+  {{ if not .Params.no_search }}
+  <a href="#adds-container" class="skip-link">Skip to search</a>
+  {{ end }}
+</div> 
\ No newline at end of file
diff --git a/layouts/swagger/baseof.html b/layouts/swagger/baseof.html
index 4ffe0cc..efc3c67 100644
--- a/layouts/swagger/baseof.html
+++ b/layouts/swagger/baseof.html
@@ -7,8 +7,9 @@
     <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
     <link rel="stylesheet" type="text/css" href="/css/swagger-ui.css">
   </head>
-  <body class="td-{{ .Kind }}">
+  <body class="td-{{ .Kind }}" id="top">
     {{ partial "gtm-body.html" }}
+    {{ partial "skip-links.html" . }}
     <header>
       {{ partial "navbar.html" . }}
     </header>
@@ -21,7 +22,7 @@
           <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
             {{ partial "toc.html" . }}
           </div>
-          <main class="col-12 col-md-9 col-xl-7 pl-lg-5 ps-lg-5" role="main">
+          <main class="col-12 col-md-9 col-xl-7 pl-lg-5 ps-lg-5" role="main" id="main-content">
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             <script src="/js/swagger-ui-bundle.js"></script>
             <script src="/js/swagger-ui-standalone-preset.js"></script>