iterate spaces treeview stuff

Author: t3chguy

res/css/structures/_SpaceRoomDirectory.scss

@@ -278,6 +278,10 @@ limitations under the License.
         }
     }
 
+    li.mx_SpaceRoomDirectory_roomTileWrapper {
+        list-style: none;
+    }
+
     .mx_SpaceRoomDirectory_roomTile,
     .mx_SpaceRoomDirectory_subspace_children {
         &::before {

src/accessibility/RovingTabIndex.tsx

@@ -196,7 +196,7 @@ export const RovingTabIndexProvider: React.FC<IProps> = ({ children, handleHomeE
                         handled = true;
                         if (context.state.refs.length > 0) {
                             const idx = context.state.refs.indexOf(context.state.activeRef);
-                            if (idx > 1) {
+                            if (idx > 0) {
                                 context.state.refs[idx - 1].current.focus();
                             }
                         }

src/components/structures/SpaceRoomDirectory.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode, KeyboardEvent, useMemo, useState } from "react";
+import React, { ReactNode, KeyboardEvent, useMemo, useState, KeyboardEventHandler } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 import { ISpaceSummaryRoom, ISpaceSummaryEvent } from "matrix-js-sdk/src/@types/spaces";
@@ -185,8 +185,9 @@ const Tile: React.FC<ITileProps> = ({
         </div>
     </React.Fragment>;
 
-    let childToggle;
-    let childSection;
+    let childToggle: JSX.Element;
+    let childSection: JSX.Element;
+    let onKeyDown: KeyboardEventHandler;
     if (children) {
         // the chevron is purposefully a div rather than a button as it should be ignored for a11y
         childToggle = <div
@@ -216,36 +217,41 @@ const Tile: React.FC<ITileProps> = ({
                 { children }
             </div>;
         }
-    }
 
-    const onKeyDown = children ? (e) => {
-        let handled = false;
+        onKeyDown = (e) => {
+            let handled = false;
 
-        switch (e.key) {
-            case Key.ARROW_LEFT:
-                if (showChildren) {
-                    handled = true;
-                    toggleShowChildren();
-                }
-                break;
+            switch (e.key) {
+                case Key.ARROW_LEFT:
+                    if (showChildren) {
+                        handled = true;
+                        toggleShowChildren();
+                    }
+                    break;
 
-            case Key.ARROW_RIGHT:
-                handled = true;
-                if (showChildren) {
-                    (ref.current?.nextElementSibling?.firstElementChild as HTMLElement)?.focus();
-                } else {
-                    toggleShowChildren();
-                }
-                break;
-        }
+                case Key.ARROW_RIGHT:
+                    handled = true;
+                    if (showChildren) {
+                        const childSection = ref.current?.nextElementSibling;
+                        childSection?.querySelector<HTMLDivElement>(".mx_SpaceRoomDirectory_roomTile")?.focus();
+                    } else {
+                        toggleShowChildren();
+                    }
+                    break;
+            }
 
-        if (handled) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    } : undefined;
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
 
-    return <>
+    return <li
+        className="mx_SpaceRoomDirectory_roomTileWrapper"
+        role="treeitem"
+        aria-expanded={children ? showChildren : undefined}
+    >
         <AccessibleButton
             className={classNames("mx_SpaceRoomDirectory_roomTile", {
                 mx_SpaceRoomDirectory_subspace: room.room_type === RoomType.Space,
@@ -255,14 +261,12 @@ const Tile: React.FC<ITileProps> = ({
             inputRef={ref}
             onFocus={onFocus}
             tabIndex={isActive ? 0 : -1}
-            aria-expanded={children ? showChildren : undefined}
-            role="treeitem"
         >
             { content }
             { childToggle }
         </AccessibleButton>
         { childSection }
-    </>;
+    </li>;
 };
 
 export const showRoom = (room: ISpaceSummaryRoom, viaServers?: string[], autoJoin = false) => {

src/components/views/spaces/SpacePanel.tsx

@@ -100,9 +100,12 @@ const HomeButton = ({ selected, isPanelCollapsed }: IHomeButtonProps) => {
         return SpaceStore.instance.allRoomsInHome;
     });
 
-    return <li className={classNames("mx_SpaceItem", {
-        "collapsed": isPanelCollapsed,
-    })}>
+    return <li
+        className={classNames("mx_SpaceItem", {
+            "collapsed": isPanelCollapsed,
+        })}
+        role="treeitem"
+    >
         <SpaceButton
             className="mx_SpaceButton_home"
             onClick={() => SpaceStore.instance.setActiveSpace(null)}
@@ -142,9 +145,12 @@ const CreateSpaceButton = ({
         openMenu();
     };
 
-    return <li className={classNames("mx_SpaceItem", {
-        "collapsed": isPanelCollapsed,
-    })}>
+    return <li
+        className={classNames("mx_SpaceItem", {
+            "collapsed": isPanelCollapsed,
+        })}
+        role="treeitem"
+    >
         <SpaceButton
             className={classNames("mx_SpaceButton_new", {
                 mx_SpaceButton_newCancel: menuDisplayed,

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -113,7 +113,6 @@ export const SpaceButton: React.FC<IButtonProps> = ({
             onClick={onClick}
             onContextMenu={openMenu}
             forceHide={!isNarrow || menuDisplayed}
-            role="treeitem"
             inputRef={handle}
         >
             { children }
@@ -290,7 +289,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             /> : null;
 
         return (
-            <li {...otherProps} className={itemClasses} ref={innerRef}>
+            <li {...otherProps} className={itemClasses} ref={innerRef} aria-expanded={!collapsed} role="treeitem">
                 <SpaceButton
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
@@ -302,9 +301,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                     avatarSize={isNested ? 24 : 32}
                     onClick={this.onClick}
                     onKeyDown={this.onKeyDown}
-                    aria-expanded={!collapsed}
-                    ContextMenuComponent={this.props.space.getMyMembership() === "join"
-                        ? SpaceContextMenu : undefined}
+                    ContextMenuComponent={this.props.space.getMyMembership() === "join" ? SpaceContextMenu : undefined}
                 >
                     { toggleCollapseButton }
                 </SpaceButton>