From ac429bb11d04c933790c824836e18a9eb32b90ee Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 17 Mar 2026 04:31:04 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Language=20?=
 =?UTF-8?q?Switcher=20UX/Accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Replaced non-semantic `<span>` tags with `onClick` handlers with accessible `<button>` elements.
- Added `focus-visible:outline` utility classes to support clear visual indicators during keyboard navigation.
- Added descriptive `aria-label`s to explicitly state the language being switched to.
- Wrapped the decorative slash (`/`) separator with `aria-hidden="true"` to prevent it from being read by screen readers.
- Kept changes strictly under 50 lines and used existing CSS classes.

Co-authored-by: Twinber <5513621+Twinber@users.noreply.github.com>
---
 .Jules/palette.md                      |  0
 src/components/ui/LanguageSwitcher.tsx | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ui/LanguageSwitcher.tsx b/src/components/ui/LanguageSwitcher.tsx
index c9e1b52..8ab79c4 100644
--- a/src/components/ui/LanguageSwitcher.tsx
+++ b/src/components/ui/LanguageSwitcher.tsx
@@ -9,8 +9,21 @@ export const LanguageSwitcher: React.FC = () => {
 
     return (
         <div className="flex justify-end text-right">
-            <span className="cursor-pointer" onClick={() => handleLanguageChange('en')}>EN</span> /
-            <span className="cursor-pointer" onClick={() => handleLanguageChange('es')}>ES</span>
+            <button
+                className="cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
+                onClick={() => handleLanguageChange('en')}
+                aria-label="Switch to English"
+            >
+                EN
+            </button>
+            <span aria-hidden="true" className="mx-1">/</span>
+            <button
+                className="cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
+                onClick={() => handleLanguageChange('es')}
+                aria-label="Switch to Spanish"
+            >
+                ES
+            </button>
         </div>
     )
 }