Allow keyboard to toggle menu expansion (#1167)

Co-authored-by: Aaron Carlisle <carlisle.b3d@gmail.com>
readthedocs · Jun 18, 2021 · a2997e8 · a2997e8
1 parent da86e4d
commit a2997e8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/sass/_theme_layout.sass b/src/sass/_theme_layout.sass
@@ -64,14 +64,17 @@ html
       padding-left: 0
       padding-right: 0
     // Expand links
-    span.toctree-expand
+    button.toctree-expand
       display: block
       float: left
       margin-left: -1.2em
       @extend .fa
       @extend .fa-plus-square-o
       line-height: 18px
       color: darken($menu-link-medium, 20%)
+      border: none
+      background: none
+      padding: 0
 
   // On state for the first level
   li.on a, li.current > a
@@ -85,9 +88,9 @@ html
     +font-smooth
     &:hover
       background: $menu-vertical-background-color
-      span.toctree-expand
+      button.toctree-expand
         color: $menu-link-medium
-    span.toctree-expand
+    button.toctree-expand
       @extend .fa
       @extend .fa-minus-square-o
       display: block
@@ -134,7 +137,7 @@ html
             @extend %display_current_toctree_element
             padding: ($gutter / 4) ($gutter * ($toc_level + 0.5))
             padding-right: $gutter
-        a:hover span.toctree-expand
+        a:hover button.toctree-expand
           @extend %toctree_hover_link_color
     @if $toc_level > 2 and $toc_level < 5
       li.toctree-l#{$toc_level}
@@ -146,15 +149,15 @@ html
         background: darken($menu-vertical-background-color, 20%)
       li.toctree-l3 > a
         background: darken($menu-vertical-background-color, 20%)
-    span.toctree-expand
+    button.toctree-expand
       color: darken($menu-vertical-background-color, 35%)
   li.toctree-l3
     &.current
       > a
         background: darken($menu-vertical-background-color, 25%)
       li.toctree-l4 > a
         background: darken($menu-vertical-background-color, 25%)
-    span.toctree-expand
+    button.toctree-expand
       color: darken($menu-vertical-background-color, 40%)
 
   li.current ul
@@ -176,13 +179,13 @@ html
     &:hover
       background-color: lighten($menu-background-color, 10%)
       cursor: pointer
-      span.toctree-expand
+      button.toctree-expand
         color: $menu-link-light
     &:active
       background-color: $menu-logo-color
       cursor: pointer
       color: $menu-link-active
-      span.toctree-expand
+      button.toctree-expand
         color: $menu-link-active
 
 .wy-side-nav-search

diff --git a/src/theme.js b/src/theme.js
@@ -112,7 +112,8 @@ function ThemeNav () {
         // Add expand links to all parents of nested ul
         $('.wy-menu-vertical ul').not('.simple').siblings('a').each(function () {
             var link = $(this);
-                expand = $('<span class="toctree-expand"></span>');
+                expand =
+                    $('<button class="toctree-expand" title="Open/close menu"></button>');
             expand.on('click', function (ev) {
                 self.toggleCurrent(link);
                 ev.stopPropagation();