From f14d33aa5d61d4322a09800e2d56108492ff7435 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 2 Mar 2026 10:06:32 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Added=20ARIA=20labels?=
 =?UTF-8?q?=20to=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: vireapp <260846454+vireapp@users.noreply.github.com>
---
 src/components/room/room-client-v2.tsx | 5 ++++-
 src/components/room/video-grid.tsx     | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/room/room-client-v2.tsx b/src/components/room/room-client-v2.tsx
index b0c356e..6cabd0b 100644
--- a/src/components/room/room-client-v2.tsx
+++ b/src/components/room/room-client-v2.tsx
@@ -873,6 +873,7 @@ export function RoomClientV2({ room, user }: RoomClientV2Props) {
               size="icon"
               onClick={() => setMobileTab("none")}
               className="rounded-full"
+              aria-label="Close mobile tab"
             >
               <X className="w-6 h-6" />
             </Button>
@@ -1065,6 +1066,7 @@ export function RoomClientV2({ room, user }: RoomClientV2Props) {
                         variant="secondary"
                         onClick={copyCode}
                         className="shrink-0 bg-white/10 hover:bg-white/20 border-0"
+                        aria-label="Copy room code"
                       >
                         {copied ? (
                           <Check className="w-4 h-4 text-emerald-500" />
@@ -1219,6 +1221,7 @@ export function RoomClientV2({ room, user }: RoomClientV2Props) {
             size="icon"
             onClick={() => setMobileTab("menu")}
             className="text-white hover:bg-white/10 rounded-full"
+            aria-label="Open mobile menu"
           >
             <MoreVertical className="w-5 h-5" />
           </Button>
@@ -1562,7 +1565,7 @@ export function RoomClientV2({ room, user }: RoomClientV2Props) {
            <div className="absolute right-4 top-24 bottom-24 w-[320px] z-[60] flex flex-col animate-in fade-in slide-in-from-right-10 duration-500 bg-black/80 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden">
                <div className="p-4 border-b border-white/5 bg-white/5 flex items-center justify-between shrink-0">
                   <h2 className="text-lg font-medium text-white">People</h2>
-                  <Button variant="ghost" size="icon" onClick={() => setIsPeopleOverlayOpen(false)} className="h-8 w-8 text-white/50 hover:text-white rounded-full hover:bg-white/10">
+                  <Button variant="ghost" size="icon" onClick={() => setIsPeopleOverlayOpen(false)} className="h-8 w-8 text-white/50 hover:text-white rounded-full hover:bg-white/10" aria-label="Close people overlay">
                      <X className="w-4 h-4" />
                   </Button>
                </div>
diff --git a/src/components/room/video-grid.tsx b/src/components/room/video-grid.tsx
index bc3ebd1..69ae125 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(); }} className={cn("p-2 rounded-full transition-all active:scale-95", isMicOn ? "bg-emerald-500 text-white" : "bg-red-500 text-white")} aria-label={isMicOn ? "Mute Microphone" : "Unmute Microphone"}>
                                 {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(); }} className={cn("p-2 rounded-full transition-all active:scale-95", isCamOn ? "bg-white/10 text-white" : "bg-red-500 text-white")} aria-label={isCamOn ? "Turn Camera Off" : "Turn Camera On"}>
                                 {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(); }} className="p-2 rounded-full bg-white/10 text-white transition-all active:scale-95" aria-label="Share Screen">
                                 <Monitor className="w-5 h-5" />
                             </button>
                       </div>