Sidebar: Add a11y to skip entire sidebar or toc

Author: nginx-jack

assets/css/v2/style.css

@@ -817,6 +817,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 
   .sidebar__content {
     padding: 0.5rem 0 0.4rem 0;
+    margin-right: 0.25rem;
   }
 
   .sidebar__ul {
@@ -837,7 +838,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
     width: 100%;
     text-align: left;
     padding: 0.25rem 0.5rem;
-    border-radius: 5px 0 5px 0;
+    border-radius: 5px 0 0 5px;
     font-weight: 500;
     color: var(--color-foreground);
 
@@ -874,7 +875,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
     display: block;
     padding: 0.25rem 0.75rem;
     margin: 2px 0 2px 0;
-    border-radius: 5px 0 5px 0;
+    border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);
     text-decoration: none;
     transition: background-color 0.2s ease, color 0.2s ease;
@@ -908,7 +909,6 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
       }
 
       a {
-        color: oklch(0 0 0 / 0.75);
         text-decoration: none;
       }
 
@@ -1606,6 +1606,31 @@ hr {
   margin: 0;
 }
 
+/* MARK: Accessibility
+*/
+
+.skip-link {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  padding: 1rem 1rem;
+  font-size: 1rem;
+  border: 2px solid var(--color-foreground);
+  z-index: 1000;
+  text-decoration: none;
+  border-radius: 0;
+  box-shadow: 3px 3px 0px var(--color-shadow);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.skip-link:focus {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 /* FILTHY HACKS BEGIN */
 
 /* Override logo with black text version */

layouts/_default/docs.html

@@ -74,7 +74,7 @@
       </nav>
     </div>
 
-    <section class="content-layout">
+    <section id="maincontent" class="content-layout">
       <div data-cms-edit="content" class="text-content">
         <section class="breadcrumb-layout" data-mf="true" style="display: none;">
           {{ if not .IsHome }}

layouts/_default/list.html

@@ -18,7 +18,7 @@
     </nav>
   </div>
 
-  <section class="content-layout" data-mf="true" style="display: none">
+  <section id="maincontent" class="content-layout" data-mf="true" style="display: none">
     <div data-cms-edit="content" class="text-content list-page">
       <section class="breadcrumb-layout">
         {{ if not .IsHome }}

layouts/partials/sidebar-list.html

@@ -1,23 +1,31 @@
 {{ $currentUrl := .currentUrl }}
-{{ $firstSection := .firstSection }}
 {{ $currentPage := .currentPage }}
+{{ $firstSection := .firstSection }}
+{{ $idPrefix := .idPrefix }}
 
 {{ with $firstSection }}
 <ul class="sidebar__ul">
-  {{ range .Pages.ByWeight }}
-    {{- $onPage := eq $currentUrl .Permalink -}}
-    {{- $isAncestor := .IsAncestor $currentPage -}}
+  {{ $pages := .Pages.ByWeight }}
+  {{ range $index, $p := $pages }}
+    {{- $onPage := eq $currentUrl $p.Permalink -}}
+    {{- $isAncestor := $p.IsAncestor $currentPage -}}
     {{- $shouldExpand := or $onPage $isAncestor -}}
-    {{- $sectionID := printf "section-%s" (urlize .Permalink) -}}
+    {{/*  These variables are used to create a unique id to be attached to every link
+    that accessibility users can correctly "Skip Table Of Contents"  */}}
+    {{- $sectionID := printf "%ssection-%s" $idPrefix (urlize $p.Permalink) -}}
+    {{- $linkID := printf "%slink-%s" $idPrefix (urlize $p.Permalink) -}}
+    {{- $nextIndex := add $index 1 -}}
+    {{- $nextLink := index $pages $nextIndex -}}
 
-    {{ if eq .Kind "section" }}
+    {{ if eq $p.Kind "section" }}
       <li class="sidebar__section">
         <button
+          id="{{ $linkID }}"
           class="sidebar__toggle {{ if $isAncestor }}sidebar__toggle--ancestor{{ end }}"
           aria-expanded="{{ $shouldExpand }}"
           aria-controls="{{ $sectionID }}"
         >
-          <span class="sidebar__toggle-text">{{ .Title }}</span>
+          <span class="sidebar__toggle-text">{{ $p.Title }}</span>
           <span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}">
             {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
           </span>
@@ -28,45 +36,57 @@
           {{ if not $shouldExpand }}hidden{{ end }}
         >
           {{ partial "sidebar-list.html" (dict
-            "firstSection" . "currentUrl" $currentUrl "currentPage" $currentPage)
-          }}
+            "firstSection" $p
+            "currentUrl" $currentUrl
+            "currentPage" $currentPage
+            "idPrefix" (printf "%s%s-" $idPrefix (urlize $p.Title))
+          ) }}
         </div>
       </li>
 
-      {{ else if eq .Kind "page" }}
+    {{ else if eq $p.Kind "page" }}
+      {{- $tocHasItems := (in $p.TableOfContents "<li>") -}}
+      {{- $pageHasTOC := (and $onPage $tocHasItems $p.Params.toc) -}}
+      {{- $tocID := printf "%stoc-%s" $idPrefix (urlize $p.Permalink) -}}
       <li class="sidebar__page">
-        {{- $pageHasTOC := (and $onPage .TableOfContents) -}}
-        {{- $tocID := printf "toc-%s" (urlize .Permalink) -}}
-        {{- if $pageHasTOC }}
+        {{ if $pageHasTOC }}
           <button
             class="sidebar__toggle sidebar__link sidebar__link--current"
             aria-expanded="true"
             aria-controls="{{ $tocID }}"
+            id="{{ $linkID }}"
           >
-            <span>{{ .Title }}</span>
+            <span>{{ $p.Title }}</span>
             <span class="sidebar__chevron sidebar__chevron--open">
               {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
             </span>
           </button>
           <div id="{{ $tocID }}" class="sidebar__toc">
-            {{ .TableOfContents }}
+            {{ if $nextLink }}
+              {{- $nextLinkID := printf "%slink-%s" $idPrefix (urlize $nextLink.Permalink) -}}
+              <a class="skip-link" href="#{{ $nextLinkID }}">Skip Table of Contents</a>
+            {{ else }}
+              <a class="skip-link" href="#maincontent">Skip Table of Contents</a>
+            {{ end }}
+              {{ $p.TableOfContents }}
           </div>
         {{ else }}
           <a
-            href="{{ .Permalink }}"
+            href="{{ $p.Permalink }}"
+            id="{{ $linkID }}"
             class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
             {{ if $onPage }}aria-current="page"{{ end }}
           >
-            {{ .Title }}
+            {{ $p.Title }}
           </a>
         {{ end }}
       </li>
     {{ end }}
+
   {{ end }}
 </ul>
 {{ end }}
 
-
 {{/*  {{ if gt (.WordCount) 0 }}
 <ul>
   <li>

layouts/partials/sidebar-v2.html

@@ -23,10 +23,12 @@
 
 <div class="sidebar__container">
     <div class="sidebar__content">
+        <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict
         "firstSection" .FirstSection
         "currentUrl" .Permalink
         "currentPage" .
+        "idPrefix" ""
       ) }}
     </div>
 </div>