Fixed odd behavior in navigation tab behavior

material/base.html

@@ -167,7 +167,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application.24b6416b.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application.dda16324.js"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

material/partials/nav-item.html

@@ -9,11 +9,11 @@
     {% else %}
       <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
     {% endif %}
-    <label class="md-nav__link" for="{{ path }}" tabindex="0">
+    <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
     <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
-      <label class="md-nav__title" for="{{ path }}" tabindex="0">
+      <label class="md-nav__title" for="{{ path }}">
         {{ nav_item.title }}
       </label>
       <ul class="md-nav__list" data-md-scrollfix>
@@ -34,7 +34,7 @@
       {% set toc_ = (toc_ | first).children %}
     {% endif %}
     {% if toc_ | first is defined %}
-      <label class="md-nav__link md-nav__link--active" for="toc" tabindex="0">
+      <label class="md-nav__link md-nav__link--active" for="toc">
         {{ nav_item.title }}
       </label>
     {% endif %}

src/assets/javascripts/application.js

@@ -298,6 +298,31 @@ function initialize(config) { // eslint-disable-line func-style
       })
   })).listen()
 
+  /* Listener: handle tabbing context for better accessibility */
+  new Material.Event.Listener(document.body, "keydown", ev => {
+    if (ev.keyCode === 9) {
+      const labels = document.querySelectorAll(
+        "[data-md-component=navigation] .md-nav__link[for]:not([tabindex])")
+      Array.prototype.forEach.call(labels, label => {
+        label.tabIndex = 0
+      })
+    }
+  }).listen()
+
+  /* Listener: reset tabbing behavior */
+  new Material.Event.Listener(document.body, "click", () => {
+    const labels = document.querySelectorAll(
+      "[data-md-component=navigation] .md-nav__link[tabindex]")
+    Array.prototype.forEach.call(labels, label => {
+      label.removeAttribute("tabIndex")
+    })
+  }).listen()
+
+  document.body.addEventListener("click", () => {
+    if (document.body.dataset.mdState === "tabbing")
+      document.body.dataset.mdState = ""
+  })
+
   /* Listener: close drawer when anchor links are clicked */
   new Material.Event.MatchMedia("(max-width: 959px)",
     new Material.Event.Listener("[data-md-component=navigation] [href^='#']",

src/partials/nav-item.html

@@ -40,12 +40,12 @@
     {% endif %}
 
     <!-- Expand active pages -->
-    <label class="md-nav__link" for="{{ path }}" tabindex="0">
+    <label class="md-nav__link" for="{{ path }}">
       {{ nav_item.title }}
     </label>
     <nav class="md-nav" data-md-component="collapsible"
         data-md-level="{{ level }}">
-      <label class="md-nav__title" for="{{ path }}" tabindex="0">
+      <label class="md-nav__title" for="{{ path }}">
         {{ nav_item.title }}
       </label>
       <ul class="md-nav__list" data-md-scrollfix>
@@ -77,7 +77,7 @@
 
     <!-- Render table of contents, if not empty -->
     {% if toc_ | first is defined %}
-      <label class="md-nav__link md-nav__link--active" for="toc" tabindex="0">
+      <label class="md-nav__link md-nav__link--active" for="toc">
         {{ nav_item.title }}
       </label>
     {% endif %}