♿️ feat(a11y): add keyboard accessibility to theme toggler

static/js/themeSwitcher.js

@@ -57,3 +57,18 @@ themeSwitcher.setAttribute('aria-pressed', currentTheme === 'dark');
 if (localStorage.getItem('theme')) {
     themeResetter.classList.add('has-custom-theme');
 }
+
+// Function to handle keydown event on theme toggler buttons.
+function handleThemeTogglerKeydown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        if (event.target === themeSwitcher) {
+            switchTheme();
+        } else if (event.target === themeResetter) {
+            resetTheme();
+        }
+    }
+}
+
+themeSwitcher.addEventListener('keydown', handleThemeTogglerKeydown);
+themeResetter.addEventListener('keydown', handleThemeTogglerKeydown);

static/js/themeSwitcher.min.js

@@ -1 +1 @@
-const themeSwitcher=document.querySelector(".theme-switcher"),themeResetter=document.querySelector(".theme-resetter"),defaultTheme=document.documentElement.getAttribute("data-default-theme");function getSystemThemePreference(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme")||getSystemThemePreference();function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,themeSwitcher.setAttribute("aria-pressed","dark"===e),t?(localStorage.setItem("theme",e),themeResetter.classList.add("has-custom-theme")):(localStorage.removeItem("theme"),themeResetter.classList.remove("has-custom-theme")),window.dispatchEvent(new CustomEvent("themeChanged",{detail:{theme:e}}))}function resetTheme(){setTheme(defaultTheme||getSystemThemePreference())}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme),themeResetter.addEventListener("click",resetTheme),defaultTheme||window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")}),themeSwitcher.setAttribute("aria-pressed","dark"===currentTheme),localStorage.getItem("theme")&&themeResetter.classList.add("has-custom-theme");
+const a=document.querySelector(".theme-switcher"),r=document.querySelector(".theme-resetter"),e=document.documentElement.getAttribute("data-default-theme");function t(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}let d=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme")||t();function n(e,t=!1){document.documentElement.setAttribute("data-theme",e),d=e,a.setAttribute("aria-pressed","dark"===e),t?(localStorage.setItem("theme",e),r.classList.add("has-custom-theme")):(localStorage.removeItem("theme"),r.classList.remove("has-custom-theme")),window.dispatchEvent(new CustomEvent("themeChanged",{detail:{theme:e}}))}function c(){n(e||t())}function m(){n("dark"===d?"light":"dark",!0)}function o(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.target===a?m():e.target===r&&c())}a.addEventListener("click",m),r.addEventListener("click",c),e||window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{n(e.matches?"dark":"light")}),a.setAttribute("aria-pressed","dark"===d),localStorage.getItem("theme")&&r.classList.add("has-custom-theme"),a.addEventListener("keydown",o),r.addEventListener("keydown",o);

templates/partials/theme_switcher.html

@@ -11,6 +11,7 @@
     <div
         title="{{ title_label }}"
         class="theme-switcher"
+        tabindex="0"
         role="button"
         aria-label="{{ aria_label }}"
         aria-pressed="false">
@@ -21,6 +22,7 @@
     <div
         title="{{ reset_str }}"
         class="theme-resetter"
+        tabindex="0"
         role="button"
         aria-hidden="true"
         aria-label="{{ reset_str }}">