From 66b3feb802b913b9500ee38c8807f2535eb4ec99 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 11:50:00 +0100 Subject: [PATCH 1/2] Fix keyboard accessibility of the space panel --- .../views/elements/AccessibleButton.tsx | 6 + .../views/spaces/SpaceTreeLevel.tsx | 145 +++++++++++------- 2 files changed, 98 insertions(+), 53 deletions(-) diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index e634057a21..05bcca24b2 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/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); } }; } diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index f34baf256b..b3577e436a 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -14,23 +14,22 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { createRef } from "react"; import classNames from "classnames"; -import {Room} from "matrix-js-sdk/src/models/room"; +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 { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton"; import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList, } from "../context_menus/IconizedContextMenu"; -import {_t} from "../../../languageHandler"; -import {ContextMenuTooltipButton} from "../../../accessibility/context_menu/ContextMenuTooltipButton"; -import {toRightOf} from "../../structures/ContextMenu"; +import { _t } from "../../../languageHandler"; +import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton"; +import { toRightOf } from "../../structures/ContextMenu"; import { shouldShowSpaceSettings, showAddExistingRooms, @@ -39,15 +38,16 @@ import { showSpaceSettings, } from "../../../utils/space"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; -import AccessibleButton, {ButtonEvent} from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import defaultDispatcher from "../../../dispatcher/dispatcher"; -import {Action} from "../../../dispatcher/actions"; +import { Action } from "../../../dispatcher/actions"; import RoomViewStore from "../../../stores/RoomViewStore"; -import {SetRightPanelPhasePayload} from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; -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 { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload"; +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 { space?: Room; @@ -61,11 +61,14 @@ interface IItemProps { interface IItemState { collapsed: boolean; contextMenuPosition: Pick; + childSpaces: Room[]; } export class SpaceItem extends React.PureComponent { static contextType = MatrixClientContext; + private buttonRef = createRef(); + constructor(props) { super(props); @@ -78,14 +81,36 @@ export class SpaceItem extends React.PureComponent { this.state = { collapsed: collapsed, contextMenuPosition: null, + childSpaces: this.childSpaces, }; + + SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate); } - private toggleCollapse(evt) { - if (this.props.onExpand && this.state.collapsed) { + 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.isCollapsed) { this.props.onExpand(); } - const newCollapsedState = !this.state.collapsed; + const newCollapsedState = !this.isCollapsed; SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState( this.props.space.roomId, @@ -96,7 +121,7 @@ export class SpaceItem extends React.PureComponent { // 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; @@ -111,6 +136,43 @@ export class SpaceItem extends React.PureComponent { }); } + 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(".mx_SpaceItem"); + firstSpaceItemChild?.querySelector(".mx_SpaceButton")?.focus(); + } + } + break; + + default: + handled = false; + } + + if (handled) { + ev.stopPropagation(); + ev.preventDefault(); + } + }; + private onClick = (ev: React.MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); @@ -302,18 +364,15 @@ export class SpaceItem extends React.PureComponent { render() { const {space, activeSpaces, isNested} = this.props; - const forceCollapsed = this.props.isPanelCollapsed; const isNarrow = this.props.isPanelCollapsed; - const collapsed = this.state.collapsed || forceCollapsed; + const collapsed = this.isCollapsed; - const childSpaces = SpaceStore.instance.getChildSpaces(space.roomId) - .filter(s => !this.props.parents?.has(s.roomId)); const isActive = activeSpaces.includes(space); const itemClasses = classNames({ "mx_SpaceItem": true, "mx_SpaceItem_narrow": isNarrow, "collapsed": collapsed, - "hasSubSpaces": childSpaces && childSpaces.length, + "hasSubSpaces": this.state.childSpaces?.length, }); const isInvite = space.getMyMembership() === "invite"; @@ -328,9 +387,9 @@ export class SpaceItem extends React.PureComponent { : SpaceStore.instance.getNotificationState(space.roomId); let childItems; - if (childSpaces && !collapsed) { + if (this.state.childSpaces?.length && !collapsed) { childItems = { const avatarSize = isNested ? 24 : 32; - const toggleCollapseButton = childSpaces && childSpaces.length ? + const toggleCollapseButton = this.state.childSpaces?.length ? this.toggleCollapse(evt)} + onClick={this.toggleCollapse} /> : null; - let button; - if (isNarrow) { - button = ( + return ( +
  • { toggleCollapseButton }
    + { !isNarrow && { space.name } } { notifBadge } { this.renderContextMenu() }
    - ); - } else { - button = ( - - { toggleCollapseButton } -
    - - { space.name } - { notifBadge } - { this.renderContextMenu() } -
    -     - ); - } - return ( -
  • - { button } { childItems }
    • ); From 1f0fdb95cd2f52731cc1ca2253a249a00fe8a83c Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 22 Jun 2021 11:59:04 +0100 Subject: [PATCH 2/2] Improve accessibility of subspaces in the space panel --- src/components/views/spaces/SpaceTreeLevel.tsx | 3 +++ src/i18n/strings/en_EN.json | 2 ++ 2 files changed, 5 insertions(+) diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index b3577e436a..cbc1cab86b 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -409,6 +409,8 @@ export class SpaceItem extends React.PureComponent { : null; return ( @@ -420,6 +422,7 @@ export class SpaceItem extends React.PureComponent { onContextMenu={this.onContextMenu} forceHide={!isNarrow || !!this.state.contextMenuPosition} role="treeitem" + aria-expanded={!collapsed} inputRef={this.buttonRef} onKeyDown={this.onKeyDown} > diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b88dc79da5..a2fb93dc17 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1038,6 +1038,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 .": "This bridge was provisioned by .", "This bridge is managed by .": "This bridge is managed by .",