Focus highlight room sublist label, catch right arrow and simplify code

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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;

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;
+                    const element = this.refs.subList && this.refs.subList.querySelector(".mx_RoomTile");
-                    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"));
-
                     if (element) {
                         element.focus();
                     }
@@ -188,10 +158,15 @@ const RoomSubList = createReactClass({
     },
 
     onKeyDown: function(ev) {
+        switch (ev.key) {
             // On ARROW_LEFT go to the sublist header
-        if (ev.key === Key.ARROW_LEFT) {
+            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="treeitem"
-                    role="none"
                 >
                     { chevron }
                     <span>{this.props.label}</span>