PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-22 11:10:25 +01:00
parent fe46925c00
commit 2a3655e9b8
2 changed files with 17 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
res/css/structures/_RoomSubList.scss
View file

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

42
src/components/structures/RoomSubList.js
View file

@ -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) {
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="none"
role="treeitem"
>
{ chevron }
<span>{this.props.label}</span>