Group room tiles in room sub list in the room list for ARIA

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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.",