From 300362e0e4e30439bd2f55f3dc94596ab197607e Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Fri, 30 Oct 2020 13:03:01 -0700
Subject: [PATCH 1/5] Close the theme picker when Escape is pressed

---
 src/librustdoc/html/static/main.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 28bd1ba5247d6..69873524bd729 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -4,6 +4,7 @@
 // Local js definitions:
 /* global addClass, getCurrentValue, hasClass */
 /* global onEachLazy, hasOwnProperty, removeClass, updateLocalStorage */
+/* global hideThemeButtonState */
 
 if (!String.prototype.startsWith) {
     String.prototype.startsWith = function(searchString, position) {
@@ -137,10 +138,6 @@ function defocusSearchBar() {
                 sidebar.appendChild(div);
             }
         }
-        var themePickers = document.getElementsByClassName("theme-picker");
-        if (themePickers && themePickers.length > 0) {
-            themePickers[0].style.display = "none";
-        }
     }
 
     function hideSidebar() {
@@ -155,10 +152,6 @@ function defocusSearchBar() {
             filler.remove();
         }
         document.getElementsByTagName("body")[0].style.marginTop = "";
-        var themePickers = document.getElementsByClassName("theme-picker");
-        if (themePickers && themePickers.length > 0) {
-            themePickers[0].style.display = null;
-        }
     }
 
     function showSearchResults(search) {
@@ -376,6 +369,7 @@ function defocusSearchBar() {
             document.title = titleBeforeSearch;
         }
         defocusSearchBar();
+        hideThemeButtonState();
     }
 
     function handleShortcut(ev) {

From ac3a434ed947058635fbe1f09b1da8bd6f1ea242 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Fri, 30 Oct 2020 13:34:30 -0700
Subject: [PATCH 2/5] Allow the theme picker to work with arrow keys

This is mostly motivated by docs.rs. It's really weird
when arrow keys work in the top dropdown menu, but don't work
in other dropdown menus on the same page.
---
 src/librustdoc/html/render/mod.rs | 48 +++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index 0621eafd91347..8d07f479b6eae 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@@ -798,17 +798,61 @@ function handleThemeButtonsBlur(e) {{
     var active = document.activeElement;
     var related = e.relatedTarget;
 
-    if (active.id !== "themePicker" &&
+    if (active.id !== "theme-picker" &&
         (!active.parentNode || active.parentNode.id !== "theme-choices") &&
         (!related ||
-         (related.id !== "themePicker" &&
+         (related.id !== "theme-picker" &&
           (!related.parentNode || related.parentNode.id !== "theme-choices")))) {{
         hideThemeButtonState();
     }}
 }}
 
+function handleThemeKeyPress(e) {{
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {{ return; }}
+    if (!themePicker.parentNode.contains(e.target)) {{ return; }}
+    var active = document.activeElement;
+    switch (e.key) {{
+        case "ArrowUp":
+            e.preventDefault();
+            if (active.previousElementSibling && e.target.id !== "theme-picker") {{
+                active.previousElementSibling.focus();
+            }} else {{
+                showThemeButtonState();
+                themes.lastElementChild.focus();
+            }}
+            break;
+        case "ArrowDown":
+            e.preventDefault();
+            if (active.nextElementSibling && e.target.id !== "theme-picker") {{
+                active.nextElementSibling.focus();
+            }} else {{
+                showThemeButtonState();
+                themes.firstElementChild.focus();
+            }}
+            break;
+        case "Enter":
+        case "Return":
+        case "Space":
+            if (e.target.id === "theme-picker" && themes.style.display === "none") {{
+                e.preventDefault();
+                showThemeButtonState();
+                themes.firstElementChild.focus();
+            }}
+            break;
+        case "Home":
+            e.preventDefault();
+            themes.firstElementChild.focus();
+            break;
+        case "End":
+            e.preventDefault();
+            themes.lastElementChild.focus();
+            break;
+    }}
+}};
+
 themePicker.onclick = switchThemeButtonState;
 themePicker.onblur = handleThemeButtonsBlur;
+document.addEventListener("keydown", handleThemeKeyPress);
 {}.forEach(function(item) {{
     var but = document.createElement("button");
     but.textContent = item;

From 6918a17aa4ed5d06c1fce292763ff26605c52b97 Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Fri, 30 Oct 2020 13:35:41 -0700
Subject: [PATCH 3/5] Add aria roles for theme picker menu

---
 src/librustdoc/html/layout.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
index b089bcb0862a5..db73af7ec1689 100644
--- a/src/librustdoc/html/layout.rs
+++ b/src/librustdoc/html/layout.rs
@@ -79,12 +79,12 @@ pub fn render<T: Print, S: Print>(
         {sidebar}\
     </nav>\
     <div class=\"theme-picker\">\
-        <button id=\"theme-picker\" aria-label=\"Pick another theme!\">\
+        <button id=\"theme-picker\" aria-label=\"Pick another theme!\" aria-haspopup=\"menu\">\
             <img src=\"{static_root_path}brush{suffix}.svg\" \
                  width=\"18\" \
                  alt=\"Pick another theme!\">\
         </button>\
-        <div id=\"theme-choices\"></div>\
+        <div id=\"theme-choices\" role=\"menu\"></div>\
     </div>\
     <script src=\"{static_root_path}theme{suffix}.js\"></script>\
     <nav class=\"sub\">\

From 90c7c634e39944873a031624c4fb1dc0aa776e3a Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Fri, 30 Oct 2020 13:54:36 -0700
Subject: [PATCH 4/5] Add comment describing the Escape key weirdness

---
 src/librustdoc/html/render/mod.rs | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index 8d07f479b6eae..bbcf3ce97e1dd 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@@ -807,7 +807,7 @@ function handleThemeButtonsBlur(e) {{
     }}
 }}
 
-function handleThemeKeyPress(e) {{
+function handleThemeKeyDown(e) {{
     if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {{ return; }}
     if (!themePicker.parentNode.contains(e.target)) {{ return; }}
     var active = document.activeElement;
@@ -847,12 +847,18 @@ function handleThemeKeyPress(e) {{
             e.preventDefault();
             themes.lastElementChild.focus();
             break;
+        // The escape key is handled in main.js, instead of here, for two reasons:
+        //
+        // 1 Escape should close the menu, even if it's not focused.
+        // 2 The escape event handler is bound to both keydown and keypress, to work
+        //   around browser inconsistencies. That sort of logic doesn't apply to the
+        //   rest of these keybindings.
     }}
 }};
 
 themePicker.onclick = switchThemeButtonState;
 themePicker.onblur = handleThemeButtonsBlur;
-document.addEventListener("keydown", handleThemeKeyPress);
+document.addEventListener("keydown", handleThemeKeyDown);
 {}.forEach(function(item) {{
     var but = document.createElement("button");
     but.textContent = item;

From 17b8ca952baf5d32ef6e9653b0eda6516386400c Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Fri, 30 Oct 2020 14:27:00 -0700
Subject: [PATCH 5/5] Pull theme picker keyboard code into main.js

Most of the code in mod.rs should be code that really needs to have
the list of available themes inlined into it.
---
 src/librustdoc/html/render/mod.rs  | 50 -------------------------
 src/librustdoc/html/static/main.js | 60 +++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 51 deletions(-)

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index bbcf3ce97e1dd..5ac0ffcfbf1c2 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@@ -807,58 +807,8 @@ function handleThemeButtonsBlur(e) {{
     }}
 }}
 
-function handleThemeKeyDown(e) {{
-    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {{ return; }}
-    if (!themePicker.parentNode.contains(e.target)) {{ return; }}
-    var active = document.activeElement;
-    switch (e.key) {{
-        case "ArrowUp":
-            e.preventDefault();
-            if (active.previousElementSibling && e.target.id !== "theme-picker") {{
-                active.previousElementSibling.focus();
-            }} else {{
-                showThemeButtonState();
-                themes.lastElementChild.focus();
-            }}
-            break;
-        case "ArrowDown":
-            e.preventDefault();
-            if (active.nextElementSibling && e.target.id !== "theme-picker") {{
-                active.nextElementSibling.focus();
-            }} else {{
-                showThemeButtonState();
-                themes.firstElementChild.focus();
-            }}
-            break;
-        case "Enter":
-        case "Return":
-        case "Space":
-            if (e.target.id === "theme-picker" && themes.style.display === "none") {{
-                e.preventDefault();
-                showThemeButtonState();
-                themes.firstElementChild.focus();
-            }}
-            break;
-        case "Home":
-            e.preventDefault();
-            themes.firstElementChild.focus();
-            break;
-        case "End":
-            e.preventDefault();
-            themes.lastElementChild.focus();
-            break;
-        // The escape key is handled in main.js, instead of here, for two reasons:
-        //
-        // 1 Escape should close the menu, even if it's not focused.
-        // 2 The escape event handler is bound to both keydown and keypress, to work
-        //   around browser inconsistencies. That sort of logic doesn't apply to the
-        //   rest of these keybindings.
-    }}
-}};
-
 themePicker.onclick = switchThemeButtonState;
 themePicker.onblur = handleThemeButtonsBlur;
-document.addEventListener("keydown", handleThemeKeyDown);
 {}.forEach(function(item) {{
     var but = document.createElement("button");
     but.textContent = item;
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 69873524bd729..de4792a5bd2f7 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -4,7 +4,7 @@
 // Local js definitions:
 /* global addClass, getCurrentValue, hasClass */
 /* global onEachLazy, hasOwnProperty, removeClass, updateLocalStorage */
-/* global hideThemeButtonState */
+/* global hideThemeButtonState, showThemeButtonState */
 
 if (!String.prototype.startsWith) {
     String.prototype.startsWith = function(searchString, position) {
@@ -48,6 +48,14 @@ function getSearchElement() {
     return document.getElementById("search");
 }
 
+function getThemesElement() {
+    return document.getElementById("theme-choices");
+}
+
+function getThemePickerElement() {
+    return document.getElementById("theme-picker");
+}
+
 // Sets the focus on the search bar at the top of the page
 function focusSearchBar() {
     getSearchInput().focus();
@@ -406,7 +414,57 @@ function defocusSearchBar() {
             case "?":
                 displayHelp(true, ev);
                 break;
+
+            default:
+                var themePicker = getThemePickerElement();
+                if (themePicker.parentNode.contains(ev.target)) {
+                    handleThemeKeyDown(ev);
+                }
+            }
+        }
+    }
+
+    function handleThemeKeyDown(ev) {
+        var active = document.activeElement;
+        var themes = getThemesElement();
+        switch (getVirtualKey(ev)) {
+        case "ArrowUp":
+            ev.preventDefault();
+            if (active.previousElementSibling && ev.target.id !== "theme-picker") {
+                active.previousElementSibling.focus();
+            } else {
+                showThemeButtonState();
+                themes.lastElementChild.focus();
             }
+            break;
+        case "ArrowDown":
+            ev.preventDefault();
+            if (active.nextElementSibling && ev.target.id !== "theme-picker") {
+                active.nextElementSibling.focus();
+            } else {
+                showThemeButtonState();
+                themes.firstElementChild.focus();
+            }
+            break;
+        case "Enter":
+        case "Return":
+        case "Space":
+            if (ev.target.id === "theme-picker" && themes.style.display === "none") {
+                ev.preventDefault();
+                showThemeButtonState();
+                themes.firstElementChild.focus();
+            }
+            break;
+        case "Home":
+            ev.preventDefault();
+            themes.firstElementChild.focus();
+            break;
+        case "End":
+            ev.preventDefault();
+            themes.lastElementChild.focus();
+            break;
+        // The escape key is handled in handleEscape, not here,
+        // so that pressing escape will close the menu even if it isn't focused
         }
     }