Merge pull request #3556 from matrix-org/t3chguy/a11y4

Use Navigation Treeview pattern for RoomList Accessibility

src/components/views/elements/AccessibleButton.js

@@ -67,8 +67,6 @@ export default function AccessibleButton(props) {
     restProps.ref = restProps.inputRef;
     delete restProps.inputRef;
 
-    restProps.tabIndex = restProps.tabIndex || "0";
-    restProps.role = restProps.role || "button";
     restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
 
     if (kind) {
@@ -93,19 +91,30 @@ export default function AccessibleButton(props) {
  */
 AccessibleButton.propTypes = {
     children: PropTypes.node,
-    inputRef: PropTypes.func,
+    inputRef: PropTypes.oneOfType([
+        // Either a function
+        PropTypes.func,
+        // Or the instance of a DOM native element
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
     element: PropTypes.string,
     onClick: PropTypes.func.isRequired,
 
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
     kind: PropTypes.string,
+    // The ARIA role
+    role: PropTypes.string,
+    // The tabIndex
+    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
     disabled: PropTypes.bool,
 };
 
 AccessibleButton.defaultProps = {
     element: 'div',
+    role: 'button',
+    tabIndex: "0",
 };
 
 AccessibleButton.displayName = "AccessibleButton";

src/components/views/rooms/RoomList.js

@@ -49,21 +49,6 @@ function labelForTagName(tagName) {
     return tagName;
 }
 
-function phraseForSection(section) {
-    switch (section) {
-        case 'm.favourite':
-            return _t('Drop here to favourite');
-        case 'im.vector.fake.direct':
-            return _t('Drop here to tag direct chat');
-        case 'im.vector.fake.recent':
-            return _t('Drop here to restore');
-        case 'm.lowpriority':
-            return _t('Drop here to demote');
-        default:
-            return _t('Drop here to tag %(section)s', {section: section});
-    }
-}
-
 module.exports = createReactClass({
     displayName: 'RoomList',
 
@@ -203,7 +188,7 @@ module.exports = createReactClass({
         this.resizer.setClassNames({
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse"
+            reverse: "mx_ResizeHandle_reverse",
         });
         this._layout.update(
             this._layoutSections,
@@ -584,23 +569,6 @@ module.exports = createReactClass({
         }
     },
 
-    _getHeaderItems: function(section) {
-        const StartChatButton = sdk.getComponent('elements.StartChatButton');
-        const RoomDirectoryButton = sdk.getComponent('elements.RoomDirectoryButton');
-        const CreateRoomButton = sdk.getComponent('elements.CreateRoomButton');
-        switch (section) {
-            case 'im.vector.fake.direct':
-                return <span className="mx_RoomList_headerButtons">
-                    <StartChatButton size="16" />
-                </span>;
-            case 'im.vector.fake.recent':
-                return <span className="mx_RoomList_headerButtons">
-                    <RoomDirectoryButton size="16" />
-                    <CreateRoomButton size="16" />
-                </span>;
-        }
-    },
-
     _makeGroupInviteTiles(filter) {
         const ret = [];
         const lcFilter = filter && filter.toLowerCase();
@@ -676,7 +644,7 @@ module.exports = createReactClass({
             props = Object.assign({}, defaultProps, props);
             const isLast = i === subListsProps.length - 1;
             const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
-            const {key, label, onHeaderClick, ... otherProps} = props;
+            const {key, label, onHeaderClick, ...otherProps} = props;
             const chosenKey = key || label;
             const onSubListHeaderClick = (collapsed) => {
                 this._handleCollapsedState(chosenKey, collapsed);
@@ -746,16 +714,14 @@ module.exports = createReactClass({
                 list: this.state.lists['im.vector.fake.direct'],
                 label: _t('People'),
                 tagName: "im.vector.fake.direct",
-                headerItems: this._getHeaderItems('im.vector.fake.direct'),
                 order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.direct'),
-                onAddRoom: () => {dis.dispatch({action: 'view_create_chat'})},
+                onAddRoom: () => {dis.dispatch({action: 'view_create_chat'});},
                 addRoomLabel: _t("Start chat"),
             },
             {
                 list: this.state.lists['im.vector.fake.recent'],
                 label: _t('Rooms'),
-                headerItems: this._getHeaderItems('im.vector.fake.recent'),
                 order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_room'});},
@@ -805,7 +771,7 @@ module.exports = createReactClass({
         const subListComponents = this._mapSubListProps(subLists);
 
         return (
-            <div ref={this._collectResizeContainer} className="mx_RoomList" role="listbox" aria-label={_t("Rooms")}
+            <div ref={this._collectResizeContainer} className="mx_RoomList" role="tree" aria-label={_t("Rooms")}
                  onMouseMove={this.onMouseMove} onMouseLeave={this.onMouseLeave}>
                 { subListComponents }
             </div>

src/components/views/rooms/RoomTile.js

@@ -398,7 +398,8 @@ module.exports = createReactClass({
                                  onMouseLeave={this.onMouseLeave}
                                  onContextMenu={this.onContextMenu}
                                  aria-label={ariaLabel}
-                                 role="option"
+                                 aria-selected={this.state.selected}
+                                 role="treeitem"
         >
             <div className={avatarClasses}>
                 <div className="mx_RoomTile_avatar_container">