Accessibility fixes to the LeftPanel

src/Keyboard.js

@@ -58,7 +58,17 @@ export const KeyCode = {
     KEY_X: 88,
     KEY_Y: 89,
     KEY_Z: 90,
-    KEY_BACKTICK: 223,
+    KEY_BACKTICK: 223, // DO NOT USE THIS: browsers disagree on backtick 192 vs 223
+};
+
+export const Key = {
+    HOME: "Home",
+    End: "End",
+    PAGE_UP: "PageUp",
+    PAGE_DOWN: "PageDown",
+    BACKTICK: "`",
+
+    K: "k",
 };
 
 export function isOnlyCtrlOrCmdKeyEvent(ev) {

src/components/structures/LoggedInView.js

@@ -22,7 +22,7 @@ import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-beautiful-dnd';
 
-import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
+import { Key, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import { fixupColorFonts } from '../../utils/FontManager';
@@ -353,31 +353,33 @@ const LoggedInView = createReactClass({
         const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey ||
             ev.key === "Alt" || ev.key === "Control" || ev.key === "Meta" || ev.key === "Shift";
 
-        switch (ev.keyCode) {
-            case KeyCode.PAGE_UP:
-            case KeyCode.PAGE_DOWN:
+        switch (ev.key) {
+            case Key.PAGE_UP:
+            case Key.PAGE_DOWN:
                 if (!hasModifier) {
                     this._onScrollKeyPressed(ev);
                     handled = true;
                 }
                 break;
 
-            case KeyCode.HOME:
-            case KeyCode.END:
+            case Key.HOME:
+            case Key.END:
                 if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this._onScrollKeyPressed(ev);
                     handled = true;
                 }
                 break;
-            case KeyCode.KEY_K:
+            case Key.K:
                 if (ctrlCmdOnly) {
                     dis.dispatch({
                         action: 'focus_room_filter',
                     });
                     handled = true;
                 }
                 break;
-            case KeyCode.KEY_BACKTICK:
+            case Key.BACKTICK:
+                if (ev.key !== "`") break;
+
                 // Ideally this would be CTRL+P for "Profile", but that's
                 // taken by the print dialog. CTRL+I for "Information"
                 // was previously chosen but conflicted with italics in

src/components/structures/RoomSubList.js

@@ -307,11 +307,11 @@ const RoomSubList = createReactClass({
             });
 
             if (isCollapsed) {
-                return <div ref="subList" className={subListClasses}>
+                return <div ref="subList" className={subListClasses} role="group" aria-label={this.props.label}>
                     {this._getHeaderJsx(isCollapsed)}
                 </div>;
             } else if (this._canUseLazyListRendering()) {
-                return <div ref="subList" className={subListClasses}>
+                return <div ref="subList" className={subListClasses} role="group" aria-label={this.props.label}>
                     {this._getHeaderJsx(isCollapsed)}
                     <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll" onScroll={ this._onScroll }>
                         <LazyRenderList
@@ -325,7 +325,7 @@ const RoomSubList = createReactClass({
             } else {
                 const roomTiles = this.props.list.map(r => this.makeRoomTile(r));
                 const tiles = roomTiles.concat(this.props.extraTiles);
-                return <div ref="subList" className={subListClasses}>
+                return <div ref="subList" className={subListClasses} role="group" aria-label={this.props.label}>
                     {this._getHeaderJsx(isCollapsed)}
                     <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll" onScroll={ this._onScroll }>
                         { tiles }
@@ -340,7 +340,7 @@ const RoomSubList = createReactClass({
             }
 
             return (
-                <div ref="subList" className="mx_RoomSubList">
+                <div ref="subList" className="mx_RoomSubList" role="group" aria-label={this.props.label}>
                     { this._getHeaderJsx(isCollapsed) }
                     { content }
                 </div>

src/components/views/elements/AccessibleButton.js

@@ -68,7 +68,7 @@ export default function AccessibleButton(props) {
     delete restProps.inputRef;
 
     restProps.tabIndex = restProps.tabIndex || "0";
-    restProps.role = "button";
+    restProps.role = restProps.role || "button";
     restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
 
     if (kind) {

src/components/views/rooms/RoomList.js

@@ -805,7 +805,7 @@ module.exports = createReactClass({
         const subListComponents = this._mapSubListProps(subLists);
 
         return (
-            <div ref={this._collectResizeContainer} className="mx_RoomList"
+            <div ref={this._collectResizeContainer} className="mx_RoomList" role="listbox" aria-label={_t("Rooms")}
                  onMouseMove={this.onMouseMove} onMouseLeave={this.onMouseLeave}>
                 { subListComponents }
             </div>

src/components/views/rooms/RoomTile.js

@@ -33,6 +33,7 @@ import AccessibleButton from '../elements/AccessibleButton';
 import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
+import {_t} from "../../../languageHandler";
 
 module.exports = createReactClass({
     displayName: 'RoomTile',
@@ -368,6 +369,8 @@ module.exports = createReactClass({
 
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
+        let ariaLabel = name;
+
         let dmIndicator;
         if (this._isDirectMessageRoom(this.props.room.roomId)) {
             dmIndicator = <img
@@ -379,12 +382,24 @@ module.exports = createReactClass({
             />;
         }
 
+        if (notifBadges && mentionBadges && !isInvite) {
+            ariaLabel += " " + _t("It has %(count)s unread messages including mentions.", {
+                count: notificationCount,
+            });
+        } else if (notifBadges) {
+            ariaLabel += " " + _t("It has %(count)s unread messages.", { count: notificationCount });
+        } else if (mentionBadges && !isInvite) {
+            ariaLabel += " " + _t("It has unread mentions.");
+        }
+
         return <AccessibleButton tabIndex="0"
                                  className={classes}
                                  onClick={this.onClick}
                                  onMouseEnter={this.onMouseEnter}
                                  onMouseLeave={this.onMouseLeave}
                                  onContextMenu={this.onContextMenu}
+                                 aria-label={ariaLabel}
+                                 role="option"
         >
             <div className={avatarClasses}>
                 <div className="mx_RoomTile_avatar_container">

src/i18n/strings/en_EN.json

@@ -949,6 +949,9 @@
     "Securely back up your keys to avoid losing them. <a>Learn more.</a>": "Securely back up your keys to avoid losing them. <a>Learn more.</a>",
     "Not now": "Not now",
     "Don't ask me again": "Don't ask me again",
+    "It has %(count)s unread messages including mentions.|other": "It has %(count)s unread messages including mentions.",
+    "It has %(count)s unread messages.|other": "It has %(count)s unread messages.",
+    "It has unread mentions.": "It has unread mentions.",
     "Add a topic": "Add a topic",
     "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.": "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.",
     "This room has already been upgraded.": "This room has already been upgraded.",