♿️(frontend) improve participants toggle a11y label

avoid screen reader duplication by using visual-only tooltip

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
+      <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
         className={css({
           position: 'absolute',

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",

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",

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",

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",