From eeeb950e08ad71ad72cb1074c2a104c776e7b74d Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 16 Jan 2026 13:51:18 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20partic?=
 =?UTF-8?q?ipants=20toggle=20a11y=20label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

avoid screen reader duplication by using visual-only tooltip
---
 .../Participants/ParticipantsToggle.tsx       | 36 +++++++++++--------
 src/frontend/src/locales/de/rooms.json        |  4 ++-
 src/frontend/src/locales/en/rooms.json        |  4 ++-
 src/frontend/src/locales/fr/rooms.json        |  4 ++-
 src/frontend/src/locales/nl/rooms.json        |  4 ++-
 5 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
index d5c6cdad..e9e7eb1f 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
@@ -19,6 +20,8 @@ export const ParticipantsToggle = ({
    */
   const participants = useParticipants()
   const numParticipants = participants?.length
+  const announcedCount =
+    numParticipants && numParticipants > 0 ? numParticipants : 1
 
   const { isParticipantsOpen, toggleParticipants } = useSidePanel()
 
@@ -31,21 +34,24 @@ export const ParticipantsToggle = ({
         display: 'inline-block',
       })}
     >
-      <ToggleButton
-        square
-        variant="primaryTextDark"
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isParticipantsOpen}
-        onPress={(e) => {
-          toggleParticipants()
-          onPress?.(e)
-        }}
-        data-attr={`controls-participants-${tooltipLabel}`}
-        {...props}
-      >
-        <RiGroupLine />
-      </ToggleButton>
+      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
+        <ToggleButton
+          square
+          variant="primaryTextDark"
+          aria-label={`${t(tooltipLabel)}. ${t('count', {
+            count: announcedCount,
+          })}.`}
+          isSelected={isParticipantsOpen}
+          onPress={(e) => {
+            toggleParticipants()
+            onPress?.(e)
+          }}
+          data-attr={`controls-participants-${tooltipLabel}`}
+          {...props}
+        >
+          <RiGroupLine />
+        </ToggleButton>
+      </VisualOnlyTooltip>
       <div
         className={css({
           position: 'absolute',
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 60ed5c36..60823591 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -192,7 +192,9 @@
     "leave": "Verlassen",
     "participants": {
       "open": "Alle ausblenden",
-      "closed": "Alle anzeigen"
+      "closed": "Alle anzeigen",
+      "count_one": "{{count}} Teilnehmer",
+      "count_other": "{{count}} Teilnehmer"
     },
     "tools": {
       "open": "Weitere Tools ausblenden",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 70842a79..d7ee959b 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -192,7 +192,9 @@
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",
-      "closed": "See everyone"
+      "closed": "See everyone",
+      "count_one": "{{count}} participant",
+      "count_other": "{{count}} participants"
     },
     "tools": {
       "open": "Hide more tools",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 98543bc7..2874a42b 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -192,7 +192,9 @@
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",
-      "closed": "Afficher les participants"
+      "closed": "Afficher les participants",
+      "count_one": "{{count}} participant",
+      "count_other": "{{count}} participants"
     },
     "tools": {
       "open": "Masquer les outils de réunion",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index e8b571bc..5e899bdb 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -192,7 +192,9 @@
     "leave": "Vertrekken",
     "participants": {
       "open": "Verberg iedereen",
-      "closed": "Toon iedereen"
+      "closed": "Toon iedereen",
+      "count_one": "{{count}} deelnemer",
+      "count_other": "{{count}} deelnemers"
     },
     "tools": {
       "open": "Meer tools verbergen",