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 = <EditableText ref="descriptionEditor"
@@ -1233,7 +1233,7 @@ export default createReactClass({
                      blurToCancel={false}
                      initialValue={this.state.profileForm.short_description}
                      onValueChanged={this._onShortDescChange}
-                     tabIndex="2"
+                     tabIndex="0"
                      dir="auto" />;
             } 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 {
             </AccessibleButton>
         );
 
-        return <div className="mx_TopLeftMenu mx_HiddenFocusable" tabIndex={0} ref={this.props.containerRef}>
+        return <div className="mx_TopLeftMenu" ref={this.props.containerRef}>
             <div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}>
                 <div>{this.props.displayName}</div>
                 <div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div>
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 {
             <div
                 className="mx_BasicMessageComposer_input"
                 contentEditable="true"
-                tabIndex="1"
+                tabIndex="0"
                 onBlur={this._onBlur}
                 onFocus={this._onFocus}
                 onPaste={this._onPaste}