️(frontend) improve participants toggle a11y label

avoid screen reader duplication by using visual-only tooltip
This commit is contained in:
Cyril
2026-01-16 13:51:18 +01:00
committed by lebaudantoine
parent cb77688572
commit eeeb950e08
5 changed files with 33 additions and 19 deletions

View File

@@ -1,6 +1,7 @@
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { RiGroupLine, RiInfinityLine } from '@remixicon/react' import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
import { ToggleButton } from '@/primitives' import { ToggleButton } from '@/primitives'
import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
import { css } from '@/styled-system/css' import { css } from '@/styled-system/css'
import { useParticipants } from '@livekit/components-react' import { useParticipants } from '@livekit/components-react'
import { useSidePanel } from '../../../hooks/useSidePanel' import { useSidePanel } from '../../../hooks/useSidePanel'
@@ -19,6 +20,8 @@ export const ParticipantsToggle = ({
*/ */
const participants = useParticipants() const participants = useParticipants()
const numParticipants = participants?.length const numParticipants = participants?.length
const announcedCount =
numParticipants && numParticipants > 0 ? numParticipants : 1
const { isParticipantsOpen, toggleParticipants } = useSidePanel() const { isParticipantsOpen, toggleParticipants } = useSidePanel()
@@ -31,21 +34,24 @@ export const ParticipantsToggle = ({
display: 'inline-block', display: 'inline-block',
})} })}
> >
<ToggleButton <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
square <ToggleButton
variant="primaryTextDark" square
aria-label={t(tooltipLabel)} variant="primaryTextDark"
tooltip={t(tooltipLabel)} aria-label={`${t(tooltipLabel)}. ${t('count', {
isSelected={isParticipantsOpen} count: announcedCount,
onPress={(e) => { })}.`}
toggleParticipants() isSelected={isParticipantsOpen}
onPress?.(e) onPress={(e) => {
}} toggleParticipants()
data-attr={`controls-participants-${tooltipLabel}`} onPress?.(e)
{...props} }}
> data-attr={`controls-participants-${tooltipLabel}`}
<RiGroupLine /> {...props}
</ToggleButton> >
<RiGroupLine />
</ToggleButton>
</VisualOnlyTooltip>
<div <div
className={css({ className={css({
position: 'absolute', position: 'absolute',

View File

@@ -192,7 +192,9 @@
"leave": "Verlassen", "leave": "Verlassen",
"participants": { "participants": {
"open": "Alle ausblenden", "open": "Alle ausblenden",
"closed": "Alle anzeigen" "closed": "Alle anzeigen",
"count_one": "{{count}} Teilnehmer",
"count_other": "{{count}} Teilnehmer"
}, },
"tools": { "tools": {
"open": "Weitere Tools ausblenden", "open": "Weitere Tools ausblenden",

View File

@@ -192,7 +192,9 @@
"leave": "Leave", "leave": "Leave",
"participants": { "participants": {
"open": "Hide everyone", "open": "Hide everyone",
"closed": "See everyone" "closed": "See everyone",
"count_one": "{{count}} participant",
"count_other": "{{count}} participants"
}, },
"tools": { "tools": {
"open": "Hide more tools", "open": "Hide more tools",

View File

@@ -192,7 +192,9 @@
"leave": "Quitter", "leave": "Quitter",
"participants": { "participants": {
"open": "Masquer les participants", "open": "Masquer les participants",
"closed": "Afficher les participants" "closed": "Afficher les participants",
"count_one": "{{count}} participant",
"count_other": "{{count}} participants"
}, },
"tools": { "tools": {
"open": "Masquer les outils de réunion", "open": "Masquer les outils de réunion",

View File

@@ -192,7 +192,9 @@
"leave": "Vertrekken", "leave": "Vertrekken",
"participants": { "participants": {
"open": "Verberg iedereen", "open": "Verberg iedereen",
"closed": "Toon iedereen" "closed": "Toon iedereen",
"count_one": "{{count}} deelnemer",
"count_other": "{{count}} deelnemers"
}, },
"tools": { "tools": {
"open": "Meer tools verbergen", "open": "Meer tools verbergen",