Make version picker keyboard-controllable

Author: jonels-msft

sphinx_rtd_theme/versions.html

@@ -1,11 +1,11 @@
 {% 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" 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>
+    </button>
     <div class="rst-other-versions">
       <dl>
         <dt>{{ _('Versions') }}</dt>

src/sass/_theme_badge.sass

@@ -20,6 +20,7 @@
     font-size: 90%
     cursor: pointer
     color: $green
+    width: 100%
     +clearfix
     .fa
       color: $section-background-color

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