feat(av-moderation) id and aria-label updates for av-moderation test (#9592)

* 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>

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 }

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 }

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 = {{

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 }

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: {

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 }>