From 9cb7b0f154796b612df1e7c8d21e055c1f7957be Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 22 Apr 2025 16:34:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20mic=20?=
 =?UTF-8?q?button=20accessibility=20in=20participant=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add aria-label to microphone buttons in participant list to clearly indicate
mute functionality for current user and other participants. Set
aria-hidden on SVG icons to prevent redundant screen reader announcements.
---
 .../Participants/ParticipantListItem.tsx       | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index 2fea4e2e..11d483ce 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -33,19 +33,20 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
   const [isAlertOpen, setIsAlertOpen] = useState(false)
   const name = participant.name || participant.identity
 
+  const label = isLocal(participant)
+    ? t('participants.muteYourself')
+    : t('participants.muteParticipant', {
+        name,
+      })
+
   return (
     <>
       <Button
         square
         variant="greyscale"
         size="sm"
-        tooltip={
-          isLocal(participant)
-            ? t('participants.muteYourself')
-            : t('participants.muteParticipant', {
-                name,
-              })
-        }
+        tooltip={label}
+        aria-label={label}
         isDisabled={isMuted}
         onPress={() =>
           !isMuted && isLocal(participant)
@@ -55,7 +56,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
         data-attr="participants-mute"
       >
         {isMuted ? (
-          <RiMicOffFill color={'gray'} />
+          <RiMicOffFill color={'gray'} aria-hidden={true} />
         ) : (
           <RiMicFill
             className={css({
@@ -64,6 +65,7 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
                 ? 'pulse_background 800ms infinite'
                 : undefined,
             })}
+            aria-hidden={true}
           />
         )}
       </Button>