Make version picker keyboard-controllable

Pre-merging readthedocs#1160
jonels-msft · Jun 24, 2021 · 8b5bb05 · 8b5bb05
1 parent fb4c979
commit 8b5bb05
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
@@ -11,12 +11,12 @@
 {%- block footer %}
   {%- if not READTHEDOCS %}
     <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
-      <span class="rst-current-version" data-toggle="rst-current-version">
+      <button class="rst-current-version" aria-expanded="false" aria-controls="docs_versions" data-toggle="rst-current-version">
         <span class="fa fa-book"> Read the Docs</span>
         v: latest
         <span class="fa fa-caret-down"></span>
-      </span>
-      <div class="rst-other-versions">
+      </button>
+      <div class="rst-other-versions" id="docs_versions">
         <dl>
           <dt>{{ _('Versions') }}</dt>
           {%- if test_versions %}

diff --git a/sphinx_rtd_theme_citus/versions.html b/sphinx_rtd_theme_citus/versions.html
@@ -1,12 +1,12 @@
 {% if READTHEDOCS %}
 {# Add rst-badge after rst-versions for small badge style. #}
   <div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="{{ _('Versions') }}">
-    <span class="rst-current-version" data-toggle="rst-current-version">
+    <button class="rst-current-version" aria-expanded="false" aria-controls="docs_versions" data-toggle="rst-current-version">
       <span class="fa fa-book"> Read the Docs</span>
       v: {{ current_version }}
       <span class="fa fa-caret-down"></span>
-    </span>
-    <div class="rst-other-versions">
+    </button>
+    <div class="rst-other-versions" id="docs_versions">
       <dl>
         <dt>{{ _('Versions') }}</dt>
         {% for slug, url in versions %}

diff --git a/src/sass/_theme_badge.sass b/src/sass/_theme_badge.sass
@@ -20,6 +20,7 @@
     font-size: 90%
     cursor: pointer
     color: $green
+    width: 100%
     +clearfix
     .fa
       color: $section-background-color

diff --git a/src/theme.js b/src/theme.js
@@ -95,7 +95,13 @@ function ThemeNav () {
                 self.hashChange();
             })
             .on('click', "[data-toggle='rst-current-version']", function() {
+                var target = $(this);
                 $("[data-toggle='rst-versions']").toggleClass("shift-up");
+                target.attr(
+                    'aria-expanded',
+                    $("[data-toggle='rst-versions']").hasClass("shift-up") ?
+                        "true" : "false"
+                );
             })
 
         // Make tables responsive