Add label to theme-switcher button. (#543)

samcunliffe · web-flow · commit 5865e3880def · 2025-06-05T19:55:43.000+01:00
Fixes - #537 as suggested by @jamesprime by adding an [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) to labelless button. Confirmed with macOS's "VoiceOver" screen reader... ![Screenshot 2025-06-03 at 13 25 10](https://github.com/user-attachments/assets/93c86456-feca-4ff4-91d4-4b8c4afd5797) --- As with the ☼ / ☾ it's a bit WET because it needs declaring and then the same lines appear in the switch conditional.
diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
@@ -1,15 +1,19 @@
-<button class="btn js-toggle-dark-mode">☼</button>
+<button class="btn js-toggle-dark-mode" aria-label="Switch to light mode">
+  ☼
+</button>
 
 <script>
   const toggleDarkMode = document.querySelector(".js-toggle-dark-mode");
   jtd.addEvent(toggleDarkMode, "click", function () {
     if (jtd.getTheme() === "light") {
       jtd.setTheme("dark");
       toggleDarkMode.textContent = "☼";
+      toggleDarkMode.ariaLabel = "Switch to light mode";
       localStorage.setItem("theme", "dark");
     } else {
       jtd.setTheme("light");
       toggleDarkMode.textContent = "☾";
+      toggleDarkMode.ariaLabel = "Switch to dark mode";
       localStorage.setItem("theme", "light");
     }
   });
