Merge pull request #2945 from ilantz/fix-appearance-tooltips

♿️ Fix appearance switcher accessibility tooltips

assets/js/appearance.js

@@ -54,12 +54,33 @@ window.addEventListener("DOMContentLoaded", (event) => {
   const switcher = document.getElementById("appearance-switcher");
   const switcherMobile = document.getElementById("appearance-switcher-mobile");
 
+  // Load the i18n translations for the tooltips
+  const darkLabel = '{{ i18n "footer.dark_appearance" }}';
+  const lightLabel = '{{ i18n "footer.light_appearance" }}';
+
   updateMeta();
   this.updateLogo?.(getTargetAppearance());
 
   // Initialize mermaid theme on page load
   updateMermaidTheme();
 
+  // Helper to update the tooltip depending on the current mode
+  const updateTooltip = (targetAppearance) => {
+    // If target is dark, the next action will be switching to light
+    const label = targetAppearance === "dark" ? lightLabel : darkLabel;
+    if (switcher) {
+      switcher.setAttribute("aria-label", label);
+      switcher.setAttribute("title", label);
+    }
+    if (switcherMobile) {
+      switcherMobile.setAttribute("aria-label", label);
+      switcherMobile.setAttribute("title", label);
+    }
+  };
+
+  // Set initial tooltip on load
+  updateTooltip(getTargetAppearance());
+
   if (switcher) {
     switcher.addEventListener("click", () => {
       document.documentElement.classList.toggle("dark");
@@ -70,6 +91,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
       );
       updateMeta();
       updateMermaidTheme();
+      updateTooltip(targetAppearance);
       this.updateLogo?.(targetAppearance);
     });
     switcher.addEventListener("contextmenu", (event) => {
@@ -87,6 +109,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
       );
       updateMeta();
       updateMermaidTheme();
+      updateTooltip(targetAppearance);
       this.updateLogo?.(targetAppearance);
     });
     switcherMobile.addEventListener("contextmenu", (event) => {

layouts/partials/header/components/desktop-menu.html

@@ -24,9 +24,10 @@
     <div class="flex items-center">
       <button
         id="appearance-switcher"
-        aria-label="Dark mode switcher"
+        aria-label="{{ i18n "footer.dark_appearance" }}"
         type="button"
-        class="text-base bf-icon-color-hover">
+        class="text-base bf-icon-color-hover"
+        title="{{ i18n "footer.dark_appearance" }}">
         <div class="flex items-center justify-center dark:hidden">
           {{ partial "icon.html" "moon" }}
         </div>

layouts/partials/header/components/mobile-menu.html

@@ -13,7 +13,8 @@
     <button
       id="appearance-switcher-mobile"
       type="button"
-      aria-label="Dark mode switcher"
+      aria-label="{{ i18n "footer.dark_appearance" }}"
+      title="{{ i18n "footer.dark_appearance" }}"
       class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
       <div class="dark:hidden">
         {{ partial "icon.html" "moon" }}