From bb2db9d7992a1d1d7036d7f2da54f8e22457b0c7 Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Mon, 13 Jul 2026 16:54:18 +0000
Subject: [PATCH 1/3] feat(kids): enhance keyboard accessibility for Kids UI
 header elements

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 .../kids/layout/background-music.tsx          |  3 ++-
 src/components/kids/layout/kids-header.tsx    | 25 +++++++++++--------
 src/components/kids/layout/settings-modal.tsx |  4 ++-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/kids/layout/background-music.tsx b/src/components/kids/layout/background-music.tsx
index 1c815be3..d76f67a4 100644
--- a/src/components/kids/layout/background-music.tsx
+++ b/src/components/kids/layout/background-music.tsx
@@ -175,7 +175,8 @@ export function MusicButton() {
   return (
     <button
       onClick={toggleMusic}
-      className="pixel-btn pixel-btn-amber flex h-8 items-center px-2 py-1.5"
+      className="pixel-btn pixel-btn-amber flex h-8 items-center px-2 py-1.5 focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
+      aria-pressed={isPlaying}
       aria-label={labelText}
       title={labelText}
     >
diff --git a/src/components/kids/layout/kids-header.tsx b/src/components/kids/layout/kids-header.tsx
index b2427ffe..ec34bb27 100644
--- a/src/components/kids/layout/kids-header.tsx
+++ b/src/components/kids/layout/kids-header.tsx
@@ -82,7 +82,7 @@ export function KidsHeader() {
             <SettingsButton />
             <a
               href="/kids"
-              className="pixel-btn flex h-8 items-center px-3 py-1.5 text-sm"
+              className="pixel-btn flex h-8 items-center px-3 py-1.5 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
               aria-label={t("header.home")}
               title={t("header.home")}
             >
@@ -90,7 +90,7 @@ export function KidsHeader() {
             </a>
             <Link
               href="/kids/map"
-              className="pixel-btn pixel-btn-green flex h-8 items-center px-3 py-1.5 text-sm"
+              className="pixel-btn pixel-btn-green flex h-8 items-center px-3 py-1.5 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
               aria-label={t("level.map")}
               title={t("level.map")}
             >
@@ -99,7 +99,7 @@ export function KidsHeader() {
             {/* Back to main site */}
             <a
               href="/"
-              className="pixel-btn pixel-btn-amber hidden h-8 items-center px-3 py-1.5 text-sm md:flex"
+              className="pixel-btn pixel-btn-amber hidden h-8 items-center px-3 py-1.5 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none md:flex"
             >
               {t("header.mainSite")}
             </a>
@@ -109,7 +109,9 @@ export function KidsHeader() {
           <div className="relative sm:hidden" ref={menuRef}>
             <button
               onClick={() => setMenuOpen(!menuOpen)}
-              className="pixel-btn flex h-8 items-center px-3 py-1.5"
+              className="pixel-btn flex h-8 items-center px-3 py-1.5 focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
+              aria-expanded={menuOpen}
+              aria-controls="mobile-menu"
               aria-label={t("header.menu") || "Menu"}
               title={t("header.menu") || "Menu"}
             >
@@ -118,7 +120,10 @@ export function KidsHeader() {
 
             {/* Mobile dropdown menu */}
             {menuOpen && (
-              <div className="animate-in fade-in slide-in-from-top-2 absolute top-full right-0 z-50 mt-2 w-48 rounded-lg border-4 border-[#8B4513] bg-[#2C1810] shadow-xl duration-200">
+              <div
+                id="mobile-menu"
+                className="animate-in fade-in slide-in-from-top-2 absolute top-full right-0 z-50 mt-2 w-48 rounded-lg border-4 border-[#8B4513] bg-[#2C1810] shadow-xl duration-200"
+              >
                 <div className="flex flex-col gap-2 p-2">
                   {/* Progress - mobile only */}
                   <div className="pixel-border-sm flex items-center justify-center gap-1 border-2 border-[#8B4513] bg-[#4A3728] px-3 py-2">
@@ -134,23 +139,23 @@ export function KidsHeader() {
 
                   <a
                     href="/kids"
-                    className="pixel-btn flex items-center justify-center gap-2 px-3 py-2 text-sm"
+                    className="pixel-btn flex items-center justify-center gap-2 px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
                     onClick={() => setMenuOpen(false)}
                   >
-                    <PixelHomeIcon />
+                    <PixelHomeIcon aria-hidden="true" />
                     {t("header.home")}
                   </a>
                   <Link
                     href="/kids/map"
-                    className="pixel-btn pixel-btn-green flex items-center justify-center gap-2 px-3 py-2 text-sm"
+                    className="pixel-btn pixel-btn-green flex items-center justify-center gap-2 px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
                     onClick={() => setMenuOpen(false)}
                   >
-                    <PixelMapIcon />
+                    <PixelMapIcon aria-hidden="true" />
                     {t("level.map")}
                   </Link>
                   <a
                     href="/"
-                    className="pixel-btn pixel-btn-amber flex items-center justify-center px-3 py-2 text-sm"
+                    className="pixel-btn pixel-btn-amber flex items-center justify-center px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
                     onClick={() => setMenuOpen(false)}
                   >
                     {t("header.mainSite")}
diff --git a/src/components/kids/layout/settings-modal.tsx b/src/components/kids/layout/settings-modal.tsx
index 35e94dcd..318eddd2 100644
--- a/src/components/kids/layout/settings-modal.tsx
+++ b/src/components/kids/layout/settings-modal.tsx
@@ -40,9 +40,11 @@ export function SettingsButton() {
           setIsOpen(true);
           analyticsKids.openSettings();
         }}
-        className="pixel-btn pixel-btn-purple flex h-8 items-center px-3 py-1.5 text-sm"
+        className="pixel-btn pixel-btn-purple flex h-8 items-center px-3 py-1.5 text-sm focus-visible:ring-2 focus-visible:ring-[#FFD700] focus-visible:ring-offset-2 focus-visible:outline-none"
         aria-label={t("title") || "Settings"}
         title={t("title") || "Settings"}
+        aria-expanded={isOpen}
+        aria-haspopup="dialog"
       >
         <PixelSettingsIcon aria-hidden="true" />
       </button>

From 55d9af4b11d7a3b8869b1b5269ac2528d2a55198 Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Mon, 13 Jul 2026 16:57:58 +0000
Subject: [PATCH 2/3] feat(kids): enhance keyboard accessibility for Kids UI
 header elements

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

From 7bc92c2b68dc6c7dbe8c9191d1c9f097fa714a96 Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Mon, 13 Jul 2026 17:01:15 +0000
Subject: [PATCH 3/3] feat(kids): enhance keyboard accessibility for Kids UI
 header elements

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>