improve accessibility of notification modal

This commit is contained in:
Ramón Souza 2022-03-14 16:48:17 +00:00
parent 81d3a681e9
commit b4bf65ffe1
2 changed files with 14 additions and 2 deletions

View File

@ -15,12 +15,20 @@ const intlMessages = defineMessages({
continue: {
id: 'app.recording.notify.continue',
description: 'Button accept',
},
leave: {
id: 'app.recording.notify.leave',
description: 'Button accept',
},
continueAriaLabel: {
id: 'app.recording.notify.continueLabel',
description: 'provides better context for yes btn label',
},
leaveAriaLabel: {
id: 'app.recording.notify.leaveLabel',
description: 'provides better context for no btn label',
},
});
const LOGOUT_CODE = '680';
@ -40,7 +48,7 @@ const RecordingNotifyModal = ({ intl, closeModal, toggleShouldNotify }) => {
>
<Styled.Container>
<Styled.Header>
<Styled.Title>
<Styled.Title aria-hidden>
{intl.formatMessage(intlMessages.title)}
</Styled.Title>
</Styled.Header>
@ -52,10 +60,12 @@ const RecordingNotifyModal = ({ intl, closeModal, toggleShouldNotify }) => {
color="primary"
label={intl.formatMessage(intlMessages.continue)}
onClick={closeModal}
aria-label={intl.formatMessage(intlMessages.continueAriaLabel)}
/>
<Styled.NotifyButton
label={intl.formatMessage(intlMessages.leave)}
onClick={skipButtonHandle}
aria-label={intl.formatMessage(intlMessages.leaveAriaLabel)}
/>
</Styled.Footer>
</Styled.Container>

View File

@ -730,6 +730,8 @@
"app.recording.notify.description": "A recording will be available based on the remainder of this session",
"app.recording.notify.continue": "Continue",
"app.recording.notify.leave": "Leave session",
"app.recording.notify.continueLabel" : "Accept recording and continue",
"app.recording.notify.leaveLabel" : "Do not accept recording and leave meeting",
"app.videoPreview.cameraLabel": "Camera",
"app.videoPreview.profileLabel": "Quality",
"app.videoPreview.quality.low": "Low",