Improved accessibility of sidebar navigation

material/base.html

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

material/partials/nav-item.html

@@ -13,12 +13,13 @@
       {% set class = class ~ " md-nav__item--section" %}
     {% endif %}
     <li class="{{ class }} md-nav__item--nested">
+      {% set expanded = "navigation.expand" in features %}
+      {% set active = nav_item.active or expanded %}
       {% set checked = "checked" if nav_item.active %}
-      {% if "navigation.expand" in features and not checked %}
+      {% if expanded and not checked %}
-        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
+        {% set indeterminate = "md-toggle--indeterminate" %}
-      {% else %}
-        <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
       {% endif %}
+      <input class="md-nav__toggle md-toggle {{ indeterminate }}" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
       {% set indexes = [] %}
       {% if "navigation.indexes" in features %}
         {% for nav_item in nav_item.children %}
@@ -28,7 +29,7 @@
         {% endfor %}
       {% endif %}
       {% if not indexes %}
-        <label class="md-nav__link" for="{{ path }}">
+        <label class="md-nav__link" for="{{ path }}" tabindex="0" aria-expanded="{{ nav_item.active | tojson }}">
           {{ nav_item.title }}
           <span class="md-nav__icon md-icon"></span>
         </label>

src/assets/javascripts/bundle.ts

@@ -43,6 +43,8 @@ import {
 import { configuration, feature } from "./_"
 import {
   at,
+  getActiveElement,
+  getElement,
   getOptionalElement,
   requestJSON,
   setLocation,
@@ -186,6 +188,18 @@ keyboard$
           if (typeof next !== "undefined")
             setLocation(next)
           break
+
+        /* Expand navigation, see https://bit.ly/3ZjG5io */
+        case "Enter":
+          const active = getActiveElement()
+          if (active instanceof HTMLLabelElement) {
+            const id = `[id="${active.htmlFor}"]`
+            const input = getElement<HTMLInputElement>(id)
+            active.setAttribute(
+              "aria-expanded",
+              `${input.checked = !input.checked}`
+            )
+          }
       }
     })
 

src/partials/nav-item.html

@@ -41,26 +41,23 @@
 
     <!-- Render item with nested items -->
     <li class="{{ class }} md-nav__item--nested">
+      {% set expanded = "navigation.expand" in features %}
+      {% set active = nav_item.active or expanded %}
+
+      <!-- Determine checked and indeterminate state -->
+      {% set checked = "checked" if nav_item.active %}
+      {% if expanded and not checked %}
+        {% set indeterminate = "md-toggle--indeterminate" %}
+      {% endif %}
 
       <!-- Active checkbox expands items contained within nested section -->
-      {% set checked = "checked" if nav_item.active %}
-      {% if "navigation.expand" in features and not checked %}
       <input
-          class="md-nav__toggle md-toggle md-toggle--indeterminate"
+        class="md-nav__toggle md-toggle {{ indeterminate }}"
-          data-md-toggle="{{ path }}"
-          type="checkbox"
-          id="{{ path }}"
-          checked
-        />
-      {% else %}
-        <input
-          class="md-nav__toggle md-toggle"
         data-md-toggle="{{ path }}"
         type="checkbox"
         id="{{ path }}"
         {{ checked }}
       />
-      {% endif %}
 
       <!-- Determine all nested items that are index pages -->
       {% set indexes = [] %}
@@ -74,7 +71,12 @@
 
       <!-- Render toggle to expand nested items -->
       {% if not indexes %}
-        <label class="md-nav__link" for="{{ path }}">
+        <label
+          class="md-nav__link"
+          for="{{ path }}"
+          tabindex="0"
+          aria-expanded="{{ nav_item.active | tojson }}"
+        >
           {{ nav_item.title }}
           <span class="md-nav__icon md-icon"></span>
         </label>