diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f524a22d4b..13945a9ce8 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -901,11 +901,6 @@
"Forget room": "Forget room",
"Search": "Search",
"Share room": "Share room",
- "Drop here to favourite": "Drop here to favourite",
- "Drop here to tag direct chat": "Drop here to tag direct chat",
- "Drop here to restore": "Drop here to restore",
- "Drop here to demote": "Drop here to demote",
- "Drop here to tag %(section)s": "Drop here to tag %(section)s",
"Community Invites": "Community Invites",
"Invites": "Invites",
"Favourites": "Favourites",
@@ -1653,6 +1648,8 @@
"Sent messages will be stored until your connection has returned.": "Sent messages will be stored until your connection has returned.",
"Active call": "Active call",
"There's no one else here! Would you like to
invite others or
stop warning about the empty room?": "There's no one else here! Would you like to
invite others or
stop warning about the empty room?",
+ "Jump to first unread room.": "Jump to first unread room.",
+ "Jump to first invite.": "Jump to first invite.",
"Add room": "Add room",
"You seem to be uploading files, are you sure you want to quit?": "You seem to be uploading files, are you sure you want to quit?",
"You seem to be in a call, are you sure you want to quit?": "You seem to be in a call, are you sure you want to quit?",
From 8b5d3b93f4b84fa7c6625ab58d27543387d99995 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 15:59:32 +0100
Subject: [PATCH 03/11] Prevent double read of ARIA expanded
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomSubList.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 92b9d91e0e..d218fdf1e8 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -386,7 +386,6 @@ const RoomSubList = createReactClass({
className={subListClasses}
role="group"
aria-label={this.props.label}
- aria-expanded={!isCollapsed}
onKeyDown={this.onKeyDown}
>
{ this._getHeaderJsx(isCollapsed) }
From f09a3b42812d8216c16f534215c3d935ddd76932 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 16:21:33 +0100
Subject: [PATCH 04/11] Fix outline on RoomSubList badges
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
res/css/structures/_RoomSubList.scss | 4 ++--
src/components/structures/RoomSubList.js | 9 +++++++--
2 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index fc61395bf9..0e0d5c68af 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -67,7 +67,7 @@ limitations under the License.
margin-left: 8px;
}
-.mx_RoomSubList_badge {
+.mx_RoomSubList_badge > div {
flex: 0 0 auto;
border-radius: 8px;
font-weight: 600;
@@ -103,7 +103,7 @@ limitations under the License.
}
}
-.mx_RoomSubList_badgeHighlight {
+.mx_RoomSubList_badgeHighlight > div {
color: $accent-fg-color;
background-color: $warning-color;
}
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index d218fdf1e8..bca6b8ad42 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -238,17 +238,22 @@ const RoomSubList = createReactClass({
'mx_RoomSubList_badge': true,
'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
});
+ // Wrap the contents in a div and apply styles to the child div so that the browser default outline works
if (subListNotifCount > 0) {
badge = (
- { FormattingUtils.formatCount(subListNotifCount) }
+
+ { FormattingUtils.formatCount(subListNotifCount) }
+
);
} else if (this.props.isInvite && this.props.list.length) {
// no notifications but highlight anyway because this is an invite badge
badge = (
- { this.props.list.length }
+
+ { this.props.list.length }
+
);
}
From 3eef1bf87ec5ebdfbdcc71ee734b2d1598eabada Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 17:03:37 +0100
Subject: [PATCH 05/11] Fix tabbing through room sublist
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomSubList.js | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index bca6b8ad42..843be3e50b 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -128,7 +128,7 @@ const RoomSubList = createReactClass({
this._headerButton.current.focus();
},
- onKeyDown: function(ev) {
+ onHeaderKeyDown: function(ev) {
switch (ev.key) {
case Key.TAB:
// Prevent LeftPanel handling Tab if focus is on the sublist header itself
@@ -297,7 +297,7 @@ const RoomSubList = createReactClass({
}
return (
-
+
{ this._getHeaderJsx(isCollapsed) }
{ content }
From 1286cf287e3a50ab96f6e6f772628dfc25f64fea Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 17:09:43 +0100
Subject: [PATCH 06/11] remove TODO for now
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomSubList.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 843be3e50b..a3c28a74bb 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -144,8 +144,6 @@ const RoomSubList = createReactClass({
ev.stopPropagation();
if (this.state.hidden && !this.props.forceExpand) {
this.onClick();
- } else {
- // TODO go to first element in subtree
}
break;
}
From afe2226cb8dd3a0f23b0d119e3371189889d4f31 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 17:14:00 +0100
Subject: [PATCH 07/11] Handle ARROW_LEFT correctly on any room tile in sublist
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomSubList.js | 21 ++++++++++++++-------
1 file changed, 14 insertions(+), 7 deletions(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index a3c28a74bb..f97b0e5112 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -125,7 +125,6 @@ const RoomSubList = createReactClass({
// The header is stuck, so the click is to be interpreted as a scroll to the header
this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
}
- this._headerButton.current.focus();
},
onHeaderKeyDown: function(ev) {
@@ -134,21 +133,28 @@ const RoomSubList = createReactClass({
// Prevent LeftPanel handling Tab if focus is on the sublist header itself
ev.stopPropagation();
break;
- case Key.ARROW_LEFT:
- ev.stopPropagation();
- if (!this.state.hidden && !this.props.forceExpand) {
- this.onClick();
- }
- break;
case Key.ARROW_RIGHT:
ev.stopPropagation();
if (this.state.hidden && !this.props.forceExpand) {
this.onClick();
+ } else {
+ // TODO go to first element in subtree
}
break;
}
},
+ onKeyDown: function(ev) {
+ // On ARROW_LEFT collapse the room sublist
+ if (ev.key === Key.ARROW_LEFT) {
+ ev.stopPropagation();
+ if (!this.state.hidden && !this.props.forceExpand) {
+ this.onClick();
+ this._headerButton.current.focus();
+ }
+ }
+ },
+
onRoomTileClick(roomId, ev) {
dis.dispatch({
action: 'view_room',
@@ -389,6 +395,7 @@ const RoomSubList = createReactClass({
className={subListClasses}
role="group"
aria-label={this.props.label}
+ onKeyDown={this.onKeyDown}
>
{ this._getHeaderJsx(isCollapsed) }
{ content }
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 08/11] 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;
+ }
}
},
From fe46925c00a457ef726d07803c6ff52f46c3e7a2 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 17 Oct 2019 17:49:28 +0100
Subject: [PATCH 09/11] Handle LEFT Arrow as expected by Aria Treeview Widget
pattern
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/structures/RoomSubList.js | 14 +++++++++-----
1 file changed, 9 insertions(+), 5 deletions(-)
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index d9fa553782..4ff273303a 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -133,6 +133,13 @@ const RoomSubList = createReactClass({
// Prevent LeftPanel handling Tab if focus is on the sublist header itself
ev.stopPropagation();
break;
+ case Key.ARROW_LEFT:
+ // On ARROW_LEFT collapse the room sublist
+ if (!this.state.hidden && !this.props.forceExpand) {
+ this.onClick();
+ }
+ ev.stopPropagation();
+ break;
case Key.ARROW_RIGHT: {
ev.stopPropagation();
if (this.state.hidden && !this.props.forceExpand) {
@@ -181,13 +188,10 @@ const RoomSubList = createReactClass({
},
onKeyDown: function(ev) {
- // On ARROW_LEFT collapse the room sublist
+ // On ARROW_LEFT go to the sublist header
if (ev.key === Key.ARROW_LEFT) {
ev.stopPropagation();
- if (!this.state.hidden && !this.props.forceExpand) {
- this.onClick();
- this._headerButton.current.focus();
- }
+ this._headerButton.current.focus();
}
},
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 10/11] 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 }
{this.props.label}
From ebc562878283389117cc082a21926ac243ff5659 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 22 Oct 2019 11:30:47 +0100
Subject: [PATCH 11/11] fix typo
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
res/css/structures/_RoomSubList.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss
index 39ccf9bef2..b39504593a 100644
--- a/res/css/structures/_RoomSubList.scss
+++ b/res/css/structures/_RoomSubList.scss
@@ -20,7 +20,7 @@ limitations under the License.
so they ideally wouldn't affect each other.
lowest category: .mx_RoomSubList
flex-shrink: 10000000
- distribute size of items within the same categery by their size
+ distribute size of items within the same category by their size
middle category: .mx_RoomSubList.resized-sized
flex-shrink: 1000
applied when using the resizer, will have a max-height set to it,