From a493662e7952049bbcf77c8c80d2c2b90d44d625 Mon Sep 17 00:00:00 2001
From: billlzzz10 <208072329+billlzzz10@users.noreply.github.com>
Date: Tue, 21 Jul 2026 17:00:15 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibility?=
 =?UTF-8?q?=20attributes=20to=20music=20toggle=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added aria-pressed attribute to represent active state
- Wrapped decorative emojis in span with aria-hidden
- Added explicit focus-visible styles for keyboard accessibility

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

diff --git a/src/components/kids/layout/background-music.tsx b/src/components/kids/layout/background-music.tsx
index 1c815be3..01d3a6b9 100644
--- a/src/components/kids/layout/background-music.tsx
+++ b/src/components/kids/layout/background-music.tsx
@@ -197,11 +197,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={`focus-visible:ring-agent-cyan 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>