Merge pull request #15793 from KDSBrowne/26-lad-context
Fix Menu Item Descriptions Not Being Announced
This commit is contained in:
commit
22e8d6d1cf
@ -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>,
|
||||
|
@ -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,
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user