♿️ 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);

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 }}">