From dce495e71d13c50fb5d2d57698fb350d72708609 Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Wed, 3 Jan 2024 18:43:51 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20feat(a11y):=20add=20keyboa?=
 =?UTF-8?q?rd=20accessibility=20to=20theme=20toggler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/themeSwitcher.js             | 15 +++++++++++++++
 static/js/themeSwitcher.min.js         |  2 +-
 templates/partials/theme_switcher.html |  2 ++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js
index b5afa45..c5ddf95 100644
--- a/static/js/themeSwitcher.js
+++ b/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);
diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js
index 5c9561b..e563ad3 100644
--- a/static/js/themeSwitcher.min.js
+++ b/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);
diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html
index 7fba81a..cb4c93b 100644
--- a/templates/partials/theme_switcher.html
+++ b/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 }}">