details/summary, no checkbox

Author: gabalafou

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -564,58 +564,6 @@ if (hasVersionsJSON && (hasSwitcherMenu || wantsWarningBanner)) {
   }
 }
 
-/*******************************************************************************
- * Table of contents expand/collapse chevron aka toctree-toggle
- */
-function setupToctreeToggle() {
-  const handleKey = (event) => {
-    if (
-      !event.target.classList.contains("toctree-toggle") ||
-      (event.key !== "Enter" && event.key !== " ")
-    ) {
-      return;
-    }
-
-    // Prevent default in any case
-    event.preventDefault();
-
-    if (
-      !(
-        // Enter key triggers button action on keydown
-        (
-          (event.type === "keydown" && event.key === "Enter") ||
-          // Space key triggers button action on keyup
-          (event.type === "keyup" && event.key === " ")
-        )
-      )
-    ) {
-      return;
-    }
-
-    event.stopPropagation();
-    const label = event.target;
-    const forId = label.getAttribute("for");
-    const invisibleCheckbox = document.getElementById(forId);
-    invisibleCheckbox.checked = !invisibleCheckbox.checked;
-    if (label.getAttribute("aria-expanded") === "true") {
-      label.setAttribute(
-        "aria-label",
-        label.ariaLabel.replace("Collapse", "Expand")
-      );
-      label.setAttribute("aria-expanded", "false");
-    } else {
-      label.setAttribute(
-        "aria-label",
-        label.ariaLabel.replace("Expand", "Collapse")
-      );
-      label.setAttribute("aria-expanded", "true");
-    }
-  };
-
-  window.addEventListener("keydown", handleKey);
-  window.addEventListener("keyup", handleKey);
-}
-
 /*******************************************************************************
  * Call functions after document loading.
  */
@@ -624,5 +572,4 @@ documentReady(addModeListener);
 documentReady(scrollToActive);
 documentReady(addTOCInteractivity);
 documentReady(setupSearchButtons);
-documentReady(setupToctreeToggle);
 documentReady(initRTDObserver);

src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss

@@ -26,32 +26,6 @@
       @include link-style-text;
     }
   }
-
-  /**
-   * Togglable expand/collapse
-   * This is only applicable to the primary sidebar which has these checkboxes
-   */
-  .toctree-checkbox {
-    position: absolute;
-    display: none;
-  }
-
-  .toctree-checkbox {
-    ~ ul {
-      display: none;
-    }
-    ~ label i {
-      transform: rotate(0deg);
-    }
-  }
-  .toctree-checkbox:checked {
-    ~ ul {
-      display: block;
-    }
-    ~ label i {
-      transform: rotate(180deg);
-    }
-  }
 }
 
 // Don't display the `site navigation` in the header menu

src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss

@@ -149,19 +149,36 @@
       > .reference {
         padding-right: 30px;
       }
+
+      details {
+        // Get rid of the default toggle icon
+        > summary {
+          display: flex;
+          justify-content: space-between;
+          list-style: none;
+          &::-webkit-details-marker {
+            display: none;
+          }
+        }
+
+        // The section is open, rotate the toggle icon (chevron) so it points down instead of to the right
+        &[open] {
+          .fa-chevron-down {
+            transform: rotate(180deg);
+          }
+        }
+      }
+      text-align: initial;
     }
   }
   // Navigation item chevrons
-  label.toctree-toggle {
-    position: absolute;
-    top: 0;
-    right: 0;
+  span.toctree-toggle {
     height: 30px;
     width: 30px;
 
     cursor: pointer;
 
-    display: flex;
+    display: inline-flex;
     justify-content: center;
     align-items: center;
 
@@ -208,7 +225,8 @@ nav.bd-links {
     }
   }
 
-  li > a {
+  li > a,
+  li summary a {
     display: block;
     padding: 0.25rem 0.65rem;
     @include link-sidebar;
@@ -224,11 +242,9 @@ nav.bd-links {
     }
   }
 
-  .current {
-    > a {
-      @include link-sidebar-current;
-      background-color: transparent;
-    }
+  a.current {
+    @include link-sidebar-current;
+    background-color: transparent;
   }
 
   // Title

src/pydata_sphinx_theme/toctree.py

@@ -375,24 +375,34 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
         # Add a class to indicate that this has children.
         element["class"] = classes + ["has-children"]
 
+        # Put everything inside a <details> tag
+        details = soup.new_tag("details")
+        details.extend(element.contents)
+        element.append(details)
+
+        # Put the <a> in the <summary>
+        summary = soup.new_tag("summary")
+        summary.append(details.a)
+        details.insert(0, summary)
+
         # We're gonna add a checkbox.
         toctree_subtree_count += 1
         subtree_name = f"toctree-subtree-{toctree_subtree_count}"
         subtree["id"] = subtree_name
-        checkbox_name = f"toctree-checkbox-{toctree_subtree_count}"
+        # checkbox_name = f"toctree-checkbox-{toctree_subtree_count}"
 
         # Add the "label" for the checkbox which will get filled.
         if soup.new_tag is None:
             continue
 
         section_name = element.a.get_text()
         label = soup.new_tag(
-            "label",
+            "span",
             attrs={
-                "role": "button",
-                "for": checkbox_name,
+                # "role": "button",
+                # "for": checkbox_name,
                 "class": "toctree-toggle",
-                "tabindex": "0",
+                # "tabindex": "0",
                 "aria-expanded": "false",
                 "aria-controls": subtree_name,
                 "aria-label": f"Expand section {section_name}",
@@ -402,28 +412,14 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
         if "toctree-l0" in classes:
             # making label cover the whole caption text with css
             label["class"] = "label-parts"
-        element.insert(1, label)
-
-        # Add the checkbox that's used to store expanded/collapsed state.
-        checkbox = soup.new_tag(
-            "input",
-            attrs={
-                "type": "checkbox",
-                "class": ["toctree-checkbox"],
-                "id": checkbox_name,
-                "name": checkbox_name,
-            },
-        )
+        summary.append(label)
 
         # if this has a "current" class, be expanded by default
         # (by checking the checkbox)
         if "current" in classes:
-            checkbox.attrs["checked"] = ""
             label.attrs["aria-expanded"] = "true"
             label.attrs["aria-label"] = f"Collapse section {section_name}"
 
-        element.insert(1, checkbox)
-
 
 def get_local_toctree_for(
     self: TocTree, indexname: str, docname: str, builder, collapse: bool, **kwargs