From 2a3655e9b832ba632049d57a39e5b6dff8901c6e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Oct 2019 11:10:25 +0100
Subject: [PATCH] Focus highlight room sublist label, catch right arrow and
 simplify code

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/structures/_RoomSubList.scss     |  7 +++-
 src/components/structures/RoomSubList.js | 48 ++++++------------------
 2 files changed, 17 insertions(+), 38 deletions(-)

diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 0e0d5c68af..39ccf9bef2 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -46,10 +46,15 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     flex: 0 0 auto;
-    margin: 0 16px;
+    margin: 0 8px;
+    padding: 0 8px;
     height: 36px;
 }
 
+.mx_RoomSubList_labelContainer:focus-within {
+    background-color: $roomtile-focused-bg-color;
+}
+
 .mx_RoomSubList_label {
     flex: 1;
     cursor: pointer;
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 4ff273303a..8054ef01be 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -147,37 +147,7 @@ const RoomSubList = createReactClass({
                     this.onClick();
                 } else if (!this.props.forceExpand) {
                     // sublist is expanded, go to first room
-                    let element = document.activeElement;
-                    let descending = true;
-                    let classes;
-
-                    do {
-                        const child = element.firstElementChild;
-                        const sibling = element.nextElementSibling;
-
-                        if (descending) {
-                            if (child) {
-                                element = child;
-                            } else if (sibling) {
-                                element = sibling;
-                            } else {
-                                descending = false;
-                                element = element.parentElement;
-                            }
-                        } else {
-                            if (sibling) {
-                                element = sibling;
-                                descending = true;
-                            } else {
-                                element = element.parentElement;
-                            }
-                        }
-
-                        if (element) {
-                            classes = element.classList;
-                        }
-                    } while (element && !classes.contains("mx_RoomTile"));
-
+                    const element = this.refs.subList && this.refs.subList.querySelector(".mx_RoomTile");
                     if (element) {
                         element.focus();
                     }
@@ -188,10 +158,15 @@ const RoomSubList = createReactClass({
     },
 
     onKeyDown: function(ev) {
-        // On ARROW_LEFT go to the sublist header
-        if (ev.key === Key.ARROW_LEFT) {
-            ev.stopPropagation();
-            this._headerButton.current.focus();
+        switch (ev.key) {
+            // On ARROW_LEFT go to the sublist header
+            case Key.ARROW_LEFT:
+                ev.stopPropagation();
+                this._headerButton.current.focus();
+                break;
+            // Consume ARROW_RIGHT so it doesn't cause focus to get sent to composer
+            case Key.ARROW_RIGHT:
+                ev.stopPropagation();
         }
     },
 
@@ -348,8 +323,7 @@ const RoomSubList = createReactClass({
                     tabIndex={0}
                     aria-expanded={!isCollapsed}
                     inputRef={this._headerButton}
-                    // cancel out role so this button behaves as the toggle-header of this group
-                    role="none"
+                    role="treeitem"
                 >
                     { chevron }
                     <span>{this.props.label}</span>