♿️ Fix appearance switcher accessibility tooltips

Dynamically update the appearance switcher accessibility labels and tooltips using the native i18n variables so that the UI correctly reflects the user's localized language instead of hardcoded English strings.

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