Add aria labels to menu options

src/accessibility/context_menu/MenuItem.tsx

@@ -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>
     );

src/components/structures/UserMenu.tsx

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

src/i18n/strings/en_EN.json

@@ -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",