From f72ff95efb25f8c5b75dd74503e862859d2a5834 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 17:30:37 +0100
Subject: [PATCH] Handle ARROW_RIGHT on group node in treelist as per aria
suggestions
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomSubList.js | 42 ++++++++++++++++++++++--
1 file changed, 39 insertions(+), 3 deletions(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index f97b0e5112..d9fa553782 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -133,14 +133,50 @@ const RoomSubList = createReactClass({
// Prevent LeftPanel handling Tab if focus is on the sublist header itself
ev.stopPropagation();
break;
- case Key.ARROW_RIGHT:
+ case Key.ARROW_RIGHT: {
ev.stopPropagation();
if (this.state.hidden && !this.props.forceExpand) {
+ // sublist is collapsed, expand it
this.onClick();
- } else {
- // TODO go to first element in subtree
+ } 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"));
+
+ if (element) {
+ element.focus();
+ }
}
break;
+ }
}
},