Improve participants alternative text for screen reader users (#15204)

* add the participants count to the aria label and fix the accessibility toggle for the participants button

---------

Co-authored-by: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com>

lang/main.json

@@ -1255,7 +1255,7 @@
             "muteGUMPending": "Connecting your microphone",
             "noiseSuppression": "Noise suppression",
             "openChat": "Open chat",
-            "participants": "Open participants pane",
+            "participants": "Open participants pane. {{participantsCount}} participants",
             "pip": "Toggle Picture-in-Picture mode",
             "privateMessage": "Send private message",
             "profile": "Edit your profile",

react/features/participants-pane/components/web/ParticipantsPaneButton.tsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { IconUsers } from '../../../base/icons/svg';
+import { getParticipantCount } from '../../../base/participants/functions';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
 import {
     close as closeParticipantsPane,
@@ -29,13 +30,17 @@ interface IProps extends AbstractButtonProps {
      * Whether participants feature is enabled or not.
      */
     _isParticipantsPaneEnabled: boolean;
+
+    /**
+     * Participants count.
+     */
+    _participantsCount: number;
 }
 
 /**
  * Implementation of a button for accessing participants pane.
  */
 class ParticipantsPaneButton extends AbstractButton<IProps> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.participants';
     toggledAccessibilityLabel = 'toolbar.accessibilityLabel.closeParticipantsPane';
     icon = IconUsers;
     label = 'toolbar.participants';
@@ -70,6 +75,26 @@ class ParticipantsPaneButton extends AbstractButton<IProps> {
         }
     }
 
+
+    /**
+     * Override the _getAccessibilityLabel method to incorporate the dynamic participant count.
+     *
+     * @override
+     * @returns {string}
+     */
+    _getAccessibilityLabel() {
+        const { t, _participantsCount, _isOpen } = this.props;
+
+        if (_isOpen) {
+            return t('toolbar.accessibilityLabel.closeParticipantsPane');
+        }
+
+        return t('toolbar.accessibilityLabel.participants', {
+            participantsCount: _participantsCount
+        });
+
+    }
+
     /**
      * Overrides AbstractButton's {@link Component#render()}.
      *
@@ -105,7 +130,8 @@ function mapStateToProps(state: IReduxState) {
 
     return {
         _isOpen: isOpen,
-        _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state)
+        _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state),
+        _participantsCount: getParticipantCount(state)
     };
 }