Merge pull request #15793 from KDSBrowne/26-lad-context

Fix Menu Item Descriptions Not Being Announced
This commit is contained in:
Ramón Souza 2022-10-24 10:18:21 -03:00 committed by GitHub
commit 22e8d6d1cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 5 deletions

View File

@ -4,7 +4,6 @@ import { defineMessages, injectIntl } from "react-intl";
import Menu from "@material-ui/core/Menu";
import { Divider } from "@material-ui/core";
import Icon from "/imports/ui/components/common/icon/component";
import { SMALL_VIEWPORT_BREAKPOINT } from '/imports/ui/components/layout/enums';
@ -65,7 +64,7 @@ class BBBMenu extends React.Component {
const { actions, selectedEmoji } = this.props;
return actions?.map(a => {
const { dataTest, label, onClick, key, disabled } = a;
const { dataTest, label, onClick, key, disabled, description } = a;
const emojiSelected = key?.toLowerCase()?.includes(selectedEmoji?.toLowerCase());
@ -101,7 +100,8 @@ class BBBMenu extends React.Component {
}}>
<Styled.MenuItemWrapper>
{a.icon ? <Icon iconName={a.icon} key="icon" /> : null}
<Styled.Option>{label}</Styled.Option>
<Styled.Option aria-describedby={`${key}-option-desc`}>{label}</Styled.Option>
{description && <div className="sr-only" id={`${key}-option-desc`}>{description}</div>}
{a.iconRight ? <Styled.IconRight iconName={a.iconRight} key="iconRight" /> : null}
</Styled.MenuItemWrapper>
</Styled.BBBMenuItem>,

View File

@ -124,6 +124,10 @@ const intlMessages = defineMessages({
id: 'app.userList.userOptions.sortedLastName.heading',
description: '',
},
newTab: {
id: 'app.modal.newTab',
description: 'label used in aria description',
}
});
class UserOptions extends PureComponent {
@ -310,7 +314,7 @@ class UserOptions extends PureComponent {
icon: 'multi_whiteboard',
iconRight: 'popout_window',
label: intl.formatMessage(intlMessages.learningDashboardLabel),
description: intl.formatMessage(intlMessages.learningDashboardDesc),
description: `${intl.formatMessage(intlMessages.learningDashboardDesc)} ${intl.formatMessage(intlMessages.newTab)}`,
key: this.learningDashboardId,
onClick: () => { openLearningDashboardUrl(locale); },
dividerTop: true,

View File

@ -839,7 +839,7 @@
"app.connection-status.next": "Next page",
"app.connection-status.prev": "Previous page",
"app.learning-dashboard.label": "Learning Analytics Dashboard",
"app.learning-dashboard.description": "Open dashboard with users activities",
"app.learning-dashboard.description": "Dashboard with users activities",
"app.learning-dashboard.clickHereToOpen": "Open Learning Analytics Dashboard",
"app.recording.startTitle": "Start recording",
"app.recording.stopTitle": "Pause recording",