PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move focusing to the context menu create call

Browse source
This commit is contained in:
Travis Ralston 2019-05-20 21:07:55 -06:00
parent 52b0f285c6
commit aac87c4635
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/structures/TopLeftMenuButton.js
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2018 New Vector Ltd Copyright 2018 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -24,6 +25,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
import Avatar from '../../Avatar'; import Avatar from '../../Avatar';
import { _t } from '../../languageHandler'; import { _t } from '../../languageHandler';
import dis from "../../dispatcher"; import dis from "../../dispatcher";
import {focusCapturedRef} from "../../utils/Accessibility";
const AVATAR_SIZE = 28; const AVATAR_SIZE = 28;
@ -143,6 +145,7 @@ export default class TopLeftMenuButton extends React.Component {
top: y, top: y,
userId: MatrixClientPeg.get().getUserId(), userId: MatrixClientPeg.get().getUserId(),
displayName: this._getDisplayName(), displayName: this._getDisplayName(),
containerRef: focusCapturedRef, // Focus the TopLeftMenu on first render
onFinished: () => { onFinished: () => {
this.setState({ menuDisplayed: false, menuFunctions: null }); this.setState({ menuDisplayed: false, menuFunctions: null });
}, },

8
src/components/views/context_menus/TopLeftMenu.js
View file

@ -1,5 +1,6 @@
/* /*
Copyright 2018, 2019 New Vector Ltd Copyright 2018, 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -23,13 +24,16 @@ import Modal from "../../../Modal";
import SdkConfig from '../../../SdkConfig'; import SdkConfig from '../../../SdkConfig';
import { getHostingLink } from '../../../utils/HostingLink'; import { getHostingLink } from '../../../utils/HostingLink';
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import {focusCapturedRef} from "../../../utils/Accessibility";
export class TopLeftMenu extends React.Component { export class TopLeftMenu extends React.Component {
static propTypes = { static propTypes = {
displayName: PropTypes.string.isRequired, displayName: PropTypes.string.isRequired,
userId: PropTypes.string.isRequired, userId: PropTypes.string.isRequired,
onFinished: PropTypes.func, onFinished: PropTypes.func,
// Optional function to collect a reference to the container
// of this component directly.
containerRef: PropTypes.func,
}; };
constructor() { constructor() {
@ -93,7 +97,7 @@ export class TopLeftMenu extends React.Component {
{_t("Settings")} {_t("Settings")}
</li>; </li>;
return <div className="mx_TopLeftMenu mx_HiddenFocusable" tabIndex={0} ref={focusCapturedRef}> return <div className="mx_TopLeftMenu mx_HiddenFocusable" tabIndex={0} ref={this.props.containerRef}>
<div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}> <div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}>
<div>{this.props.displayName}</div> <div>{this.props.displayName}</div>
<div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div> <div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div>