diff --git a/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss b/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss
index 91656f951..6504c51c9 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_navbar-links.scss
+++ b/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 .fa-chevron-down {
-      transform: rotate(0deg);
-    }
-  }
-  .toctree-checkbox:checked {
-    ~ ul {
-      display: block;
-    }
-    ~ label .fa-chevron-down {
-      transform: rotate(180deg);
-    }
-  }
 }
 
 // Don't display the `site navigation` in the header menu
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
index 7abd37916..7bfc028c2 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
@@ -6,8 +6,7 @@ nav.page-toc {
   margin-bottom: 1rem;
 }
 
-.bd-toc .nav,
-.list-caption {
+.bd-toc .nav {
   .nav {
     display: none;
 
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
index 6bae4e752..b461b451a 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
@@ -3,6 +3,7 @@
  * e.g., between-pages navigation.
  */
 
+$sidebar-padding-right: 1rem;
 .bd-sidebar-primary {
   display: flex;
   flex-direction: column;
@@ -13,7 +14,7 @@
   @include make-col(3);
 
   // Borders padding and whitespace
-  padding: 2rem 1rem 1rem 1rem;
+  padding: 2rem $sidebar-padding-right 1rem 1rem;
   border-right: 1px solid var(--pst-color-border);
   background-color: var(--pst-color-background);
   overflow-y: auto;
@@ -140,61 +141,107 @@
   .list-caption {
     list-style: none;
     padding-left: 0px;
-  }
-  li {
-    position: relative;
-    // If it has children, add a bit more padding to wrap the content to avoid
-    // overlapping with the <label>
-    &.has-children {
-      > .reference {
-        padding-right: 30px;
+
+    // Level 0 TOC heading is put inside the <summary> tag
+    // so let the <summary> tag take up more space
+    li.toctree-l0.has-children {
+      > details {
+        > summary {
+          position: relative;
+          height: auto;
+          width: auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: baseline;
+
+          .toctree-toggle {
+            // Prevent toggle icon from getting squished by summary being a
+            // flexbox
+            flex: 0 0 auto;
+
+            // Make the level 0 chevron icon slightly bigger than descendant
+            // levels
+            .fa-chevron-down {
+              font-size: 1rem;
+            }
+          }
+        }
       }
     }
   }
-  // Navigation item chevrons
-  label.toctree-toggle {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 30px;
-    width: 30px;
-
-    cursor: pointer;
+  li.has-children {
+    $toctree-toggle-width: 30px;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    position: relative;
 
-    &:hover {
-      background: var(--pst-color-surface);
+    > .reference,
+    .caption {
+      margin-right: calc(
+        $toctree-toggle-width + $focus-ring-width
+      ); // keep clear of the toggle icon
+      padding-top: 0.25rem; // align caption text with toggle chevron
     }
 
-    i {
-      display: inline-block;
-      font-size: 0.75rem;
-      text-align: center;
-      &:hover {
-        color: var(--pst-color-primary);
+    > details {
+      > summary {
+        // Remove browser default toggle icon
+        list-style: none;
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        // The summary element is natively focusable, but delegate the focus state to the toggle icon
+        &:focus-visible {
+          outline: none;
+
+          > .toctree-toggle {
+            outline: $focus-ring-outline;
+            outline-offset: -$focus-ring-width; // Prevent right side of focus ring from disappearing underneath the sidebar's right edge
+          }
+        }
+
+        // Container for expand/collapse chevron icon
+        .toctree-toggle {
+          cursor: pointer;
+
+          // Position it so that it's aligned with the top right corner of the
+          // last positioned element, in this case the li.has-children
+          position: absolute;
+          top: 0;
+          right: 0;
+
+          // Give it dimensions
+          width: $toctree-toggle-width;
+          height: $toctree-toggle-width; // make it square
+
+          // Vertically and horizontally center the icon within the container
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+
+          .fa-chevron-down {
+            font-size: 0.75rem;
+          }
+        }
+      }
+
+      // The section is open/expanded, rotate the toggle icon (chevron) so it
+      // points up instead of down
+      &[open] {
+        > summary {
+          .fa-chevron-down {
+            transform: rotate(180deg);
+          }
+        }
       }
-    }
-  }
-  .label-parts {
-    width: 100%;
-    height: 100%;
-    &:hover {
-      background: none;
-    }
-    i {
-      width: 30px;
-      position: absolute;
-      top: 0.3em; // aligning chevron with text
-      right: 0em; // aligning chevron to the right
     }
   }
 }
 
 /* Between-page links and captions */
 nav.bd-links {
+  margin-right: -$sidebar-padding-right; // align toctree toggle chevrons with right edge of sidebar and allow text to flow closer to the right edge
+
   @include media-breakpoint-up($breakpoint-sidebar-primary) {
     display: block;
   }
@@ -213,6 +260,7 @@ nav.bd-links {
     padding: 0.25rem 0.65rem;
     @include link-sidebar;
     box-shadow: none;
+    margin-right: $focus-ring-width; // prevent the right side focus ring from disappearing under the sidebar right edge
 
     &.reference.external {
       &:after {
@@ -224,11 +272,9 @@ nav.bd-links {
     }
   }
 
-  .current {
-    > a {
-      @include link-sidebar-current;
-      background-color: transparent;
-    }
+  .current > a {
+    @include link-sidebar-current;
+    background-color: transparent;
   }
 
   // Title
diff --git a/src/pydata_sphinx_theme/toctree.py b/src/pydata_sphinx_theme/toctree.py
index 629b62e72..44d48edb1 100644
--- a/src/pydata_sphinx_theme/toctree.py
+++ b/src/pydata_sphinx_theme/toctree.py
@@ -272,10 +272,8 @@ def generate_toctree_html(
 
             # Open the sidebar navigation to the proper depth
             for ii in range(int(show_nav_level)):
-                for checkbox in soup.select(
-                    f"li.toctree-l{ii} > input.toctree-checkbox"
-                ):
-                    checkbox.attrs["checked"] = None
+                for details in soup.select(f"li.toctree-l{ii} > details"):
+                    details["open"] = "open"
 
         return soup
 
@@ -354,8 +352,6 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
     """Add checkboxes to collapse children in a toctree."""
     # based on https://github.com/pradyunsg/furo
 
-    toctree_checkbox_count = 0
-
     for element in soup.find_all("li", recursive=True):
         # We check all "li" elements, to add a "current-page" to the correct li.
         classes = element.get("class", [])
@@ -364,7 +360,7 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
         if "current" in classes:
             parentli = element.find_parent("li", class_="toctree-l0")
             if parentli:
-                parentli.select("p.caption ~ input")[0].attrs["checked"] = ""
+                parentli.find("details")["open"] = None
 
         # Nothing more to do, unless this has "children"
         if not element.find("ul"):
@@ -373,40 +369,86 @@ def add_collapse_checkboxes(soup: BeautifulSoup) -> None:
         # Add a class to indicate that this has children.
         element["class"] = classes + ["has-children"]
 
-        # We're gonna add a checkbox.
-        toctree_checkbox_count += 1
-        checkbox_name = f"toctree-checkbox-{toctree_checkbox_count}"
-
-        # Add the "label" for the checkbox which will get filled.
         if soup.new_tag is None:
             continue
 
-        label = soup.new_tag(
-            "label", attrs={"for": checkbox_name, "class": "toctree-toggle"}
-        )
-        label.append(soup.new_tag("i", attrs={"class": "fa-solid fa-chevron-down"}))
-        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",
+        # For table of contents nodes that have subtrees, we modify the HTML so
+        # that the subtree can be expanded or collapsed in the browser.
+        #
+        # The HTML markup tree at the parent node starts with this structure:
+        #
+        # - li.has-children
+        #   - a.reference or p.caption
+        #   - ul
+        #
+        # Note the first child of li.has-children is p.caption only if this node
+        # is a section heading. (This only happens when show_nav_level is set to
+        # 0.)
+        #
+        # Now we modify the tree structure in one of two ways.
+        #
+        # (1) If the node holds a section heading, the HTML tree will be
+        # modified like so:
+        #
+        # - li.has-children
+        #   - details
+        #     - summary
+        #       - p.caption
+        #       - .toctree-toggle
+        #     - ul
+        #
+        # (2) Otherwise, if the node holds a link to a page in the docs:
+        #
+        # - li.has-children
+        #   - a.reference
+        #   - details
+        #     - summary
+        #       - .toctree-toggle
+        #   - ul
+        #
+        # Why the difference? In the first case, the TOC section heading is not
+        # a link, but in the second case it is. So in the first case it makes
+        # sense to put the (non-link) text inside the summary tag so that the
+        # user can click either the text or the .toctree-toggle chevron icon to
+        # expand/collapse the TOC subtree. But in the second case, putting the
+        # link in the summary tag would make it unclear whether clicking on the
+        # link should expand the subtree or take you to the link.
+
+        # Create <details> and put the entire subtree into it
+        details = soup.new_tag("details")
+        details.extend(element.contents)
+        element.append(details)
+
+        # Hoist the link to the top if there is one
+        toc_link = element.select_one("details > a.reference")
+        if toc_link:
+            element.insert(0, toc_link)
+
+        # Create <summary> with chevron icon
+        summary = soup.new_tag("summary")
+        span = soup.new_tag(
+            "span",
             attrs={
-                "type": "checkbox",
-                "class": ["toctree-checkbox"],
-                "id": checkbox_name,
-                "name": checkbox_name,
+                "class": "toctree-toggle",
+                "role": "presentation",  # This element and the chevron it contains are purely decorative; the actual expand/collapse functionality is delegated to the <summary> tag
             },
         )
+        span.append(soup.new_tag("i", attrs={"class": "fa-solid fa-chevron-down"}))
+        summary.append(span)
 
-        # if this has a "current" class, be expanded by default
-        # (by checking the checkbox)
-        if "current" in classes:
-            checkbox.attrs["checked"] = ""
+        # Prepend section heading (if there is one) to <summary>
+        collapsible_section_heading = element.select_one("details > p.caption")
+        if collapsible_section_heading:
+            # Put heading inside summary so that the heading text (and chevron) are both clickable
+            summary.insert(0, collapsible_section_heading)
+
+        # Prepend <summary> to <details>
+        details.insert(0, summary)
 
-        element.insert(1, checkbox)
+        # If this TOC node has a "current" class, be expanded by default
+        # (by opening the details/summary disclosure widget)
+        if "current" in classes:
+            details["open"] = "open"
 
 
 def get_local_toctree_for(
diff --git a/tests/test_build.py b/tests/test_build.py
index 1815bcc93..527413adb 100644
--- a/tests/test_build.py
+++ b/tests/test_build.py
@@ -418,7 +418,7 @@ def test_sidebars_nested_page(sphinx_build_factory, file_regression) -> None:
 
     subindex_html = sphinx_build.html_tree("section1/subsection1/page1.html")
 
-    # For nested (uncollapsed) page, the label included `checked=""`
+    # For nested (uncollapsed) page, the disclosure widget should be open
     sidebar = subindex_html.select("nav.bd-docs-nav")[0]
     file_regression.check(sidebar.prettify(), extension=".html")
 
@@ -463,7 +463,6 @@ def test_sidebars_show_nav_level0(sphinx_build_factory) -> None:
     # part li
     assert "toctree-l0 has-children" in " ".join(li[0].attrs["class"])
     assert "caption-text" in li[0].select("p span")[0].attrs["class"]
-    assert "label-parts" in li[0].find("label").attrs["class"]
 
     # basic checks on other levels
     assert "toctree-l1 has-children" in " ".join(li[1].attrs["class"])
@@ -473,12 +472,13 @@ def test_sidebars_show_nav_level0(sphinx_build_factory) -> None:
     subsection_html = sphinx_build.html_tree("section1/subsection1/index.html")
     sidebar = subsection_html.select("nav.bd-docs-nav")[0]
 
-    # get all input elements
-    input_elem = sidebar.select("input")
+    # get all <details> elements
+    details_elem = sidebar.select("details")
+    assert len(details_elem) > 0, "There must be at least one details element"
 
-    # all input elements should be collapsed in this page
-    for ii in input_elem:
-        assert "checked" in ii.attrs
+    # all <details> elements should be open in this page
+    for ii in details_elem:
+        assert "open" in ii.attrs
 
 
 def test_included_toc(sphinx_build_factory) -> None:
@@ -736,8 +736,8 @@ def test_show_nav_level(sphinx_build_factory) -> None:
     # Both the column alignment and the margin should be changed
     index_html = sphinx_build.html_tree("section1/index.html")
 
-    for checkbox in index_html.select("li.toctree-l1.has-children > input"):
-        assert "checked" in checkbox.attrs
+    for details_elem in index_html.select("li.toctree-l1.has-children > details"):
+        assert "open" in details_elem.attrs
 
 
 # the switcher files tested in test_version_switcher_error_states, not all of them exist
diff --git a/tests/test_build/math_header_item.html b/tests/test_build/math_header_item.html
index 0a7bebd93..aa8751db0 100644
--- a/tests/test_build/math_header_item.html
+++ b/tests/test_build/math_header_item.html
@@ -1,4 +1,4 @@
-<li class="nav-item current active">
+<li class="nav-item pst-header-nav-item current active">
  <a class="nav-link nav-internal" href="#">
   Page
   <span class="math notranslate nohighlight">
diff --git a/tests/test_build/navbar_ix.html b/tests/test_build/navbar_ix.html
index 5b2de048a..52ea626c0 100644
--- a/tests/test_build/navbar_ix.html
+++ b/tests/test_build/navbar_ix.html
@@ -5,12 +5,12 @@
     Site Navigation
    </p>
    <ul class="bd-navbar-elements navbar-nav">
-    <li class="nav-item">
+    <li class="nav-item pst-header-nav-item">
      <a class="nav-link nav-internal" href="page1.html">
       Page 1
      </a>
     </li>
-    <li class="nav-item">
+    <li class="nav-item pst-header-nav-item">
      <a class="nav-link nav-internal" href="page2.html">
       Page
       <span class="math notranslate nohighlight">
@@ -18,12 +18,12 @@
       </span>
      </a>
     </li>
-    <li class="nav-item">
+    <li class="nav-item pst-header-nav-item">
      <a class="nav-link nav-internal" href="section1/index.html">
       Section 1 index
      </a>
     </li>
-    <li class="nav-item">
+    <li class="nav-item pst-header-nav-item">
      <a class="nav-link nav-external" href="https://google.com">
       google
      </a>
diff --git a/tests/test_build/sidebar_subpage.html b/tests/test_build/sidebar_subpage.html
index a3811b9b6..f4d5bb276 100644
--- a/tests/test_build/sidebar_subpage.html
+++ b/tests/test_build/sidebar_subpage.html
@@ -7,12 +7,12 @@
       Site Navigation
      </p>
      <ul class="bd-navbar-elements navbar-nav">
-      <li class="nav-item">
+      <li class="nav-item pst-header-nav-item">
        <a class="nav-link nav-internal" href="../page1.html">
         Page 1
        </a>
       </li>
-      <li class="nav-item">
+      <li class="nav-item pst-header-nav-item">
        <a class="nav-link nav-internal" href="../page2.html">
         Page
         <span class="math notranslate nohighlight">
@@ -20,12 +20,12 @@
         </span>
        </a>
       </li>
-      <li class="nav-item current active">
+      <li class="nav-item pst-header-nav-item current active">
        <a class="nav-link nav-internal" href="#">
         Section 1 index
        </a>
       </li>
-      <li class="nav-item">
+      <li class="nav-item pst-header-nav-item">
        <a class="nav-link nav-external" href="https://google.com">
         google
        </a>
diff --git a/tests/test_build/test_navbar_no_in_page_headers.html b/tests/test_build/test_navbar_no_in_page_headers.html
index e6ea5e520..609b3ecc2 100644
--- a/tests/test_build/test_navbar_no_in_page_headers.html
+++ b/tests/test_build/test_navbar_no_in_page_headers.html
@@ -1,10 +1,10 @@
 <ul class="bd-navbar-elements navbar-nav">
- <li class="nav-item">
+ <li class="nav-item pst-header-nav-item">
   <a class="nav-link nav-internal" href="page1.html">
    Page 1
   </a>
  </li>
- <li class="nav-item">
+ <li class="nav-item pst-header-nav-item">
   <a class="nav-link nav-internal" href="page2.html">
    Page 2
   </a>
diff --git a/tests/test_build/test_sidebars_captions.html b/tests/test_build/test_sidebars_captions.html
index 83da0c81f..79cea95be 100644
--- a/tests/test_build/test_sidebars_captions.html
+++ b/tests/test_build/test_sidebars_captions.html
@@ -13,23 +13,26 @@
     <a class="reference internal" href="subsection1/index.html">
      Subsection 1.1 index
     </a>
-    <input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/>
-    <label class="toctree-toggle" for="toctree-checkbox-1">
-     <i class="fa-solid fa-chevron-down">
-     </i>
-    </label>
-    <ul>
-     <li class="toctree-l2">
-      <a class="reference internal" href="subsection1/page1.html">
-       Section 1 sub 1 page 1
-      </a>
-     </li>
-     <li class="toctree-l2">
-      <a class="reference internal" href="subsection1/page2.html">
-       Section 1 sub 1 page 2
-      </a>
-     </li>
-    </ul>
+    <details>
+     <summary>
+      <span class="toctree-toggle" role="presentation">
+       <i class="fa-solid fa-chevron-down">
+       </i>
+      </span>
+     </summary>
+     <ul>
+      <li class="toctree-l2">
+       <a class="reference internal" href="subsection1/page1.html">
+        Section 1 sub 1 page 1
+       </a>
+      </li>
+      <li class="toctree-l2">
+       <a class="reference internal" href="subsection1/page2.html">
+        Section 1 sub 1 page 2
+       </a>
+      </li>
+     </ul>
+    </details>
    </li>
    <li class="toctree-l1">
     <a class="reference internal" href="page2.html">
diff --git a/tests/test_build/test_sidebars_nested_page.html b/tests/test_build/test_sidebars_nested_page.html
index 18036d0f5..893bdc028 100644
--- a/tests/test_build/test_sidebars_nested_page.html
+++ b/tests/test_build/test_sidebars_nested_page.html
@@ -13,23 +13,26 @@
     <a class="reference internal" href="index.html">
      Subsection 1.1 index
     </a>
-    <input checked="" class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/>
-    <label class="toctree-toggle" for="toctree-checkbox-1">
-     <i class="fa-solid fa-chevron-down">
-     </i>
-    </label>
-    <ul class="current">
-     <li class="toctree-l2 current active">
-      <a class="current reference internal" href="#">
-       Section 1 sub 1 page 1
-      </a>
-     </li>
-     <li class="toctree-l2">
-      <a class="reference internal" href="page2.html">
-       Section 1 sub 1 page 2
-      </a>
-     </li>
-    </ul>
+    <details open="open">
+     <summary>
+      <span class="toctree-toggle" role="presentation">
+       <i class="fa-solid fa-chevron-down">
+       </i>
+      </span>
+     </summary>
+     <ul class="current">
+      <li class="toctree-l2 current active">
+       <a class="current reference internal" href="#">
+        Section 1 sub 1 page 1
+       </a>
+      </li>
+      <li class="toctree-l2">
+       <a class="reference internal" href="page2.html">
+        Section 1 sub 1 page 2
+       </a>
+      </li>
+     </ul>
+    </details>
    </li>
    <li class="toctree-l1">
     <a class="reference internal" href="../page2.html">