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}