From 744fc5ca6a945c1cbc62f612a9f0ce741e79208a Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Oct 2019 10:52:35 +0100 Subject: [PATCH 1/5] Specify aria-level="1" on Room List tree RoomSubList Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/RoomSubList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 8054ef01be..0bb5c9e9be 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -324,6 +324,7 @@ const RoomSubList = createReactClass({ aria-expanded={!isCollapsed} inputRef={this._headerButton} role="treeitem" + aria-level="1" > { chevron } {this.props.label} From 4dd0f6d902d7f1b6790730c750b011675c38f35b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Oct 2019 12:11:37 +0100 Subject: [PATCH 2/5] Make breadcrumbs more accessible Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomBreadcrumbs.js | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js index 2cbdc31464..d1d407ea00 100644 --- a/src/components/views/rooms/RoomBreadcrumbs.js +++ b/src/components/views/rooms/RoomBreadcrumbs.js @@ -346,8 +346,15 @@ export default class RoomBreadcrumbs extends React.Component { } return ( - this._viewRoom(r.room, i)} - onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}> + this._viewRoom(r.room, i)} + onMouseEnter={() => this._onMouseEnter(r.room)} + onMouseLeave={() => this._onMouseLeave(r.room)} + aria-label={_t("Room %(name)s", {name: r.room.name})} + role="listitem" + > {badge} {dmIndicator} @@ -356,10 +363,16 @@ export default class RoomBreadcrumbs extends React.Component { ); }); return ( - - { avatars } - +
+ + { avatars } + +
); } } From d7a64fcacd05f74bc659d3c8a06fe0dd1edc66b7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 23 Oct 2019 12:12:11 +0100 Subject: [PATCH 3/5] Move Jitsi widget to bottom and fix keyboard navigation of left panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_LeftPanel.scss | 6 +- src/components/structures/LeftPanel.js | 77 +++++++++++--------------- 2 files changed, 36 insertions(+), 47 deletions(-) diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 85fdfa092d..e55ebb42d7 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -48,12 +48,16 @@ limitations under the License. .mx_LeftPanel { flex: 1; - overflow-x: hidden; + overflow: hidden; display: flex; flex-direction: column; min-height: 0; } +.mx_LeftPanel .mx_LeftPanel_Rooms { + flex: 1 1 0; +} + .mx_LeftPanel .mx_AppTile_mini { height: 132px; } diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index d1d3bb1b63..54fad45713 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -1,5 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 The Matrix.org Foundation C.I.C. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +20,7 @@ import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { MatrixClient } from 'matrix-js-sdk'; -import { KeyCode } from '../../Keyboard'; +import { Key } from '../../Keyboard'; import sdk from '../../index'; import dis from '../../dispatcher'; import VectorConferenceHandler from '../../VectorConferenceHandler'; @@ -117,35 +118,21 @@ const LeftPanel = createReactClass({ _onKeyDown: function(ev) { if (!this.focusedElement) return; - let handled = true; - switch (ev.keyCode) { - case KeyCode.TAB: - this._onMoveFocus(ev.shiftKey); + switch (ev.key) { + case Key.TAB: + this._onMoveFocus(ev, ev.shiftKey); break; - case KeyCode.UP: - this._onMoveFocus(true); + case Key.ARROW_UP: + this._onMoveFocus(ev, true, true); break; - case KeyCode.DOWN: - this._onMoveFocus(false); + case Key.ARROW_DOWN: + this._onMoveFocus(ev, false, true); break; - case KeyCode.ENTER: - this._onMoveFocus(false); - if (this.focusedElement) { - this.focusedElement.click(); - } - break; - default: - handled = false; - } - - if (handled) { - ev.stopPropagation(); - ev.preventDefault(); } }, - _onMoveFocus: function(up) { + _onMoveFocus: function(ev, up, trap) { let element = this.focusedElement; // unclear why this isn't needed @@ -179,29 +166,24 @@ const LeftPanel = createReactClass({ if (element) { classes = element.classList; - if (classes.contains("mx_LeftPanel")) { // we hit the top - element = up ? element.lastElementChild : element.firstElementChild; - descending = true; - } } } while (element && !( classes.contains("mx_RoomTile") || classes.contains("mx_RoomSubList_label") || - classes.contains("mx_textinput_search"))); + classes.contains("mx_LeftPanel_filterRooms"))); if (element) { + ev.stopPropagation(); + ev.preventDefault(); element.focus(); this.focusedElement = element; - this.focusedDescending = descending; + } else if (trap) { + // if navigation is via up/down arrow-keys, trap in the widget so it doesn't send to composer + ev.stopPropagation(); + ev.preventDefault(); } }, - onHideClick: function() { - dis.dispatch({ - action: 'hide_left_panel', - }); - }, - onSearch: function(term) { this.setState({ searchFilter: term }); }, @@ -269,6 +251,7 @@ const LeftPanel = createReactClass({ } const searchBox = ( { tagPanelContainer } -