Add aria labels to menu options

This commit is contained in:
Travis Ralston 2020-08-28 20:04:19 -06:00
parent 02095389e7
commit 35e4d89545
3 changed files with 6 additions and 1 deletions

View File

@ -26,8 +26,9 @@ interface IProps extends React.ComponentProps<typeof AccessibleButton> {
// Semantic component for representing a role=menuitem
export const MenuItem: React.FC<IProps> = ({children, label, ...props}) => {
const ariaLabel = props["aria-label"] || label;
return (
<AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={label}>
<AccessibleButton {...props} role="menuitem" tabIndex={-1} aria-label={ariaLabel}>
{ children }
</AccessibleButton>
);

View File

@ -322,6 +322,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
<IconizedContextMenuOption
iconClassName="mx_UserMenu_iconSettings"
label={_t("Settings")}
aria-label={_t("Community settings")}
onClick={this.onCommunitySettingsClick}
/>
<IconizedContextMenuOption
@ -353,6 +354,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
<IconizedContextMenuOption
iconClassName="mx_UserMenu_iconSettings"
label={_t("Settings")}
aria-label={_t("User settings")}
onClick={(e) => this.onSettingsOpen(e, null)}
/>
<IconizedContextMenuOption

View File

@ -2125,6 +2125,8 @@
"Security & privacy": "Security & privacy",
"All settings": "All settings",
"Feedback": "Feedback",
"Community settings": "Community settings",
"User settings": "User settings",
"Switch to light mode": "Switch to light mode",
"Switch to dark mode": "Switch to dark mode",
"Switch theme": "Switch theme",