add focusable button for TOC expand toggle

- include HTML template element to set up classes & translated screen reader description
- revise DOM position so it is the same visually as the tab order
- move in slightly so focus outline is visible
- fixes #104

js/theme.js

@@ -63,32 +63,37 @@ function updateDarkMode(event, { isInitial = false } = {}) {
  */
 updateDarkMode(null, { isInitial: true });
 
-// Inject collapsible menu
-function toggleCurrent(event) {
-  event.preventDefault();
-  var link = event.currentTarget.parentElement;
-  var element = link.parentElement;
-  var siblings =
-    element.parentElement.parentElement.querySelectorAll("li.current");
-  for (var i = 0; i < siblings.length; i++) {
-    if (siblings[i] !== element) {
-      siblings[i].classList.remove("current");
-    }
+/**
+ * Inject collapsible menu
+ */
+function makeMenuExpandable() {
+  function toggleCurrent(event) {
+    const expandButton = event.currentTarget;
+    const element = expandButton.parentElement;
+    const siblings =
+      element.parentElement.parentElement.querySelectorAll("li.current");
+
+    siblings.forEach((sibling) => {
+      if (sibling !== element) {
+        sibling.classList.remove("current");
+      }
+    });
+
+    element.classList.toggle("current");
   }
-  element.classList.toggle("current");
-}
 
-function makeMenuExpandable() {
-  var toc = document.querySelector(".toc");
-  var links = toc.getElementsByTagName("a");
-  for (var i = 0; i < links.length; i++) {
-    if (links[i].nextSibling) {
-      var expand = document.createElement("span");
-      expand.classList.add("toctree-expand");
-      expand.addEventListener("click", toggleCurrent, true);
-      links[i].prepend(expand);
+  const toc = document.querySelector(".toc");
+  const links = Array.from(toc.getElementsByTagName("a"));
+  const template = document.querySelector("[data-toggle-item-template]");
+  const templateChild = template.content.firstElementChild;
+
+  links.forEach((link) => {
+    if (link.nextSibling) {
+      const expandButton = templateChild.cloneNode(true);
+      expandButton.addEventListener("click", toggleCurrent, true);
+      link.before(expandButton);
     }
-  }
+  });
 }
 
 makeMenuExpandable();

sass/_component_toc.scss

@@ -1,13 +1,17 @@
 .toc {
   a {
-    position: relative;
     display: inline-block;
     line-height: 1.25;
     padding: ($spacer / 4) 0;
   }
 
   li {
     margin: $size-1 0;
+
+    &[class^="toctree-"] {
+      // ensure the toctree-expand button can be positioned
+      position: relative;
+    }
   }
 
   li:not(.toctree-l1) a {
@@ -23,7 +27,7 @@
     position: absolute;
     display: block;
     top: (($spacer / 4) + ($font-size-base * 1.25 / 2));
-    left: -$size-6;
+    left: -$size-5;
     transform: translate(0, -50%);
     height: 1em;
     width: 1em;

sphinx_wagtail_theme/globaltoc.html

@@ -1,5 +1,10 @@
 <div class="site-toc">
-    <nav class="toc mt-3" aria-label="Main menu">
+    <nav class="toc mt-3" aria-label="{{ _('Main menu') }}">
         {{ toctree(includehidden=False, collapse=False, maxdepth=8, titles_only=True) }}
     </nav>
+    <template data-toggle-item-template>
+        <button class="btn btn-sm btn-link toctree-expand" type="button">
+            <span class="sr-only">{{ _('Toggle menu contents') }}</span>
+        </button>
+    </template>
 </div>