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`

Author: bors

src/librustdoc/html/static/main.js

@@ -40,6 +40,29 @@ if (!DOMTokenList.prototype.remove) {
     };
 }
 
+
+// Gets the human-readable string for the virtual-key code of the
+// given KeyboardEvent, ev.
+//
+// This function is meant as a polyfill for KeyboardEvent#key,
+// since it is not supported in IE 11 or Chrome for Android. We also test for
+// KeyboardEvent#keyCode because the handleShortcut handler is
+// also registered for the keydown event, because Blink doesn't fire
+// keypress on hitting the Escape key.
+//
+// So I guess you could say things are getting pretty interoperable.
+function getVirtualKey(ev) {
+    if ("key" in ev && typeof ev.key != "undefined") {
+        return ev.key;
+    }
+
+    var c = ev.charCode || ev.keyCode;
+    if (c == 27) {
+        return "Escape";
+    }
+    return String.fromCharCode(c);
+}
+
 function getSearchInput() {
     return document.getElementsByClassName("search-input")[0];
 }
@@ -326,28 +349,6 @@ function defocusSearchBar() {
         }
     }
 
-    // Gets the human-readable string for the virtual-key code of the
-    // given KeyboardEvent, ev.
-    //
-    // This function is meant as a polyfill for KeyboardEvent#key,
-    // since it is not supported in Trident.  We also test for
-    // KeyboardEvent#keyCode because the handleShortcut handler is
-    // also registered for the keydown event, because Blink doesn't fire
-    // keypress on hitting the Escape key.
-    //
-    // So I guess you could say things are getting pretty interoperable.
-    function getVirtualKey(ev) {
-        if ("key" in ev && typeof ev.key != "undefined") {
-            return ev.key;
-        }
-
-        var c = ev.charCode || ev.keyCode;
-        if (c == 27) {
-            return "Escape";
-        }
-        return String.fromCharCode(c);
-    }
-
     function getHelpElement() {
         buildHelperPopup();
         return document.getElementById("help");

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);
 })();