From db885e1391b23ba0824ec6ebca4fbf54f06e62cc Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Thu, 23 Jul 2026 17:05:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20music=20tog?=
 =?UTF-8?q?gle=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added aria-pressed states and focus styles to the music toggle buttons, and hid decorative emojis from screen readers in the volume slider toggle.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 src/components/kids/layout/background-music.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/kids/layout/background-music.tsx b/src/components/kids/layout/background-music.tsx
index 1c815be3..2deed808 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-offset-2 focus-visible:outline-none"
+      aria-pressed={isPlaying}
       aria-label={labelText}
       title={labelText}
     >
@@ -197,11 +198,20 @@ export function MusicVolumeSlider() {
       <div className="flex items-center justify-between">
         <button
           onClick={() => setIsPlaying(!isPlaying)}
-          className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
+          aria-pressed={isPlaying}
+          className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none ${
             isPlaying ? "bg-[#22C55E] text-white" : "bg-gray-200 text-gray-600"
           }`}
         >
-          {isPlaying ? "🔊 On" : "🔇 Off"}
+          {isPlaying ? (
+            <>
+              <span aria-hidden="true">🔊</span> On
+            </>
+          ) : (
+            <>
+              <span aria-hidden="true">🔇</span> Off
+            </>
+          )}
         </button>
         <span className="text-sm text-[#5D4037]">{Math.round(volume * 100)}%</span>
       </div>