From 5643743167a5a7165ef8f0bc71264c78c5d7f151 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 10 Oct 2019 14:13:29 +0100 Subject: [PATCH] Don't intercept TAB on the app outside of the composer, fix tabIndex > 0 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_common.scss | 2 +- res/css/views/elements/_AccessibleButton.scss | 4 ---- src/components/structures/ContextualMenu.js | 1 - src/components/structures/GroupView.js | 4 ++-- src/components/structures/LoggedInView.js | 2 +- src/components/views/context_menus/TopLeftMenu.js | 2 +- src/components/views/rooms/BasicMessageComposer.js | 2 +- 7 files changed, 6 insertions(+), 11 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 2b627cce9f..70ab2457f1 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -119,7 +119,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { // accessible (focusable) components. Not intended for buttons, but // should be used on things like focusable containers where the outline // is usually not helping anyone. -.mx_HiddenFocusable { +*:focus:not(.focus-visible) { outline: none; } diff --git a/res/css/views/elements/_AccessibleButton.scss b/res/css/views/elements/_AccessibleButton.scss index f3afef284f..b87071745d 100644 --- a/res/css/views/elements/_AccessibleButton.scss +++ b/res/css/views/elements/_AccessibleButton.scss @@ -18,10 +18,6 @@ limitations under the License. cursor: pointer; } -.mx_AccessibleButton:focus:not(.focus-visible) { - outline: 0; -} - .mx_AccessibleButton_disabled { cursor: default; } diff --git a/src/components/structures/ContextualMenu.js b/src/components/structures/ContextualMenu.js index 04314e5a4e..3f8c87efef 100644 --- a/src/components/structures/ContextualMenu.js +++ b/src/components/structures/ContextualMenu.js @@ -176,7 +176,6 @@ export default class ContextualMenu extends React.Component { const menuClasses = classNames({ 'mx_ContextualMenu': true, - 'mx_HiddenFocusable': true, // hide browser outline 'mx_ContextualMenu_left': !hasChevron && position.left, 'mx_ContextualMenu_right': !hasChevron && position.right, 'mx_ContextualMenu_top': !hasChevron && position.top, diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 9311f08abf..4d8f47003c 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -1223,7 +1223,7 @@ export default createReactClass({ blurToCancel={false} initialValue={this.state.profileForm.name} onValueChanged={this._onNameChange} - tabIndex="1" + tabIndex="0" dir="auto" />; shortDescNode = ; } else { const onGroupHeaderItemClick = this.state.isUserMember ? this._onEditClick : null; diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 8449839f85..889b0cdc8b 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -408,7 +408,7 @@ const LoggedInView = createReactClass({ return; } - if (!isClickShortcut && !canElementReceiveInput(ev.target)) { + if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) { // synchronous dispatch so we focus before key generates input dis.dispatch({action: 'focus_composer'}, true); ev.stopPropagation(); diff --git a/src/components/views/context_menus/TopLeftMenu.js b/src/components/views/context_menus/TopLeftMenu.js index 4080ebf5bf..815d0a5f55 100644 --- a/src/components/views/context_menus/TopLeftMenu.js +++ b/src/components/views/context_menus/TopLeftMenu.js @@ -108,7 +108,7 @@ export class TopLeftMenu extends React.Component { ); - return
+ return
{this.props.displayName}
{this.props.userId}
diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index b16a09b4f9..0cd08cce5a 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -553,7 +553,7 @@ export default class BasicMessageEditor extends React.Component {