From 40f9302ec952904ebcc5ac9017e8ec32951dc838 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 3 Sep 2021 14:24:02 +0100
Subject: [PATCH 1/3] Space panel fix aria-expanded being set to false on nodes
 without children

---
 src/components/views/spaces/SpaceTreeLevel.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 399c137e97..3561fd19bf 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -270,8 +270,10 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             ? StaticNotificationState.forSymbol("!", NotificationColor.Red)
             : SpaceStore.instance.getNotificationState(space.roomId);
 
+        const hasChildren = this.state.childSpaces?.length;
+
         let childItems;
-        if (this.state.childSpaces?.length && !collapsed) {
+        if (hasChildren && !collapsed) {
             childItems = <SpaceTreeLevel
                 spaces={this.state.childSpaces}
                 activeSpaces={activeSpaces}
@@ -280,7 +282,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             />;
         }
 
-        const toggleCollapseButton = this.state.childSpaces?.length ?
+        const toggleCollapseButton = hasChildren ?
             <AccessibleButton
                 className="mx_SpaceButton_toggleCollapse"
                 onClick={this.toggleCollapse}
@@ -289,7 +291,13 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             /> : null;
 
         return (
-            <li {...otherProps} className={itemClasses} ref={innerRef} aria-expanded={!collapsed} role="treeitem">
+            <li
+                {...otherProps}
+                className={itemClasses}
+                ref={innerRef}
+                aria-expanded={hasChildren ? !collapsed : undefined}
+                role="treeitem"
+            >
                 <SpaceButton
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}

From 6a40dfea403f2b410b614d462e2e0c8dce5a57ee Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 3 Sep 2021 15:10:51 +0100
Subject: [PATCH 2/3] Fix keyboard dnd messing with roving tabindex

---
 src/components/views/spaces/SpacePanel.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index d2e09c0d69..d3e41f8e58 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -223,6 +223,8 @@ const SpacePanel = () => {
     }, []);
 
     const onKeyDown = (ev: React.KeyboardEvent) => {
+        if (ev.defaultPrevented) return;
+
         let handled = true;
 
         switch (ev.key) {

From 898de13ca717cda3138628b184ecd41844693d62 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 6 Sep 2021 08:54:08 +0100
Subject: [PATCH 3/3] Consolidate roving tab index controls in the space panel
 buttons with dnd

---
 src/components/views/spaces/SpacePanel.tsx    |  6 ++---
 .../views/spaces/SpaceTreeLevel.tsx           | 22 ++++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index d3e41f8e58..d223f5b6a6 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -195,12 +195,10 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
                 { (provided, snapshot) => (
                     <SpaceItem
                         {...provided.draggableProps}
-                        {...provided.dragHandleProps}
+                        dragHandleProps={provided.dragHandleProps}
                         key={s.roomId}
                         innerRef={provided.innerRef}
-                        className={snapshot.isDragging
-                            ? "mx_SpaceItem_dragging"
-                            : undefined}
+                        className={snapshot.isDragging ? "mx_SpaceItem_dragging" : undefined}
                         space={s}
                         activeSpaces={activeSpaces}
                         isPanelCollapsed={isPanelCollapsed}
diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx
index 3561fd19bf..dda58ae944 100644
--- a/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -29,7 +29,6 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
 import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
-import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import { toRightOf, useContextMenu } from "../../structures/ContextMenu";
@@ -40,8 +39,11 @@ import { NotificationColor } from "../../../stores/notifications/NotificationCol
 import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
+import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 
-interface IButtonProps extends Omit<ComponentProps<typeof RovingAccessibleTooltipButton>, "title"> {
+interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title"> {
     space?: Room;
     className?: string;
     selected?: boolean;
@@ -68,7 +70,9 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     ContextMenuComponent,
     ...props
 }) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLElement>();
+    const [menuDisplayed, ref, openMenu, closeMenu] = useContextMenu<HTMLElement>();
+    const [onFocus, isActive, handle] = useRovingTabIndex(ref);
+    const tabIndex = isActive ? 0 : -1;
 
     let avatar = <div className="mx_SpaceButton_avatarPlaceholder"><div className="mx_SpaceButton_icon" /></div>;
     if (space) {
@@ -88,6 +92,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
                 forceCount={false}
                 notification={notificationState}
                 aria-label={ariaLabel}
+                tabIndex={tabIndex}
             />
         </div>;
     }
@@ -102,7 +107,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     }
 
     return (
-        <RovingAccessibleTooltipButton
+        <AccessibleTooltipButton
             {...props}
             className={classNames("mx_SpaceButton", className, {
                 mx_SpaceButton_active: selected,
@@ -114,6 +119,8 @@ export const SpaceButton: React.FC<IButtonProps> = ({
             onContextMenu={openMenu}
             forceHide={!isNarrow || menuDisplayed}
             inputRef={handle}
+            tabIndex={tabIndex}
+            onFocus={onFocus}
         >
             { children }
             <div className="mx_SpaceButton_selectionWrapper">
@@ -130,7 +137,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
 
                 { contextMenu }
             </div>
-        </RovingAccessibleTooltipButton>
+        </AccessibleTooltipButton>
     );
 };
 
@@ -142,6 +149,7 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
     onExpand?: Function;
     parents?: Set<string>;
     innerRef?: LegacyRef<HTMLLIElement>;
+    dragHandleProps?: DraggableProvidedDragHandleProps;
 }
 
 interface IItemState {
@@ -290,6 +298,9 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 aria-label={collapsed ? _t("Expand") : _t("Collapse")}
             /> : null;
 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { tabIndex, ...dragHandleProps } = this.props.dragHandleProps || {};
+
         return (
             <li
                 {...otherProps}
@@ -299,6 +310,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
                 role="treeitem"
             >
                 <SpaceButton
+                    {...dragHandleProps}
                     space={space}
                     className={isInvite ? "mx_SpaceButton_invite" : undefined}
                     selected={activeSpaces.includes(space)}