Handle ARROW_LEFT correctly on any room tile in sublist

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2019-10-17 17:14:00 +01:00
parent 1286cf287e
commit afe2226cb8

View file

@ -125,7 +125,6 @@ const RoomSubList = createReactClass({
// The header is stuck, so the click is to be interpreted as a scroll to the header // 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.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
} }
this._headerButton.current.focus();
}, },
onHeaderKeyDown: function(ev) { onHeaderKeyDown: function(ev) {
@ -134,21 +133,28 @@ const RoomSubList = createReactClass({
// Prevent LeftPanel handling Tab if focus is on the sublist header itself // Prevent LeftPanel handling Tab if focus is on the sublist header itself
ev.stopPropagation(); ev.stopPropagation();
break; break;
case Key.ARROW_LEFT:
ev.stopPropagation();
if (!this.state.hidden && !this.props.forceExpand) {
this.onClick();
}
break;
case Key.ARROW_RIGHT: case Key.ARROW_RIGHT:
ev.stopPropagation(); ev.stopPropagation();
if (this.state.hidden && !this.props.forceExpand) { if (this.state.hidden && !this.props.forceExpand) {
this.onClick(); this.onClick();
} else {
// TODO go to first element in subtree
} }
break; 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) { onRoomTileClick(roomId, ev) {
dis.dispatch({ dis.dispatch({
action: 'view_room', action: 'view_room',
@ -389,6 +395,7 @@ const RoomSubList = createReactClass({
className={subListClasses} className={subListClasses}
role="group" role="group"
aria-label={this.props.label} aria-label={this.props.label}
onKeyDown={this.onKeyDown}
> >
{ this._getHeaderJsx(isCollapsed) } { this._getHeaderJsx(isCollapsed) }
{ content } { content }