Fix roving room list for resizer and ff tabstop a11y

src/accessibility/RovingTabIndex.js

@@ -129,7 +129,7 @@ const reducer = (state, action) => {
     }
 };
 
-export const RovingTabIndexProvider = ({children, handleHomeEnd}) => {
+export const RovingTabIndexProvider = ({children, handleHomeEnd, onKeyDown}) => {
     const [state, dispatch] = useReducer(reducer, {
         activeRef: null,
         refs: [],
@@ -137,53 +137,43 @@ export const RovingTabIndexProvider = ({children, handleHomeEnd}) => {
 
     const context = useMemo(() => ({state, dispatch}), [state]);
 
+    const onKeyDownHandler = useCallback((ev) => {
+        let handled = false;
         if (handleHomeEnd) {
-        return <RovingTabIndexContext.Provider value={context}>
-            <HomeEndHelper>
-                { children }
-            </HomeEndHelper>
-        </RovingTabIndexContext.Provider>;
-    }
-
-    return <RovingTabIndexContext.Provider value={context}>
-        { children }
-    </RovingTabIndexContext.Provider>;
-};
-RovingTabIndexProvider.propTypes = {
-    handleHomeEnd: PropTypes.bool,
-};
-
-// Helper to handle Home/End to jump to first/last roving-tab-index for widgets such as treeview
-export const HomeEndHelper = ({children}) => {
-    const context = useContext(RovingTabIndexContext);
-
-    const onKeyDown = useCallback((ev) => {
             // check if we actually have any items
-        if (context.state.refs.length <= 0) return;
-
-        let handled = true;
             switch (ev.key) {
                 case Key.HOME:
+                    handled = true;
                     // move focus to first item
+                    if (context.state.refs.length > 0) {
                         context.state.refs[0].current.focus();
+                    }
                     break;
                 case Key.END:
+                    handled = true;
                     // move focus to last item
+                    if (context.state.refs.length > 0) {
                         context.state.refs[context.state.refs.length - 1].current.focus();
+                    }
                     break;
-            default:
+            }
-                handled = false;
         }
 
         if (handled) {
             ev.preventDefault();
             ev.stopPropagation();
+        } else if (onKeyDown) {
+            return onKeyDown(ev);
         }
     }, [context.state]);
 
-    return <div onKeyDown={onKeyDown}>
+    return <RovingTabIndexContext.Provider value={context}>
-        { children }
+        { children({onKeyDownHandler}) }
-    </div>;
+    </RovingTabIndexContext.Provider>;
+};
+RovingTabIndexProvider.propTypes = {
+    handleHomeEnd: PropTypes.bool,
+    onKeyDown: PropTypes.func,
 };
 
 // Hook to register a roving tab index

src/components/structures/RoomSubList.js

@@ -142,10 +142,6 @@ export default class RoomSubList extends React.PureComponent {
 
     onHeaderKeyDown = (ev) => {
         switch (ev.key) {
-            case Key.TAB:
-                // Prevent LeftPanel handling Tab if focus is on the sublist header itself
-                ev.stopPropagation();
-                break;
             case Key.ARROW_LEFT:
                 // On ARROW_LEFT collapse the room sublist
                 if (!this.state.hidden && !this.props.forceExpand) {

src/components/views/groups/GroupInviteTile.js

@@ -128,7 +128,8 @@ export default createReactClass({
             'mx_RoomTile_badgeShown': this.state.badgeHover || isMenuDisplayed,
         });
 
-        const label = <div title={this.props.group.groupId} className={nameClasses} dir="auto">
+        // XXX: this is a workaround for Firefox giving this div a tabstop :( [tabIndex]
+        const label = <div title={this.props.group.groupId} className={nameClasses} tabIndex={-1} dir="auto">
             { groupName }
         </div>;
 

src/components/views/rooms/RoomList.js

@@ -777,10 +777,12 @@ export default createReactClass({
 
         const subListComponents = this._mapSubListProps(subLists);
 
-        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, ...props} = this.props; // eslint-disable-line
+        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, onKeyDown, ...props} = this.props; // eslint-disable-line
         return (
-            <div
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+                {({onKeyDownHandler}) => <div
                     {...props}
+                    onKeyDown={onKeyDownHandler}
                     ref={this._collectResizeContainer}
                     className="mx_RoomList"
                     role="tree"
@@ -788,10 +790,9 @@ export default createReactClass({
                     onMouseMove={this.onMouseMove}
                     onMouseLeave={this.onMouseLeave}
                 >
-                <RovingTabIndexProvider handleHomeEnd={true}>
                     { subListComponents }
+                </div> }
             </RovingTabIndexProvider>
-            </div>
         );
     },
 });

src/components/views/rooms/RoomTile.js

@@ -353,7 +353,8 @@ export default createReactClass({
             });
 
             subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
-            label = <div title={name} className={nameClasses} dir="auto">{ name }</div>;
+            // XXX: this is a workaround for Firefox giving this div a tabstop :( [tabIndex]
+            label = <div title={name} className={nameClasses} tabIndex={-1} dir="auto">{ name }</div>;
         } else if (this.state.hover) {
             const Tooltip = sdk.getComponent("elements.Tooltip");
             tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto" />;