🎨 Palette: Make mobile theme toggle accessible

.jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-03-13 - Accessible Mobile Theme Toggles in Astro
+**Learning:** In Astro components, mobile toggles (like theme switchers) that use bare SVG `<Icon>` elements lack keyboard focusability and semantic structure, which makes them inaccessible. When combined with Astro's View Transitions, adding standard `<button>` wrappers with dynamic ARIA states (`aria-expanded`, `aria-controls`) is critical. Additionally, dynamic color classes triggered by Javascript must correctly target the child `svg` element rather than the new `button` container to maintain intended visual states.
+**Action:** When implementing or refactoring icon-based interactive elements, always wrap the `<Icon>` in a semantic `<button>` with `aria-label`, `title`, and appropriate ARIA states. Add focus-visible utilities (`focus-visible:ring-2 focus-visible:ring-blue-500 rounded focus:outline-none`) to ensure keyboard accessibility, and ensure any stateful JS class toggles target the correct DOM nodes within the new structure.

src/layouts/AppLayout.astro

@@ -146,11 +146,19 @@ const canonicalURL = new URL(Astro.url).href;
               </li>
             ))}
             <li class="sm:hidden">
-              <Icon
-                name="mdi:theme-light-dark"
-                class="cursor-pointer text-xl text-zinc-300"
+              <button
                 id="light-dark-selector"
-              />
+                aria-label="Toggle theme selector"
+                title="Toggle theme selector"
+                aria-expanded="false"
+                aria-controls="theme-selector"
+                class="cursor-pointer flex items-center justify-center rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              >
+                <Icon
+                  name="mdi:theme-light-dark"
+                  class="text-xl text-zinc-300 transition-colors"
+                />
+              </button>
             </li>
           </ul>
           <Theme id="theme-selector" addClass="hidden sm:flex pt-6 sm:pt-0" />
@@ -184,16 +192,23 @@ const canonicalURL = new URL(Astro.url).href;
     if (selector && container) {
       selector.addEventListener("click", () => {
         const isHidden = container.classList.contains("hidden");
+        const icon = selector.querySelector("svg");
         if (isHidden) {
           container.classList.add("flex");
           container.classList.remove("hidden");
-          selector.classList.add("text-blue-500", "dark:text-blue-400");
-          selector.classList.remove("text-zinc-300");
+          if (icon) {
+            icon.classList.add("text-blue-500", "dark:text-blue-400");
+            icon.classList.remove("text-zinc-300");
+          }
+          selector.setAttribute("aria-expanded", "true");
         } else {
           container.classList.add("hidden");
           container.classList.remove("flex");
-          selector.classList.add("text-zinc-300");
-          selector.classList.remove("text-blue-500", "dark:text-blue-400");
+          if (icon) {
+            icon.classList.add("text-zinc-300");
+            icon.classList.remove("text-blue-500", "dark:text-blue-400");
+          }
+          selector.setAttribute("aria-expanded", "false");
         }
       });
     }