Merge pull request #3543 from matrix-org/t3chguy/timeline_keyboard_focus

Don't intercept TAB on the app outside of the composer, fix tabIndex > 0

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;
 }
 

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;
 }

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,

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;

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();

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>

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}