️(frontend) improve mic button accessibility in participant list

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.
This commit is contained in:
lebaudantoine
2025-04-22 16:34:00 +02:00
committed by aleb_the_flash
parent d105603a9b
commit 9cb7b0f154

View File

@@ -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>