From 1d6165181720a61a90ec202fec998fb7cd2ca7d3 Mon Sep 17 00:00:00 2001
From: ilantz <12483426+ilantz@users.noreply.github.com>
Date: Fri, 15 May 2026 00:09:54 -0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Fix=20appearance=20switche?=
 =?UTF-8?q?r=20accessibility=20tooltips?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                       | 23 +++++++++++++++++++
 .../header/components/desktop-menu.html       |  5 ++--
 .../header/components/mobile-menu.html        |  3 ++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index 1af7f713..da3f8a9b 100644
--- a/assets/js/appearance.js
+++ b/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) => {
diff --git a/layouts/partials/header/components/desktop-menu.html b/layouts/partials/header/components/desktop-menu.html
index 2ae3c0ef..492d8d13 100644
--- a/layouts/partials/header/components/desktop-menu.html
+++ b/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>
diff --git a/layouts/partials/header/components/mobile-menu.html b/layouts/partials/header/components/mobile-menu.html
index 7a644dbb..c48abfb2 100644
--- a/layouts/partials/header/components/mobile-menu.html
+++ b/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" }}