Merge pull request #6239 from matrix-org/t3chguy/fix/17605

Author: t3chguy

src/components/views/elements/AccessibleButton.tsx

@@ -62,6 +62,8 @@ export default function AccessibleButton({
  disabled,
  inputRef,
  className,
+ onKeyDown,
+ onKeyUp,
  ...restProps
 }: IProps) {
  const newProps: IAccessibleButtonProps = restProps;
@@ -83,6 +85,8 @@ export default function AccessibleButton({
  if (e.key === Key.SPACE) {
  e.stopPropagation();
  e.preventDefault();
+ } else {
+ onKeyDown?.(e);
  }
  };
  newProps.onKeyUp = (e) => {
@@ -94,6 +98,8 @@ export default function AccessibleButton({
  if (e.key === Key.ENTER) {
  e.stopPropagation();
  e.preventDefault();
+ } else {
+ onKeyUp?.(e);
  }
  };
  }

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { InputHTMLAttributes, LegacyRef } from "react";
+import React, { createRef, InputHTMLAttributes, LegacyRef } from "react";
 import classNames from "classnames";
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import RoomAvatar from "../avatars/RoomAvatar";
 import SpaceStore from "../../../stores/SpaceStore";
 import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
 import NotificationBadge from "../rooms/NotificationBadge";
-import { RovingAccessibleButton } from "../../../accessibility/roving/RovingAccessibleButton";
 import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton";
 import IconizedContextMenu, {
  IconizedContextMenuOption,
@@ -48,6 +47,7 @@ import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
 import { EventType } from "matrix-js-sdk/src/@types/event";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import { NotificationColor } from "../../../stores/notifications/NotificationColor";
+import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
 
 interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
  space?: Room;
@@ -62,11 +62,14 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
 interface IItemState {
  collapsed: boolean;
  contextMenuPosition: Pick<DOMRect, "right" | "top" | "height">;
+ childSpaces: Room[];
 }
 
 export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
  static contextType = MatrixClientContext;
 
+ private buttonRef = createRef<HTMLDivElement>();
+
  constructor(props) {
  super(props);
 
@@ -79,14 +82,36 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
  this.state = {
  collapsed: collapsed,
  contextMenuPosition: null,
+ childSpaces: this.childSpaces,
  };
+
+ SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate);
+ }
+
+ componentWillUnmount() {
+ SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate);
+ }
+
+ private onSpaceUpdate = () => {
+ this.setState({
+ childSpaces: this.childSpaces,
+ });
+ };
+
+ private get childSpaces() {
+ return SpaceStore.instance.getChildSpaces(this.props.space.roomId)
+ .filter(s => !this.props.parents?.has(s.roomId));
+ }
+
+ private get isCollapsed() {
+ return this.state.collapsed || this.props.isPanelCollapsed;
  }
 
- private toggleCollapse(evt) {
- if (this.props.onExpand && this.state.collapsed) {
+ private toggleCollapse = evt => {
+ if (this.props.onExpand && this.isCollapsed) {
  this.props.onExpand();
  }
- const newCollapsedState = !this.state.collapsed;
+ const newCollapsedState = !this.isCollapsed;
 
  SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState(
  this.props.space.roomId,
@@ -97,7 +122,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
  // don't bubble up so encapsulating button for space
  // doesn't get triggered
  evt.stopPropagation();
- }
+ };
 
  private onContextMenu = (ev: React.MouseEvent) => {
  if (this.props.space.getMyMembership() !== "join") return;
@@ -112,6 +137,43 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
  });
  }
 
+ private onKeyDown = (ev: React.KeyboardEvent) => {
+ let handled = true;
+ const action = getKeyBindingsManager().getRoomListAction(ev);
+ const hasChildren = this.state.childSpaces?.length;
+ switch (action) {
+ case RoomListAction.CollapseSection:
+ if (hasChildren && !this.isCollapsed) {
+ this.toggleCollapse(ev);
+ } else {
+ const parentItem = this.buttonRef?.current?.parentElement?.parentElement;
+ const parentButton = parentItem?.previousElementSibling as HTMLElement;
+ parentButton?.focus();
+ }
+ break;
+
+ case RoomListAction.ExpandSection:
+ if (hasChildren) {
+ if (this.isCollapsed) {
+ this.toggleCollapse(ev);
+ } else {
+ const childLevel = this.buttonRef?.current?.nextElementSibling;
+ const firstSpaceItemChild = childLevel?.querySelector<HTMLLIElement>(".mx_SpaceItem");
+ firstSpaceItemChild?.querySelector<HTMLDivElement>(".mx_SpaceButton")?.focus();
+ }
+ }
+ break;
+
+ default:
+ handled = false;
+ }
+
+ if (handled) {
+ ev.stopPropagation();
+ ev.preventDefault();
+ }
+ };
+
  private onClick = (ev: React.MouseEvent) => {
  ev.preventDefault();
  ev.stopPropagation();
@@ -305,16 +367,14 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
  const { space, activeSpaces, isNested, isPanelCollapsed, onExpand, parents, innerRef,
  ...otherProps } = this.props;
 
- const collapsed = this.state.collapsed || isPanelCollapsed;
+ const collapsed = this.isCollapsed;
 
- const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId)
- .filter(s => !parents?.has(s.roomId));
  const isActive = activeSpaces.includes(space);
  const itemClasses = classNames(this.props.className, {
  "mx_SpaceItem": true,
  "mx_SpaceItem_narrow": isPanelCollapsed,
  "collapsed": collapsed,
- "hasSubSpaces": childSpaces && childSpaces.length,
+ "hasSubSpaces": this.state.childSpaces?.length,
  });
 
  const isInvite = space.getMyMembership() === "invite";
@@ -329,9 +389,9 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
  : SpaceStore.instance.getNotificationState(space.roomId);
 
  let childItems;
- if (childSpaces && !collapsed) {
+ if (this.state.childSpaces?.length && !collapsed) {
  childItems = <SpaceTreeLevel
- spaces={childSpaces}
+ spaces={this.state.childSpaces}
  activeSpaces={activeSpaces}
  isNested={true}
  parents={new Set(parents).add(space.roomId)}
@@ -347,53 +407,36 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
  const avatarSize = isNested ? 24 : 32;
 
- const toggleCollapseButton = childSpaces && childSpaces.length ?
+ const toggleCollapseButton = this.state.childSpaces?.length ?
  <AccessibleButton
  className="mx_SpaceButton_toggleCollapse"
- onClick={evt => this.toggleCollapse(evt)}
+ onClick={this.toggleCollapse}
+ tabIndex={-1}
+ aria-label={collapsed ? _t("Expand") : _t("Collapse")}
  /> : null;
 
- let button;
- if (isPanelCollapsed) {
- button = (
+ return (
+ <li {...otherProps} className={itemClasses} ref={innerRef}>
  <RovingAccessibleTooltipButton
  className={classes}
  title={space.name}
  onClick={this.onClick}
  onContextMenu={this.onContextMenu}
- forceHide={!!this.state.contextMenuPosition}
+ forceHide={!isPanelCollapsed || !!this.state.contextMenuPosition}
  role="treeitem"
+ aria-expanded={!collapsed}
+ inputRef={this.buttonRef}
+ onKeyDown={this.onKeyDown}
  >
  { toggleCollapseButton }
  <div className="mx_SpaceButton_selectionWrapper">
  <RoomAvatar width={avatarSize} height={avatarSize} room={space} />
+ { !isPanelCollapsed && <span className="mx_SpaceButton_name">{ space.name }</span> }
  { notifBadge }
  { this.renderContextMenu() }
  </div>
  </RovingAccessibleTooltipButton>
- );
- } else {
- button = (
- <RovingAccessibleButton
- className={classes}
- onClick={this.onClick}
- onContextMenu={this.onContextMenu}
- role="treeitem"
- >
- { toggleCollapseButton }
- <div className="mx_SpaceButton_selectionWrapper">
- <RoomAvatar width={avatarSize} height={avatarSize} room={space} />
- <span className="mx_SpaceButton_name">{ space.name }</span>
- { notifBadge }
- { this.renderContextMenu() }
- </div>
- </RovingAccessibleButton>
- );
- }
 
- return (
- <li {...otherProps} className={itemClasses} ref={innerRef}>
- { button }
  { childItems }
  </li>
  );

src/i18n/strings/en_EN.json

@@ -1067,6 +1067,8 @@
  "Manage & explore rooms": "Manage & explore rooms",
  "Explore rooms": "Explore rooms",
  "Space options": "Space options",
+ "Expand": "Expand",
+ "Collapse": "Collapse",
  "Remove": "Remove",
  "This bridge was provisioned by <user />.": "This bridge was provisioned by <user />.",
  "This bridge is managed by <user />.": "This bridge is managed by <user />.",