Auto merge of #78876 - GuillaumeGomez:better-setting-keyboard-ux, r=jyn514

Make keyboard interactions in the settings menu more pleasant

#78868 improved the keyboard interactions with the settings page. This PR goes a bit further by allowing more than just "space" to toggle the checkboxes.

r? `@jyn514`

1 files changed, 39 insertions, 33 deletions

diff --git a/src/librustdoc/html/static/settings.js b/src/librustdoc/html/static/settings.js
index da3378ccf0d..bc14420232c 100644
--- a/src/librustdoc/html/static/settings.js
+++ b/src/librustdoc/html/static/settings.js
@@ -1,5 +1,5 @@
 // Local js definitions:
-/* global getCurrentValue, updateLocalStorage, updateSystemTheme */
+/* global getCurrentValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
 
 (function () {
     function changeSetting(settingName, value) {
@@ -14,41 +14,47 @@
         }
     }
 
-    function setEvents() {
-        var elems = {
-            toggles: document.getElementsByClassName("slider"),
-            selects: document.getElementsByClassName("select-wrapper")
-        };
-        var i;
-
-        if (elems.toggles && elems.toggles.length > 0) {
-            for (i = 0; i < elems.toggles.length; ++i) {
-                var toggle = elems.toggles[i].previousElementSibling;
-                var settingId = toggle.id;
-                var settingValue = getSettingValue(settingId);
-                if (settingValue !== null) {
-                    toggle.checked = settingValue === "true";
-                }
-                toggle.onchange = function() {
-                    changeSetting(this.id, this.checked);
-                };
-            }
+    function handleKey(ev) {
+        // Don't interfere with browser shortcuts
+        if (ev.ctrlKey || ev.altKey || ev.metaKey) {
+            return;
+        }
+        switch (getVirtualKey(ev)) {
+            case "Enter":
+            case "Return":
+            case "Space":
+                ev.target.checked = !ev.target.checked;
+                ev.preventDefault();
+                break;
         }
+    }
 
-        if (elems.selects && elems.selects.length > 0) {
-            for (i = 0; i < elems.selects.length; ++i) {
-                var select = elems.selects[i].getElementsByTagName("select")[0];
-                var settingId = select.id;
-                var settingValue = getSettingValue(settingId);
-                if (settingValue !== null) {
-                    select.value = settingValue;
-                }
-                select.onchange = function() {
-                    changeSetting(this.id, this.value);
-                };
+    function setEvents() {
+        onEachLazy(document.getElementsByClassName("slider"), function(elem) {
+            var toggle = elem.previousElementSibling;
+            var settingId = toggle.id;
+            var settingValue = getSettingValue(settingId);
+            if (settingValue !== null) {
+                toggle.checked = settingValue === "true";
             }
-        }
+            toggle.onchange = function() {
+                changeSetting(this.id, this.checked);
+            };
+            toggle.onkeyup = handleKey;
+            toggle.onkeyrelease = handleKey;
+        });
+        onEachLazy(document.getElementsByClassName("select-wrapper"), function(elem) {
+            var select = elem.getElementsByTagName("select")[0];
+            var settingId = select.id;
+            var settingValue = getSettingValue(settingId);
+            if (settingValue !== null) {
+                select.value = settingValue;
+            }
+            select.onchange = function() {
+                changeSetting(this.id, this.value);
+            };
+        });
     }
 
-    setEvents();
+    window.addEventListener("DOMContentLoaded", setEvents);
 })();