PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Tooltip: improve accessibility of spaces (#12497)

Browse source 
* Migrate to `AccessibleButtons`

* Update snapshots
This commit is contained in:
Florian Duros 2024-05-03 16:07:11 +02:00 committed by GitHub
parent 050f61752f
commit 2f3c84f1f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 52 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/structures/LeftPanel.tsx
View file

@ -26,7 +26,6 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
import RoomSearch from "./RoomSearch"; import RoomSearch from "./RoomSearch";
import ResizeNotifier from "../../utils/ResizeNotifier"; import ResizeNotifier from "../../utils/ResizeNotifier";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import SpaceStore from "../../stores/spaces/SpaceStore"; import SpaceStore from "../../stores/spaces/SpaceStore";
import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces"; import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
import { getKeyBindingsManager } from "../../KeyBindingsManager"; import { getKeyBindingsManager } from "../../KeyBindingsManager";
@ -41,7 +40,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
import { UIComponent } from "../../settings/UIFeature"; import { UIComponent } from "../../settings/UIFeature";
import { ButtonEvent } from "../views/elements/AccessibleButton"; import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import PosthogTrackers from "../../PosthogTrackers"; import PosthogTrackers from "../../PosthogTrackers";
import PageType from "../../PageTypes"; import PageType from "../../PageTypes";
import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton"; import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
@ -333,7 +332,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
// to start a new call // to start a new call
if (LegacyCallHandler.instance.getSupportsPstnProtocol()) { if (LegacyCallHandler.instance.getSupportsPstnProtocol()) {
dialPadButton = ( dialPadButton = (
<AccessibleTooltipButton <AccessibleButton
className={classNames("mx_LeftPanel_dialPadButton", {})} className={classNames("mx_LeftPanel_dialPadButton", {})}
onClick={this.onDialPad} onClick={this.onDialPad}
title={_t("left_panel|open_dial_pad")} title={_t("left_panel|open_dial_pad")}
@ -344,7 +343,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
let rightButton: JSX.Element | undefined; let rightButton: JSX.Element | undefined;
if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) { if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
rightButton = ( rightButton = (
<AccessibleTooltipButton <AccessibleButton
className="mx_LeftPanel_exploreButton" className="mx_LeftPanel_exploreButton"
onClick={this.onExplore} onClick={this.onExplore}
title={_t("action|explore_rooms")} title={_t("action|explore_rooms")}

35
src/components/structures/SpaceHierarchy.tsx
View file

@ -15,7 +15,6 @@ limitations under the License.
*/ */
import React, { import React, {
ComponentProps,
Dispatch, Dispatch,
KeyboardEvent, KeyboardEvent,
KeyboardEventHandler, KeyboardEventHandler,
@ -62,7 +61,6 @@ import InfoTooltip from "../views/elements/InfoTooltip";
import TextWithTooltip from "../views/elements/TextWithTooltip"; import TextWithTooltip from "../views/elements/TextWithTooltip";
import { useStateToggle } from "../../hooks/useStateToggle"; import { useStateToggle } from "../../hooks/useStateToggle";
import { getChildOrder } from "../../stores/spaces/SpaceStore"; import { getChildOrder } from "../../stores/spaces/SpaceStore";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { Linkify, topicToHtml } from "../../HtmlUtils"; import { Linkify, topicToHtml } from "../../HtmlUtils";
import { useDispatcher } from "../../hooks/useDispatcher"; import { useDispatcher } from "../../hooks/useDispatcher";
import { Action } from "../../dispatcher/actions"; import { Action } from "../../dispatcher/actions";
@ -75,7 +73,6 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload"; import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../KeyBindingsManager"; import { getKeyBindingsManager } from "../../KeyBindingsManager";
import { Alignment } from "../views/elements/Tooltip";
import { getTopic } from "../../hooks/room/useTopic"; import { getTopic } from "../../hooks/room/useTopic";
import { SdkContextClass } from "../../contexts/SDKContext"; import { SdkContextClass } from "../../contexts/SDKContext";
import { getDisplayAliasForAliasSet } from "../../Rooms"; import { getDisplayAliasForAliasSet } from "../../Rooms";
@ -148,7 +145,7 @@ const Tile: React.FC<ITileProps> = ({
let button: ReactElement; let button: ReactElement;
if (busy) { if (busy) {
button = ( button = (
<AccessibleTooltipButton <AccessibleButton
disabled={true} disabled={true}
onClick={onJoinClick} onClick={onJoinClick}
kind="primary_outline" kind="primary_outline"
@ -157,7 +154,7 @@ const Tile: React.FC<ITileProps> = ({
title={_t("space|joining_space")} title={_t("space|joining_space")}
> >
<Spinner w={24} h={24} /> <Spinner w={24} h={24} />
</AccessibleTooltipButton> </AccessibleButton>
); );
} else if (joinedRoom || room.join_rule === JoinRule.Knock) { } else if (joinedRoom || room.join_rule === JoinRule.Knock) {
// If the room is knockable, show the "View" button even if we are not a member; that // If the room is knockable, show the "View" button even if we are not a member; that
@ -670,25 +667,16 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
const disabled = !selectedRelations.length || removing || saving; const disabled = !selectedRelations.length || removing || saving;
let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
let props: Partial<ComponentProps<typeof AccessibleTooltipButton>> = {};
if (!selectedRelations.length) {
Button = AccessibleTooltipButton;
props = {
tooltip: _t("space|select_room_below"),
alignment: Alignment.Top,
};
}
let buttonText = _t("common|saving"); let buttonText = _t("common|saving");
if (!saving) { if (!saving) {
buttonText = selectionAllSuggested ? _t("space|unmark_suggested") : _t("space|mark_suggested"); buttonText = selectionAllSuggested ? _t("space|unmark_suggested") : _t("space|mark_suggested");
} }
const title = !selectedRelations.length ? _t("space|select_room_below") : undefined;
return ( return (
<> <>
<Button <AccessibleButton
{...props}
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
setRemoving(true); setRemoving(true);
try { try {
@ -719,11 +707,13 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
}} }}
kind="danger_outline" kind="danger_outline"
disabled={disabled} disabled={disabled}
aria-label={removing ? _t("redact|ongoing") : _t("action|remove")}
title={title}
placement="top"
> >
{removing ? _t("redact|ongoing") : _t("action|remove")} {removing ? _t("redact|ongoing") : _t("action|remove")}
</Button> </AccessibleButton>
<Button <AccessibleButton
{...props}
onClick={async (): Promise<void> => { onClick={async (): Promise<void> => {
setSaving(true); setSaving(true);
try { try {
@ -750,9 +740,12 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
}} }}
kind="primary_outline" kind="primary_outline"
disabled={disabled} disabled={disabled}
aria-label={buttonText}
title={title}
placement="top"
> >
{buttonText} {buttonText}
</Button> </AccessibleButton>
</> </>
); );
}; };

3
src/components/structures/SpaceRoomView.tsx
View file

@ -60,7 +60,6 @@ import {
defaultRoomsRenderer, defaultRoomsRenderer,
} from "../views/dialogs/AddExistingToSpaceDialog"; } from "../views/dialogs/AddExistingToSpaceDialog";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import ErrorBoundary from "../views/elements/ErrorBoundary"; import ErrorBoundary from "../views/elements/ErrorBoundary";
import Field from "../views/elements/Field"; import Field from "../views/elements/Field";
import RoomFacePile from "../views/elements/RoomFacePile"; import RoomFacePile from "../views/elements/RoomFacePile";
@ -248,7 +247,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
let settingsButton; let settingsButton;
if (shouldShowSpaceSettings(space)) { if (shouldShowSpaceSettings(space)) {
settingsButton = ( settingsButton = (
<AccessibleTooltipButton <AccessibleButton
className="mx_SpaceRoomView_landing_settingsButton" className="mx_SpaceRoomView_landing_settingsButton"
onClick={() => { onClick={() => {
showSpaceSettings(space); showSpaceSettings(space);

9
src/components/views/spaces/QuickSettingsButton.tsx
View file

@ -18,7 +18,6 @@ import React from "react";
import classNames from "classnames"; import classNames from "classnames";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu"; import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
import AccessibleButton from "../elements/AccessibleButton"; import AccessibleButton from "../elements/AccessibleButton";
import StyledCheckbox from "../elements/StyledCheckbox"; import StyledCheckbox from "../elements/StyledCheckbox";
@ -130,16 +129,16 @@ const QuickSettingsButton: React.FC<{
return ( return (
<> <>
<AccessibleTooltipButton <AccessibleButton
className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })} className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
onClick={openMenu} onClick={openMenu}
title={_t("quick_settings|title")} aria-label={_t("quick_settings|title")}
title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
ref={handle} ref={handle}
forceHide={!isPanelCollapsed}
aria-expanded={!isPanelCollapsed} aria-expanded={!isPanelCollapsed}
> >
{!isPanelCollapsed ? _t("common|settings") : null} {!isPanelCollapsed ? _t("common|settings") : null}
</AccessibleTooltipButton> </AccessibleButton>
{contextMenu} {contextMenu}
</> </>

3
src/components/views/spaces/SpaceCreateMenu.tsx
View file

@ -38,7 +38,6 @@ import {
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import ContextMenu, { ChevronFace } from "../../structures/ContextMenu"; import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
import createRoom, { IOpts as ICreateOpts } from "../../../createRoom"; import createRoom, { IOpts as ICreateOpts } from "../../../createRoom";
import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
@ -310,7 +309,7 @@ const SpaceCreateMenu: React.FC<{
} else { } else {
body = ( body = (
<React.Fragment> <React.Fragment>
<AccessibleTooltipButton <AccessibleButton
className="mx_SpaceCreateMenu_back" className="mx_SpaceCreateMenu_back"
onClick={() => setVisibility(null)} onClick={() => setVisibility(null)}
title={_t("action|go_back")} title={_t("action|go_back")}

18
src/components/views/spaces/SpacePanel.tsx
View file

@ -34,7 +34,6 @@ import { _t } from "../../../languageHandler";
import { useContextMenu } from "../../structures/ContextMenu"; import { useContextMenu } from "../../structures/ContextMenu";
import SpaceCreateMenu from "./SpaceCreateMenu"; import SpaceCreateMenu from "./SpaceCreateMenu";
import { SpaceButton, SpaceItem } from "./SpaceTreeLevel"; import { SpaceButton, SpaceItem } from "./SpaceTreeLevel";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter"; import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter";
import SpaceStore from "../../../stores/spaces/SpaceStore"; import SpaceStore from "../../../stores/spaces/SpaceStore";
import { import {
@ -73,6 +72,7 @@ import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { UIComponent } from "../../../settings/UIFeature"; import { UIComponent } from "../../../settings/UIFeature";
import { ThreadsActivityCentre } from "./threads-activity-centre/"; import { ThreadsActivityCentre } from "./threads-activity-centre/";
import AccessibleButton from "../elements/AccessibleButton";
const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@ -389,24 +389,18 @@ const SpacePanel: React.FC = () => {
aria-label={_t("common|spaces")} aria-label={_t("common|spaces")}
> >
<UserMenu isPanelCollapsed={isPanelCollapsed}> <UserMenu isPanelCollapsed={isPanelCollapsed}>
<AccessibleTooltipButton <AccessibleButton
className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })} className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
onClick={() => setPanelCollapsed(!isPanelCollapsed)} onClick={() => setPanelCollapsed(!isPanelCollapsed)}
title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
tooltip={ // TODO should use a kbd element for accessibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
<div> caption={
<div className="mx_Tooltip_title"> IS_MAC
{isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
</div>
<div className="mx_Tooltip_sub">
{IS_MAC
? "⌘ + ⇧ + D" ? "⌘ + ⇧ + D"
: _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) +
" + " + " + " +
_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + _t(ALTERNATE_KEY_NAME[Key.SHIFT]) +
" + D"} " + D"
</div>
</div>
} }
/> />
</UserMenu> </UserMenu>

11
src/components/views/spaces/SpaceTreeLevel.tsx
View file

@ -45,12 +45,11 @@ import { NotificationLevel } from "../../../stores/notifications/NotificationLev
import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { NotificationState } from "../../../stores/notifications/NotificationState"; import { NotificationState } from "../../../stores/notifications/NotificationState";
import SpaceContextMenu from "../context_menus/SpaceContextMenu"; import SpaceContextMenu from "../context_menus/SpaceContextMenu";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex"; import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
type ButtonProps<T extends keyof JSX.IntrinsicElements> = Omit< type ButtonProps<T extends keyof JSX.IntrinsicElements> = Omit<
ComponentProps<typeof AccessibleTooltipButton<T>>, ComponentProps<typeof AccessibleButton<T>>,
"title" | "onClick" | "size" | "element" "title" | "onClick" | "size" | "element"
> & { > & {
space?: Room; space?: Room;
@ -143,17 +142,17 @@ export const SpaceButton = <T extends keyof JSX.IntrinsicElements>({
const onClick = props.onClick ?? (selected && space ? viewSpaceHome : activateSpace); const onClick = props.onClick ?? (selected && space ? viewSpaceHome : activateSpace);
return ( return (
<AccessibleTooltipButton <AccessibleButton
{...props} {...props}
className={classNames("mx_SpaceButton", className, { className={classNames("mx_SpaceButton", className, {
mx_SpaceButton_active: selected, mx_SpaceButton_active: selected,
mx_SpaceButton_hasMenuOpen: menuDisplayed, mx_SpaceButton_hasMenuOpen: menuDisplayed,
mx_SpaceButton_narrow: isNarrow, mx_SpaceButton_narrow: isNarrow,
})} })}
title={label} aria-label={label}
title={!isNarrow || menuDisplayed ? undefined : label}
onClick={onClick} onClick={onClick}
onContextMenu={openMenu} onContextMenu={openMenu}
forceHide={!isNarrow || menuDisplayed}
ref={handle} ref={handle}
tabIndex={tabIndex} tabIndex={tabIndex}
onFocus={onFocus} onFocus={onFocus}
@ -177,7 +176,7 @@ export const SpaceButton = <T extends keyof JSX.IntrinsicElements>({
{contextMenu} {contextMenu}
</div> </div>
</AccessibleTooltipButton> </AccessibleButton>
); );
}; };

4
test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
View file

@ -32,7 +32,9 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
> >
<div <div
aria-disabled="true" aria-disabled="true"
aria-label="Remove"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
data-state="closed"
disabled="" disabled=""
role="button" role="button"
tabindex="0" tabindex="0"
@ -41,7 +43,9 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
</div> </div>
<div <div
aria-disabled="true" aria-disabled="true"
aria-label="Mark as not suggested"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline mx_AccessibleButton_disabled" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline mx_AccessibleButton_disabled"
data-state="closed"
disabled="" disabled=""
role="button" role="button"
tabindex="0" tabindex="0"

12
test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View file

@ -35,6 +35,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="Expand" aria-label="Expand"
class="mx_AccessibleButton mx_SpacePanel_toggleCollapse" class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
data-state="closed"
role="button" role="button"
tabindex="0" tabindex="0"
/> />
@ -55,6 +56,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="Home" aria-label="Home"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_home mx_SpaceButton_narrow" class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_home mx_SpaceButton_narrow"
data-state="closed"
role="button" role="button"
tabindex="0" tabindex="0"
> >
@ -91,6 +93,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="Favourites" aria-label="Favourites"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_favourites mx_SpaceButton_narrow" class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_favourites mx_SpaceButton_narrow"
data-state="closed"
role="button" role="button"
tabindex="-1" tabindex="-1"
> >
@ -119,6 +122,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="People" aria-label="People"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_people mx_SpaceButton_narrow" class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_people mx_SpaceButton_narrow"
data-state="closed"
role="button" role="button"
tabindex="-1" tabindex="-1"
> >
@ -147,6 +151,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="Other rooms" aria-label="Other rooms"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_orphans mx_SpaceButton_narrow" class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_orphans mx_SpaceButton_narrow"
data-state="closed"
role="button" role="button"
tabindex="-1" tabindex="-1"
> >
@ -175,6 +180,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="Conferences" aria-label="Conferences"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_videoRooms mx_SpaceButton_narrow" class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_videoRooms mx_SpaceButton_narrow"
data-state="closed"
role="button" role="button"
tabindex="-1" tabindex="-1"
> >
@ -203,6 +209,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
<div <div
aria-label="Create a space" aria-label="Create a space"
class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow" class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow"
data-state="closed"
data-testid="create-space-button" data-testid="create-space-button"
role="button" role="button"
tabindex="-1" tabindex="-1"
@ -229,8 +236,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="mx_ThreadsActivityCentre_container" class="mx_ThreadsActivityCentre_container"
> >
<button <button
aria-controls="floating-ui-7" aria-controls="floating-ui-35"
aria-describedby="floating-ui-7" aria-describedby="floating-ui-35"
aria-expanded="true" aria-expanded="true"
aria-haspopup="dialog" aria-haspopup="dialog"
aria-label="Threads" aria-label="Threads"
@ -272,6 +279,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-expanded="false" aria-expanded="false"
aria-label="Quick settings" aria-label="Quick settings"
class="mx_AccessibleButton mx_QuickSettingsButton" class="mx_AccessibleButton mx_QuickSettingsButton"
data-state="closed"
role="button" role="button"
tabindex="0" tabindex="0"
/> />