Improved accessibility of sidebar navigation

material/base.html

@@ -240,7 +240,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.51d95adb.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.a6ba2619.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/partials/nav-item.html

@@ -19,7 +19,7 @@
       {% if expanded and not checked %}
         {% set indeterminate = "md-toggle--indeterminate" %}
       {% endif %}
-      <input class="md-nav__toggle md-toggle {{ indeterminate }}" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
+      <input class="md-nav__toggle md-toggle {{ indeterminate }}" type="checkbox" id="{{ path }}" {{ checked }}>
       {% set indexes = [] %}
       {% if "navigation.indexes" in features %}
         {% for nav_item in nav_item.children %}
@@ -29,7 +29,7 @@
         {% endfor %}
       {% endif %}
       {% if not indexes %}
-        <label class="md-nav__link" for="{{ path }}" tabindex="0" aria-expanded="{{ nav_item.active | tojson }}">
+        <label class="md-nav__link" for="{{ path }}" id="{{ path }}_label" tabindex="0">
           {{ nav_item.title }}
           <span class="md-nav__icon md-icon"></span>
         </label>
@@ -45,7 +45,7 @@
           {% endif %}
         </div>
       {% endif %}
-      <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
+      <nav class="md-nav" data-md-level="{{ level }}" aria-labelledby="{{ path }}_label" aria-expanded="{{ nav_item.active | tojson }}">
         <label class="md-nav__title" for="{{ path }}">
           <span class="md-nav__icon md-icon"></span>
           {{ nav_item.title }}
@@ -62,7 +62,7 @@
   {% elif nav_item == page %}
     <li class="{{ class }}">
       {% set toc = page.toc %}
-      <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
+      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
       {% set first = toc | first %}
       {% if first and first.level == 1 %}
         {% set toc = first.children %}

src/assets/javascripts/bundle.ts

@@ -192,14 +192,8 @@ keyboard$
         /* Expand navigation, see https://bit.ly/3ZjG5io */
         case "Enter":
           const active = getActiveElement()
-          if (active instanceof HTMLLabelElement) {
+          if (active instanceof HTMLLabelElement)
-            const id = `[id="${active.htmlFor}"]`
+            active.click()
-            const input = getElement<HTMLInputElement>(id)
-            active.setAttribute(
-              "aria-expanded",
-              `${input.checked = !input.checked}`
-            )
-          }
       }
     })
 

src/assets/javascripts/components/sidebar/index.ts

@@ -28,9 +28,15 @@ import {
   combineLatest,
   defer,
   distinctUntilChanged,
+  endWith,
   finalize,
   first,
+  from,
+  fromEvent,
+  ignoreElements,
   map,
+  mergeMap,
+  takeUntil,
   tap,
   withLatestFrom
 } from "rxjs"
@@ -153,6 +159,7 @@ export function mountSidebar(
   const { y } = getElementOffset(inner)
   return defer(() => {
     const push$ = new Subject<Sidebar>()
+    const done$ = push$.pipe(ignoreElements(), endWith(true))
     const next$ = push$
       .pipe(
         auditTime(0, animationFrameScheduler)
@@ -190,6 +197,22 @@ export function mountSidebar(
         }
       })
 
+    /* Handle accessibility for expandable items, see https://bit.ly/3jaod9p */
+    from(getElements<HTMLLabelElement>("label[tabindex]", el))
+      .pipe(
+        mergeMap(label => fromEvent(label, "click")
+          .pipe(
+            map(() => label),
+            takeUntil(done$)
+          )
+        )
+      )
+        .subscribe(label => {
+          const input = getElement<HTMLInputElement>(`[id="${label.htmlFor}"]`)
+          const nav = getElement(`[aria-labelledby="${label.id}"]`)
+          nav.setAttribute("aria-expanded", `${input.checked}`)
+        })
+
     /* Create and return component */
     return watchSidebar(el, options)
       .pipe(

src/partials/nav-item.html

@@ -53,7 +53,6 @@
       <!-- Active checkbox expands items contained within nested section -->
       <input
         class="md-nav__toggle md-toggle {{ indeterminate }}"
-        data-md-toggle="{{ path }}"
         type="checkbox"
         id="{{ path }}"
         {{ checked }}
@@ -74,8 +73,8 @@
         <label
           class="md-nav__link"
           for="{{ path }}"
+          id="{{ path }}_label"
           tabindex="0"
-          aria-expanded="{{ nav_item.active | tojson }}"
         >
           {{ nav_item.title }}
           <span class="md-nav__icon md-icon"></span>
@@ -100,8 +99,9 @@
       <!-- Render nested navigation -->
       <nav
         class="md-nav"
-        aria-label="{{ nav_item.title }}"
         data-md-level="{{ level }}"
+        aria-labelledby="{{ path }}_label"
+        aria-expanded="{{ nav_item.active | tojson }}"
       >
         <label class="md-nav__title" for="{{ path }}">
           <span class="md-nav__icon md-icon"></span>
@@ -127,7 +127,6 @@
       <!-- Active checkbox expands items contained within nested section -->
       <input
         class="md-nav__toggle md-toggle"
-        data-md-toggle="toc"
         type="checkbox"
         id="__toc"
       />