From 5fadcaaaea6ab2f5cd4c9cec300b433e54fc18b2 Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Mon, 12 Aug 2024 10:35:00 +0200 Subject: [PATCH 1/5] add the particpants count to the aria label --- lang/main.json | 2 +- .../components/web/ParticipantsPaneButton.tsx | 25 +++++++++++++++++-- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/lang/main.json b/lang/main.json index a53c65a1f9d..0d126d6bbf2 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1251,7 +1251,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", diff --git a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx index b2e7ea59c1e..c02b16c4f69 100644 --- a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx +++ b/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. + */ + _particioantsCount: number; } /** * Implementation of a button for accessing participants pane. */ class ParticipantsPaneButton extends AbstractButton { - accessibilityLabel = 'toolbar.accessibilityLabel.participants'; toggledAccessibilityLabel = 'toolbar.accessibilityLabel.closeParticipantsPane'; icon = IconUsers; label = 'toolbar.participants'; @@ -70,6 +75,21 @@ class ParticipantsPaneButton extends AbstractButton { } } + + /** + * Override the _getAccessibilityLabel method to incorporate the dynamic participant count. + * + * @override + * @returns {string} + */ + _getAccessibilityLabel() { + const { t, _particioantsCount } = this.props; + + return t('toolbar.accessibilityLabel.participants', { + participantsCount: _particioantsCount + }); + } + /** * Overrides AbstractButton's {@link Component#render()}. * @@ -105,7 +125,8 @@ function mapStateToProps(state: IReduxState) { return { _isOpen: isOpen, - _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state) + _isParticipantsPaneEnabled: isParticipantsPaneEnabled(state), + _particioantsCount: getParticipantCount(state) }; } From 426a7ff37774ae1cf15407cb7b638488d46a72c8 Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Tue, 13 Aug 2024 08:31:57 +0200 Subject: [PATCH 2/5] remove empty space --- lang/main.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lang/main.json b/lang/main.json index 0d126d6bbf2..38101fe70e1 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1251,7 +1251,7 @@ "muteGUMPending": "Connecting your microphone", "noiseSuppression": "Noise suppression", "openChat": "Open chat", - "participants": "Open participants pane. {{participantsCount}} participants", + "participants": "Open participants pane. {{participantsCount}} participants", "pip": "Toggle Picture-in-Picture mode", "privateMessage": "Send private message", "profile": "Edit your profile", From 0ad8ad77dc3c32ae96e3cca39e953858db3b954b Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Tue, 13 Aug 2024 08:32:39 +0200 Subject: [PATCH 3/5] remove empty soace --- lang/main.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lang/main.json b/lang/main.json index 38101fe70e1..92f53c83ef1 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1251,7 +1251,7 @@ "muteGUMPending": "Connecting your microphone", "noiseSuppression": "Noise suppression", "openChat": "Open chat", - "participants": "Open participants pane. {{participantsCount}} participants", + "participants": "Open participants pane. {{participantsCount}} participants", "pip": "Toggle Picture-in-Picture mode", "privateMessage": "Send private message", "profile": "Edit your profile", From 6e896786782ba4a311f09b83fbbea8fedf2076c3 Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Mon, 9 Sep 2024 08:40:37 +0200 Subject: [PATCH 4/5] fix the accessibility toggle for the participants button --- .../components/web/ParticipantsPaneButton.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx index c02b16c4f69..cdb15d28ec0 100644 --- a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx +++ b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx @@ -83,11 +83,15 @@ class ParticipantsPaneButton extends AbstractButton { * @returns {string} */ _getAccessibilityLabel() { - const { t, _particioantsCount } = this.props; + const { t, _particioantsCount, _isOpen } = this.props; - return t('toolbar.accessibilityLabel.participants', { - participantsCount: _particioantsCount - }); + if (_isOpen) { + return t('toolbar.accessibilityLabel.closeParticipantsPane'); + } else { + return t('toolbar.accessibilityLabel.participants', { + participantsCount: _particioantsCount + }); + } } /** From 030033f6f4fbdd86e72d7a52edaedd3bc49a9cf0 Mon Sep 17 00:00:00 2001 From: AHMAD KADRI <52747422+ahmadkadri@users.noreply.github.com> Date: Mon, 9 Sep 2024 08:55:58 +0200 Subject: [PATCH 5/5] fix lint --- .../components/web/ParticipantsPaneButton.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx index cdb15d28ec0..8df4d14736c 100644 --- a/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx +++ b/react/features/participants-pane/components/web/ParticipantsPaneButton.tsx @@ -87,11 +87,12 @@ class ParticipantsPaneButton extends AbstractButton { if (_isOpen) { return t('toolbar.accessibilityLabel.closeParticipantsPane'); - } else { - return t('toolbar.accessibilityLabel.participants', { - participantsCount: _particioantsCount - }); } + + return t('toolbar.accessibilityLabel.participants', { + participantsCount: _particioantsCount + }); + } /**