OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make the UserMenu more accessible 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-03 14:34:43 +01:00
parent 9cf162e267
commit 9b0c711837
1 changed files with 55 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/structures/UserMenu.tsx
View File

@ -21,7 +21,7 @@ import { ActionPayload } from "../../dispatcher/payloads";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
import { createRef } from "react"; import { createRef } from "react";
import { _t } from "../../languageHandler"; import { _t } from "../../languageHandler";
import {ContextMenu, ContextMenuButton} from "./ContextMenu"; import {ContextMenu, ContextMenuButton, MenuItem} from "./ContextMenu";
import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog"; import {USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB} from "../views/dialogs/UserSettingsDialog";
import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload"; import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog"; import RedesignFeedbackDialog from "../views/dialogs/RedesignFeedbackDialog";
@ -30,7 +30,7 @@ import LogoutDialog from "../views/dialogs/LogoutDialog";
import SettingsStore, {SettingLevel} from "../../settings/SettingsStore"; import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
import {getCustomTheme} from "../../theme"; import {getCustomTheme} from "../../theme";
import {getHostingLink} from "../../utils/HostingLink"; import {getHostingLink} from "../../utils/HostingLink";
import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton"; import {ButtonEvent} from "../views/elements/AccessibleButton";
import SdkConfig from "../../SdkConfig"; import SdkConfig from "../../SdkConfig";
import {getHomePageUrl} from "../../utils/pages"; import {getHomePageUrl} from "../../utils/pages";
import { OwnProfileStore } from "../../stores/OwnProfileStore"; import { OwnProfileStore } from "../../stores/OwnProfileStore";
@ -50,6 +50,19 @@ interface IState {
isDarkTheme: boolean; isDarkTheme: boolean;
} }
interface IMenuButtonProps {
iconClassName: string;
label: string;
onClick(ev: ButtonEvent);
}
const MenuButton: React.FC<IMenuButtonProps> = ({iconClassName, label, onClick}) => {
return <MenuItem label={label} onClick={onClick}>
<span className={classNames("mx_IconizedContextMenu_icon", iconClassName)} />
<span className="mx_IconizedContextMenu_label">{label}</span>
</MenuItem>;
};
export default class UserMenu extends React.Component<IProps, IState> { export default class UserMenu extends React.Component<IProps, IState> {
private dispatcherRef: string; private dispatcherRef: string;
private themeWatcherRef: string; private themeWatcherRef: string;
@ -102,8 +115,11 @@ export default class UserMenu extends React.Component<IProps, IState> {
private onAction = (ev: ActionPayload) => { private onAction = (ev: ActionPayload) => {
if (ev.action !== Action.ToggleUserMenu) return; // not interested if (ev.action !== Action.ToggleUserMenu) return; // not interested
// For accessibility if (this.state.contextMenuPosition) {
this.setState({contextMenuPosition: null});
} else {
if (this.buttonRef.current) this.buttonRef.current.click(); if (this.buttonRef.current) this.buttonRef.current.click();
}
}; };
private onOpenMenuClick = (ev: InputEvent) => { private onOpenMenuClick = (ev: InputEvent) => {
@ -206,10 +222,11 @@ export default class UserMenu extends React.Component<IProps, IState> {
let homeButton = null; let homeButton = null;
if (this.hasHomePage) { if (this.hasHomePage) {
homeButton = ( homeButton = (
<AccessibleButton onClick={this.onHomeClick}> <MenuButton
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconHome" /> iconClassName="mx_UserMenu_iconHome"
<span>{_t("Home")}</span> label={_t("Home")}
</AccessibleButton> onClick={this.onHomeClick}
/>
); );
} }
@ -246,32 +263,38 @@ export default class UserMenu extends React.Component<IProps, IState> {
{hostingLink} {hostingLink}
<div className="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst"> <div className="mx_IconizedContextMenu_optionList mx_IconizedContextMenu_optionList_notFirst">
{homeButton} {homeButton}
<AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}> <MenuButton
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconBell" /> iconClassName="mx_UserMenu_iconBell"
<span className="mx_IconizedContextMenu_label">{_t("Notification settings")}</span> label={_t("Notification settings")}
</AccessibleButton> onClick={(e) => this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
<AccessibleButton onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}> />
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconLock" /> <MenuButton
<span className="mx_IconizedContextMenu_label">{_t("Security & privacy")}</span> iconClassName="mx_UserMenu_iconLock"
</AccessibleButton> label={_t("Security & privacy")}
<AccessibleButton onClick={(e) => this.onSettingsOpen(e, null)}> onClick={(e) => this.onSettingsOpen(e, USER_SECURITY_TAB)}
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSettings" /> />
<span className="mx_IconizedContextMenu_label">{_t("All settings")}</span> <MenuButton
</AccessibleButton> iconClassName="mx_UserMenu_iconSettings"
<AccessibleButton onClick={this.onShowArchived}> label={_t("All settings")}
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconArchive" /> onClick={(e) => this.onSettingsOpen(e, null)}
<span className="mx_IconizedContextMenu_label">{_t("Archived rooms")}</span> />
</AccessibleButton> <MenuButton
<AccessibleButton onClick={this.onProvideFeedback}> iconClassName="mx_UserMenu_iconArchive"
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconMessage" /> label={_t("Archived rooms")}
<span className="mx_IconizedContextMenu_label">{_t("Feedback")}</span> onClick={this.onShowArchived}
</AccessibleButton> />
<MenuButton
iconClassName="mx_UserMenu_iconMessage"
label={_t("Feedback")}
onClick={this.onProvideFeedback}
/>
</div> </div>
<div className="mx_IconizedContextMenu_optionList mx_UserMenu_contextMenu_redRow"> <div className="mx_IconizedContextMenu_optionList mx_UserMenu_contextMenu_redRow">
<AccessibleButton onClick={this.onSignOutClick}> <MenuButton
<span className="mx_IconizedContextMenu_icon mx_UserMenu_iconSignOut" /> iconClassName="mx_UserMenu_iconSignOut"
<span className="mx_IconizedContextMenu_label">{_t("Sign out")}</span> label={_t("Sign out")}
</AccessibleButton> onClick={this.onSignOutClick}
/>
</div> </div>
</div> </div>
</ContextMenu> </ContextMenu>