From e40d4a48b83356d26ff0fadfe5d34a936769a353 Mon Sep 17 00:00:00 2001
From: Calinteodor <calinte2002@yahoo.co.uk>
Date: Sun, 15 Aug 2021 08:27:18 +0300
Subject: [PATCH] feat(av-moderation) id and aria-label updates for
 av-moderation test (#9592)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(av-moderation) raised hand ask to unmute aria-label

* feat(av-moderation) fixed test

* feat(av-moderation) added id for notification buttons

* feat(av-moderation) fixed lint error

* feat(av-moderation) added id for non raised hand participant

* feat(av-moderation) added extra id naming for ask to unmute button and participant items

* feat(av-moderation) fixed lint errors

* feat(av-moderation) changed id to participantID

* feat(av-moderation) removed semicolon

* squash: Drop unused id for participantItem.

* squash: Drop unused fields for raisedHand.

Co-authored-by: Дамян Минков <damencho@jitsi.org>
---
 .../components/web/NotificationButton.js           | 14 ++++++++++----
 .../components/web/NotificationWithParticipants.js |  2 ++
 .../components/AskToUnmuteButton.js                | 11 ++++++-----
 .../components/FooterContextMenu.js                |  4 ++--
 .../components/ParticipantQuickAction.js           | 10 +++++++++-
 .../components/web/ParticipantItem.js              |  1 +
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/react/features/notifications/components/web/NotificationButton.js b/react/features/notifications/components/web/NotificationButton.js
index 27251e8a0..d50523c8d 100644
--- a/react/features/notifications/components/web/NotificationButton.js
+++ b/react/features/notifications/components/web/NotificationButton.js
@@ -21,14 +21,19 @@ type Props = {
     className: string,
 
     /**
-     * The `data-testid` used for the button.
+     * CSS id of the button.
      */
-    testId: string,
+    id?: string,
 
     /**
      * The participant.
      */
-    participant: Object
+    participant: Object,
+
+    /**
+     * The `data-testid` used for the button.
+     */
+    testId: string
 }
 
 /**
@@ -36,7 +41,7 @@ type Props = {
  *
  * @returns {React$Element<'button'>}
  */
-export default function({ action, children, className, testId, participant }: Props) {
+export default function({ action, children, className, participant, id, testId }: Props) {
     const dispatch = useDispatch();
     const onClick = useCallback(() => dispatch(action(participant.id)), [ dispatch, participant ]);
 
@@ -44,6 +49,7 @@ export default function({ action, children, className, testId, participant }: Pr
         <button
             className = { className }
             data-testid = { testId }
+            id = { id }
             onClick = { onClick }
             type = 'button'>
             { children }
diff --git a/react/features/notifications/components/web/NotificationWithParticipants.js b/react/features/notifications/components/web/NotificationWithParticipants.js
index 97b082d3b..c180c0ec5 100644
--- a/react/features/notifications/components/web/NotificationWithParticipants.js
+++ b/react/features/notifications/components/web/NotificationWithParticipants.js
@@ -80,6 +80,7 @@ export default function({
                     { <NotificationButton
                         action = { onApprove }
                         className = 'primary'
+                        id = 'unmute-button'
                         participant = { p }
                         testId = { `${testIdPrefix}.allow` }>
                         { approveButtonText }
@@ -87,6 +88,7 @@ export default function({
                     { <NotificationButton
                         action = { onReject }
                         className = 'borderLess'
+                        id = 'dismiss-button'
                         participant = { p }
                         testId = { `${testIdPrefix}.reject` }>
                         { rejectButtonText }
diff --git a/react/features/participants-pane/components/AskToUnmuteButton.js b/react/features/participants-pane/components/AskToUnmuteButton.js
index bcfad07a9..48fab2c15 100644
--- a/react/features/participants-pane/components/AskToUnmuteButton.js
+++ b/react/features/participants-pane/components/AskToUnmuteButton.js
@@ -15,9 +15,9 @@ type Props = {
     askUnmuteText: string,
 
     /**
-     * Participant id.
+     * Participant participantID.
      */
-    id: string
+    participantID: string,
 }
 
 /**
@@ -26,14 +26,15 @@ type Props = {
  * @param {Object} participant - Participant reference.
  * @returns {React$Element<'button'>}
  */
-export default function AskToUnmuteButton({ id, askUnmuteText }: Props) {
+export default function AskToUnmuteButton({ askUnmuteText, participantID }: Props) {
     const dispatch = useDispatch();
     const askToUnmute = useCallback(() => {
-        dispatch(approveParticipant(id));
-    }, [ dispatch, id ]);
+        dispatch(approveParticipant(participantID));
+    }, [ dispatch, participantID ]);
 
     return (
         <QuickActionButton
+            aria-label = { `unmute-${participantID}` }
             onClick = { askToUnmute }
             primary = { true }
             theme = {{
diff --git a/react/features/participants-pane/components/FooterContextMenu.js b/react/features/participants-pane/components/FooterContextMenu.js
index d92969af1..c0b222987 100644
--- a/react/features/participants-pane/components/FooterContextMenu.js
+++ b/react/features/participants-pane/components/FooterContextMenu.js
@@ -90,7 +90,7 @@ export const FooterContextMenu = ({ onMouseLeave }: Props) => {
                     </div>
                     { isModerationEnabled ? (
                         <ContextMenuItem
-                            id = 'participants-pane-context-menu-start-moderation'
+                            id = 'participants-pane-context-menu-stop-moderation'
                             onClick = { disable }>
                             <span className = { classes.paddedAction }>
                                 { t('participantsPane.actions.startModeration') }
@@ -98,7 +98,7 @@ export const FooterContextMenu = ({ onMouseLeave }: Props) => {
                         </ContextMenuItem>
                     ) : (
                         <ContextMenuItem
-                            id = 'participants-pane-context-menu-stop-moderation'
+                            id = 'participants-pane-context-menu-start-moderation'
                             onClick = { enable }>
                             <Icon
                                 size = { 20 }
diff --git a/react/features/participants-pane/components/ParticipantQuickAction.js b/react/features/participants-pane/components/ParticipantQuickAction.js
index 0ec6f5efd..1c5990a4a 100644
--- a/react/features/participants-pane/components/ParticipantQuickAction.js
+++ b/react/features/participants-pane/components/ParticipantQuickAction.js
@@ -9,6 +9,11 @@ import { QuickActionButton } from './web/styled';
 
 type Props = {
 
+    /**
+     * The translated ask unmute aria label.
+     */
+    ariaLabel?: boolean,
+
     /**
      * The translated "ask unmute" text.
      */
@@ -24,6 +29,9 @@ type Props = {
      */
     muteAudio: Function,
 
+    /**
+     * Label for mute participant button.
+     */
     muteParticipantButtonText: string,
 
     /**
@@ -59,7 +67,7 @@ export default function ParticipantQuickAction({
         return (
             <AskToUnmuteButton
                 askUnmuteText = { askUnmuteText }
-                id = { participantID } />
+                participantID = { participantID } />
         );
     }
     default: {
diff --git a/react/features/participants-pane/components/web/ParticipantItem.js b/react/features/participants-pane/components/web/ParticipantItem.js
index fbccb5ca7..65620335c 100644
--- a/react/features/participants-pane/components/web/ParticipantItem.js
+++ b/react/features/participants-pane/components/web/ParticipantItem.js
@@ -161,6 +161,7 @@ export default function ParticipantItem({
 
     return (
         <ParticipantContainer
+            id = { `participant-item-${participantID}` }
             isHighlighted = { isHighlighted }
             onMouseLeave = { onLeave }
             trigger = { actionsTrigger }>