Space panel accessibility improvements (#9157)

* Move the UserMenu out of the SpacePanel ul list

* Apply aria-selected to the spacepanel treeview

* Fix typing

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -130,7 +130,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     const cli = useContext(MatrixClientContext);
     const visibleRooms = useMemo(() => cli.getVisibleRooms().filter(r => r.getMyMembership() === "join"), [cli]);
 
-    const scrollRef = useRef<AutoHideScrollbar>();
+    const scrollRef = useRef<AutoHideScrollbar<"div">>();
     const [scrollState, setScrollState] = useState<IScrollState>({
         // these are estimates which update as soon as it mounts
         scrollTop: 0,

src/components/views/emojipicker/EmojiPicker.tsx

@@ -55,7 +55,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
     private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;
     private readonly categories: ICategory[];
 
-    private scrollRef = React.createRef<AutoHideScrollbar>();
+    private scrollRef = React.createRef<AutoHideScrollbar<"div">>();
 
     constructor(props: IProps) {
         super(props);

src/components/views/spaces/SpacePanel.tsx

@@ -132,6 +132,7 @@ const MetaSpaceButton = ({ selected, isPanelCollapsed, ...props }: IMetaSpaceBut
             "collapsed": isPanelCollapsed,
         })}
         role="treeitem"
+        aria-selected={selected}
     >
         <SpaceButton {...props} selected={selected} isNarrow={isPanelCollapsed} />
     </li>;
@@ -282,6 +283,9 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({
         style={isDraggingOver ? {
             pointerEvents: "none",
         } : undefined}
+        element="ul"
+        role="tree"
+        aria-label={_t("Spaces")}
     >
         { metaSpacesSection }
         { invites.map(s => (
@@ -321,7 +325,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({
 
 const SpacePanel = () => {
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
-    const ref = useRef<HTMLUListElement>();
+    const ref = useRef<HTMLDivElement>();
     useLayoutEffect(() => {
         UIStore.instance.trackElementDimensions("SpacePanel", ref.current);
         return () => UIStore.instance.stopTrackingElementDimensions("SpacePanel");
@@ -340,11 +344,9 @@ const SpacePanel = () => {
         }}>
             <RovingTabIndexProvider handleHomeEnd handleUpDown>
                 { ({ onKeyDownHandler }) => (
-                    <ul
+                    <div
                         className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
                         onKeyDown={onKeyDownHandler}
-                        role="tree"
-                        aria-label={_t("Spaces")}
                         ref={ref}
                     >
                         <UserMenu isPanelCollapsed={isPanelCollapsed}>
@@ -381,7 +383,7 @@ const SpacePanel = () => {
                         </Droppable>
 
                         <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
-                    </ul>
+                    </div>
                 ) }
             </RovingTabIndexProvider>
         </DragDropContext>

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -315,6 +315,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { tabIndex, ...restDragHandleProps } = dragHandleProps || {};
+        const selected = activeSpaces.includes(space.roomId);
 
         return (
             <li
@@ -322,13 +323,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 className={itemClasses}
                 ref={innerRef}
                 aria-expanded={hasChildren ? !collapsed : undefined}
+                aria-selected={selected}
                 role="treeitem"
             >
                 <SpaceButton
                     {...restDragHandleProps}
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
-                    selected={activeSpaces.includes(space.roomId)}
+                    selected={selected}
                     label={this.state.name}
                     contextMenuTooltip={_t("Space options")}
                     notificationState={notificationState}