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>
This commit is contained in:
Calinteodor 2021-08-15 08:27:18 +03:00 committed by GitHub
parent 8c82c0f56e
commit e40d4a48b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 12 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -161,6 +161,7 @@ export default function ParticipantItem({
return (
<ParticipantContainer
id = { `participant-item-${participantID}` }
isHighlighted = { isHighlighted }
onMouseLeave = { onLeave }
trigger = { actionsTrigger }>