From 6f1ddf82d87331d8ad277df151e30f2da592595a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 5 Mar 2026 08:50:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20ARIA=20labels?=
 =?UTF-8?q?=20to=20Video=20Grid=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds dynamic aria-labels to the microphone, camera, and screen-sharing controls within `VideoGrid` component. This ensures screen readers can accurately interpret the state and purpose of these icon-only buttons.

Co-authored-by: vireapp <260846454+vireapp@users.noreply.github.com>
---
 .Jules/palette.md                  | 3 +++
 src/components/room/video-grid.tsx | 9 ++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..401025d
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-03-20 - Icon-Only Button ARIA Labels
+**Learning:** Found a recurring pattern in `VideoGrid` where icon-only control buttons for Mic, Cam, and Screen Share lacked proper `aria-label` attributes, making them inaccessible to screen readers. They also had dynamic states (on/off) which should be reflected in the label.
+**Action:** Always ensure that any button containing only an icon component (like those from `lucide-react`) has a descriptive, dynamic `aria-label` that reflects its current state and action.
diff --git a/src/components/room/video-grid.tsx b/src/components/room/video-grid.tsx
index bc3ebd1..7571573 100644
--- a/src/components/room/video-grid.tsx
+++ b/src/components/room/video-grid.tsx
@@ -85,13 +85,13 @@ export function VideoGrid({
                 {/* In-Card Controls - Mobile Only (Bottom Bar handles Desktop) */}
                 <div className="md:hidden absolute bottom-3 left-0 right-0 flex justify-center items-center z-20">
                       <div className="flex gap-3 p-2 bg-black/60 backdrop-blur-md rounded-full border border-white/10 shadow-xl">
-                            <button onClick={(e) => { e.stopPropagation(); toggleMic(); }} className={cn("p-2 rounded-full transition-all active:scale-95", isMicOn ? "bg-emerald-500 text-white" : "bg-red-500 text-white")}>
+                            <button onClick={(e) => { e.stopPropagation(); toggleMic(); }} aria-label={isMicOn ? "Mute Microphone" : "Unmute Microphone"} className={cn("p-2 rounded-full transition-all active:scale-95", isMicOn ? "bg-emerald-500 text-white" : "bg-red-500 text-white")}>
                                 {isMicOn ? <Mic className="w-5 h-5" /> : <MicOff className="w-5 h-5" />}
                             </button>
-                            <button onClick={(e) => { e.stopPropagation(); toggleCam(); }} className={cn("p-2 rounded-full transition-all active:scale-95", isCamOn ? "bg-white/10 text-white" : "bg-red-500 text-white")}>
+                            <button onClick={(e) => { e.stopPropagation(); toggleCam(); }} aria-label={isCamOn ? "Turn Camera Off" : "Turn Camera On"} className={cn("p-2 rounded-full transition-all active:scale-95", isCamOn ? "bg-white/10 text-white" : "bg-red-500 text-white")}>
                                 {isCamOn ? <Video className="w-5 h-5" /> : <VideoOff className="w-5 h-5" />}
                             </button>
-                             <button onClick={(e) => { e.stopPropagation(); toggleScreen(); }} className="p-2 rounded-full bg-white/10 text-white transition-all active:scale-95">
+                             <button onClick={(e) => { e.stopPropagation(); toggleScreen(); }} aria-label="Share Screen" className="p-2 rounded-full bg-white/10 text-white transition-all active:scale-95">
                                 <Monitor className="w-5 h-5" />
                             </button>
                       </div>
@@ -121,6 +121,7 @@ export function VideoGrid({
                         !canToggleMic && "opacity-50 cursor-not-allowed"
                     )}
                     title={isMicOn ? "Mute Microphone" : "Unmute Microphone"}
+                    aria-label={isMicOn ? "Mute Microphone" : "Unmute Microphone"}
                 >
                     {isMicOn ? <Mic className="w-5 h-5" /> : <MicOff className="w-5 h-5" />}
                 </button>
@@ -136,6 +137,7 @@ export function VideoGrid({
                         !canToggleCam && "opacity-50 cursor-not-allowed"
                     )}
                     title={isCamOn ? "Turn Camera Off" : "Turn Camera On"}
+                    aria-label={isCamOn ? "Turn Camera Off" : "Turn Camera On"}
                 >
                     {isCamOn ? <Video className="w-5 h-5" /> : <VideoOff className="w-5 h-5" />}
                 </button>
@@ -148,6 +150,7 @@ export function VideoGrid({
                          !canToggleScreen && "opacity-50 cursor-not-allowed"
                     )}
                     title="Share Screen"
+                    aria-label="Share Screen"
                 >
                     <Monitor className="w-5 h-5" />
                 </button>