OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add `Tooltip` to `AccessibleButton` (#12443) 

* Deprecate AccessibleTooltipButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Deprecate AccessibleTooltipButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix `UserInfo-test.tsx`

* Update `LoginWithQRFlow-test.tsx` snapshot

* Remove tooltip provider from test

* Fix `AccessibleButton`

* Update snapshots

* Revert to original import

* Use title to populate aria-label

* Rollback AccessibleButton or Tooltip changes. Will come in another PR

* Rollback en.json change

* Update snapshots

* Fix `UserInfo`

* Update snapshots

* Use label instead of title in test

* Use label instead of title in TAC test

* Use label instead of title in read-receipt test

* Remove tooltip for ContextMenu

* Add extra information for caption field

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
pull/28217/head
Florian Duros 2024-04-24 14:24:25 +02:00 committed by GitHub
parent 644bf78e2a
commit 700b3955a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
24 changed files with 147 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
playwright/e2e/read-receipts/index.ts
View File

@ -403,7 +403,7 @@ class Helpers {
* tests we only open the threads panel.)
*/
async closeThreadsPanel() {
await this.page.locator(".mx_RightPanel").getByTitle("Close").click();
await this.page.locator(".mx_RightPanel").getByLabel("Close").click();
await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
}
@ -411,7 +411,7 @@ class Helpers {
* Return to the list of threads, given we are viewing a single thread.
*/
async backToThreadsList() {
await this.page.locator(".mx_RightPanel").getByTitle("Threads").click();
await this.page.locator(".mx_RightPanel").getByLabel("Threads").click();
}
/**
@ -539,7 +539,7 @@ class Helpers {
const threadPanel = this.page.locator(".mx_ThreadPanel");
await expect(threadPanel).toBeVisible();
await threadPanel.evaluate(($panel) => {
const $button = $panel.querySelector<HTMLElement>('.mx_BaseCard_back[title="Threads"]');
const $button = $panel.querySelector<HTMLElement>('.mx_BaseCard_back[aria-label="Threads"]');
// If the Threads back button is present then click it - the
// threads button can open either threads list or thread panel
if ($button) {

2
playwright/e2e/spaces/threads-activity-centre/index.ts
View File

@ -341,7 +341,7 @@ export class Helpers {
*/
assertThreadPanelFocused() {
return expect(
this.page.locator(".mx_ThreadPanel").locator(".mx_BaseCard_header").getByTitle("Close"),
this.page.locator(".mx_ThreadPanel").locator(".mx_BaseCard_header").getByLabel("Close"),
).toBeFocused();
}

1
src/accessibility/context_menu/ContextMenuButton.tsx
View File

@ -36,7 +36,6 @@ export const ContextMenuButton = forwardRef(function <T extends keyof JSX.Intrin
{...props}
onClick={onClick}
onContextMenu={onContextMenu ?? onClick ?? undefined}
title={label}
aria-label={label}
aria-haspopup={true}
aria-expanded={isExpanded}

24
src/components/views/elements/AccessibleButton.tsx
View File

@ -16,6 +16,7 @@
import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
import classnames from "classnames";
import { Tooltip } from "@vector-im/compound-web";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@ -86,6 +87,15 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
* Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
*/
onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
/**
* The tooltip to show on hover or focus.
*/
title?: string;
/**
* The caption is a secondary text displayed under the `title` of the tooltip.
* Only valid when used in conjunction with `title`.
*/
caption?: string;
};
/**
@ -116,11 +126,14 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
onKeyDown,
onKeyUp,
triggerOnMouseDown,
title,
caption,
...restProps
}: Props<T>,
ref: Ref<HTMLElement>,
): JSX.Element {
const newProps: RenderedElementProps = restProps;
newProps["aria-label"] = newProps["aria-label"] ?? title;
if (disabled) {
newProps["aria-disabled"] = true;
newProps["disabled"] = true;
@ -182,7 +195,16 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
});
// React.createElement expects InputHTMLAttributes
return React.createElement(element, newProps, children);
const button = React.createElement(element, newProps, children);
if (title) {
return (
<Tooltip label={title} caption={caption} isTriggerInteractive={!disabled}>
{button}
</Tooltip>
);
}
return button;
});
// Type assertion required due to forwardRef type workaround in react.d.ts

3
src/components/views/elements/AccessibleTooltipButton.tsx
View File

@ -60,6 +60,9 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
onHideTooltip?(ev: SyntheticEvent): void;
};
/**
* @deprecated use AccessibleButton with `title` and `caption` instead.
*/
const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
{ title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props<T>,
ref: Ref<HTMLElement>,

7
src/components/views/right_panel/UserInfo.tsx
View File

@ -237,7 +237,12 @@ export function DeviceItem({
);
} else {
return (
<AccessibleButton className={classes} title={device.deviceId} onClick={onDeviceClick}>
<AccessibleButton
className={classes}
title={device.deviceId}
aria-label={deviceName}
onClick={onDeviceClick}
>
<div className={iconClasses} />
<div className="mx_UserInfo_device_name">{deviceName}</div>
<div className="mx_UserInfo_device_trusted">{trustedLabel}</div>

1
test/components/structures/__snapshots__/UserMenu-test.tsx.snap
View File

@ -12,7 +12,6 @@ exports[`<UserMenu> <UserMenu> when video broadcast when rendered should render
class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
role="button"
tabindex="0"
title="User menu"
>
<div
class="mx_UserMenu_userAvatar"

6
test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
View File

@ -14,11 +14,12 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
View list
</h4>
<div
aria-label="Close sidebar"
class="mx_AccessibleButton mx_DialogSidebar_closeButton"
data-state="closed"
data-testid="dialog-sidebar-close"
role="button"
tabindex="0"
title="Close sidebar"
>
<div
class="mx_DialogSidebar_closeButtonIcon"
@ -113,11 +114,12 @@ exports[`<DialogSidebar /> renders sidebar correctly without beacons 1`] = `
View list
</h4>
<div
aria-label="Close sidebar"
class="mx_AccessibleButton mx_DialogSidebar_closeButton"
data-state="closed"
data-testid="dialog-sidebar-close"
role="button"
tabindex="0"
title="Close sidebar"
>
<div
class="mx_DialogSidebar_closeButtonIcon"

3
test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
View File

@ -3,10 +3,11 @@
exports[`<LeftPanelLiveShareWarning /> when user has live location monitor renders correctly when minimized 1`] = `
<DocumentFragment>
<div
aria-label="You are sharing your live location"
class="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
data-state="closed"
role="button"
tabindex="0"
title="You are sharing your live location"
>
<div
height="10"

3
test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap
View File

@ -109,11 +109,12 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
Retry
</button>
<button
aria-label="Stop and close"
class="mx_AccessibleButton mx_RoomLiveShareWarning_closeButton"
data-state="closed"
data-testid="room-live-share-wire-error-close-button"
role="button"
tabindex="0"
title="Stop and close"
>
<div
class="mx_RoomLiveShareWarning_closeButtonIcon"

8
test/components/views/elements/AppTile-test.tsx
View File

@ -377,12 +377,12 @@ describe("AppTile", () => {
});
it("clicking 'minimise' should send the widget to the right", async () => {
await userEvent.click(renderResult.getByTitle("Minimise"));
await userEvent.click(renderResult.getByLabelText("Minimise"));
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Right);
});
it("clicking 'maximise' should send the widget to the center", async () => {
await userEvent.click(renderResult.getByTitle("Maximise"));
await userEvent.click(renderResult.getByLabelText("Maximise"));
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center);
});
@ -435,7 +435,7 @@ describe("AppTile", () => {
});
it("clicking 'un-maximise' should send the widget to the top", async () => {
await userEvent.click(renderResult.getByTitle("Un-maximise"));
await userEvent.click(renderResult.getByLabelText("Un-maximise"));
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Top);
});
});
@ -461,7 +461,7 @@ describe("AppTile", () => {
});
it("should display the »Popout widget« button", () => {
expect(renderResult.getByTitle("Popout widget")).toBeInTheDocument();
expect(renderResult.getByLabelText("Popout widget")).toBeInTheDocument();
});
});
});

25
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View File

@ -13,11 +13,12 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
class="mx_BaseCard_header"
>
<div
aria-label="Close"
class="mx_AccessibleButton mx_BaseCard_close"
data-state="closed"
data-testid="base-card-close-button"
role="button"
tabindex="0"
title="Close"
/>
<div
class="mx_BaseCard_headerProp"
@ -37,7 +38,6 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
role="button"
tabindex="0"
title="Options"
/>
</div>
</div>
@ -136,20 +136,22 @@ exports[`AppTile for a pinned widget should render 1`] = `
class="mx_AppTileMenuBar_widgets"
>
<div
aria-label="Un-maximise"
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
data-state="closed"
role="button"
tabindex="0"
title="Un-maximise"
>
<div
class="mx_Icon mx_Icon_12"
/>
</div>
<div
aria-label="Minimise"
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
data-state="closed"
role="button"
tabindex="0"
title="Minimise"
>
<div
class="mx_Icon mx_Icon_12"
@ -162,7 +164,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
role="button"
tabindex="0"
title="Options"
>
<div
class="mx_Icon mx_Icon_12"
@ -223,20 +224,22 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
class="mx_AppTileMenuBar_widgets"
>
<div
aria-label="Un-maximise"
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
data-state="closed"
role="button"
tabindex="0"
title="Un-maximise"
>
<div
class="mx_Icon mx_Icon_12"
/>
</div>
<div
aria-label="Minimise"
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
data-state="closed"
role="button"
tabindex="0"
title="Minimise"
>
<div
class="mx_Icon mx_Icon_12"
@ -249,7 +252,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
role="button"
tabindex="0"
title="Options"
>
<div
class="mx_Icon mx_Icon_12"
@ -377,20 +379,22 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
class="mx_AppTileMenuBar_widgets"
>
<div
aria-label="Maximise"
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
data-state="closed"
role="button"
tabindex="0"
title="Maximise"
>
<div
class="mx_Icon mx_Icon_12"
/>
</div>
<div
aria-label="Minimise"
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
data-state="closed"
role="button"
tabindex="0"
title="Minimise"
>
<div
class="mx_Icon mx_Icon_12"
@ -403,7 +407,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
role="button"
tabindex="0"
title="Options"
>
<div
class="mx_Icon mx_Icon_12"

6
test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
View File

@ -23,22 +23,24 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
class="mx_ZoomButtons"
>
<div
aria-label="Zoom in"
class="mx_AccessibleButton mx_ZoomButtons_button"
data-state="closed"
data-testid="map-zoom-in-button"
role="button"
tabindex="0"
title="Zoom in"
>
<div
class="mx_ZoomButtons_icon"
/>
</div>
<div
aria-label="Zoom out"
class="mx_AccessibleButton mx_ZoomButtons_button"
data-state="closed"
data-testid="map-zoom-out-button"
role="button"
tabindex="0"
title="Zoom out"
>
<div
class="mx_ZoomButtons_icon"

6
test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap
View File

@ -6,22 +6,24 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
class="mx_ZoomButtons"
>
<div
aria-label="Zoom in"
class="mx_AccessibleButton mx_ZoomButtons_button"
data-state="closed"
data-testid="map-zoom-in-button"
role="button"
tabindex="0"
title="Zoom in"
>
<div
class="mx_ZoomButtons_icon"
/>
</div>
<div
aria-label="Zoom out"
class="mx_AccessibleButton mx_ZoomButtons_button"
data-state="closed"
data-testid="map-zoom-out-button"
role="button"
tabindex="0"
title="Zoom out"
>
<div
class="mx_ZoomButtons_icon"

29
test/components/views/right_panel/UserInfo-test.tsx
View File

@ -293,7 +293,8 @@ describe("<UserInfo />", () => {
it("renders close button correctly when encryption panel with a pending verification request", () => {
renderComponent({ phase: RightPanelPhases.EncryptionPanel, verificationRequest });
expect(screen.getByTestId("base-card-close-button")).toHaveAttribute("title", "Cancel");
screen.getByTestId("base-card-close-button").focus();
expect(screen.getByRole("tooltip")).toHaveTextContent("Cancel");
});
});
@ -387,11 +388,8 @@ describe("<UserInfo />", () => {
// click it
await userEvent.click(devicesButton);
// there should now be a button with the device id ...
const deviceButton = screen.getByRole("button", { description: "d1" });
// ... which should contain the device name
expect(within(deviceButton).getByText("my device")).toBeInTheDocument();
// there should now be a button with the device id which should contain the device name
expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument();
});
it("renders <BasicUserInfo />", async () => {
@ -444,10 +442,10 @@ describe("<UserInfo />", () => {
});
// there should now be a button with the non-dehydrated device ID
expect(screen.getByRole("button", { description: "d1" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument();
// but not for the dehydrated device ID
expect(screen.queryByRole("button", { description: "d2" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "dehydrated device" })).not.toBeInTheDocument();
// there should be a line saying that the user has "Offline device" enabled
expect(screen.getByText("Offline device enabled")).toBeInTheDocument();
@ -530,7 +528,7 @@ describe("<UserInfo />", () => {
// the dehydrated device should be shown as an unverified device, which means
// there should now be a button with the device id ...
const deviceButton = screen.getByRole("button", { description: "d2" });
const deviceButton = screen.getByRole("button", { name: "dehydrated device" });
// ... which should contain the device name
expect(within(deviceButton).getByText("dehydrated device")).toBeInTheDocument();
@ -572,13 +570,15 @@ describe("<UserInfo />", () => {
});
// the dehydrated devices should be shown as an unverified device, which means
// there should now be a button with the first dehydrated device id ...
const device1Button = screen.getByRole("button", { description: "d1" });
// there should now be a button with the first dehydrated device...
const device1Button = screen.getByRole("button", { name: "dehydrated device 1" });
expect(device1Button).toBeVisible();
// ... which should contain the device name
expect(within(device1Button).getByText("dehydrated device 1")).toBeInTheDocument();
// and a button with the second dehydrated device id ...
const device2Button = screen.getByRole("button", { description: "d2" });
// and a button with the second dehydrated device...
const device2Button = screen.getByRole("button", { name: "dehydrated device 2" });
expect(device2Button).toBeVisible();
// ... which should contain the device name
expect(within(device2Button).getByText("dehydrated device 2")).toBeInTheDocument();
@ -707,7 +707,8 @@ describe("<DeviceItem />", () => {
renderComponent({ isUserVerified: true });
await act(flushPromises);
expect(screen.getByRole("button", { name: `${device.displayName} Not trusted` })).toBeInTheDocument();
const button = screen.getByRole("button", { name: device.displayName });
expect(button).toHaveTextContent(`${device.displayName}Not trusted`);
});
it("with verified device only, displays no button without a label", async () => {

3
test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View File

@ -25,11 +25,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
</button>
<div
aria-label="Close"
class="mx_AccessibleButton mx_BaseCard_close"
data-state="closed"
data-testid="base-card-close-button"
role="button"
tabindex="0"
title="Close"
/>
</header>
<header

12
test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
View File

@ -3,10 +3,11 @@
exports[`<DeviceItem /> ambiguous display name 1`] = `
<div>
<div
aria-label="my display name (deviceId)"
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
data-state="closed"
role="button"
tabindex="0"
title="deviceId"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
@ -26,10 +27,11 @@ exports[`<DeviceItem /> ambiguous display name 1`] = `
exports[`<DeviceItem /> with display name 1`] = `
<div>
<div
aria-label="deviceName"
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
data-state="closed"
role="button"
tabindex="0"
title="deviceId"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
@ -49,10 +51,11 @@ exports[`<DeviceItem /> with display name 1`] = `
exports[`<DeviceItem /> without display name 1`] = `
<div>
<div
aria-label="deviceId"
class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
data-state="closed"
role="button"
tabindex="0"
title="deviceId"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal"
@ -78,11 +81,12 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
class="mx_BaseCard_header"
>
<div
aria-label="Close"
class="mx_AccessibleButton mx_BaseCard_close"
data-state="closed"
data-testid="base-card-close-button"
role="button"
tabindex="0"
title="Close"
/>
<div
class="mx_BaseCard_headerProp"

2
test/components/views/rooms/MemberList-test.tsx
View File

@ -92,7 +92,7 @@ describe("MemberList", () => {
let prevMember: RoomMember | undefined;
for (const tile of memberTiles) {
const memberA = prevMember;
const memberB = memberListRoom.currentState.members[tile.getAttribute("title")!.split(" ")[0]];
const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]];
prevMember = memberB; // just in case an expect fails, set this early
if (!memberA) {
continue;

9
test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
View File

@ -4,10 +4,11 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
<div>
<div>
<div
aria-label="@userId:matrix.org (power 0)"
class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
data-state="closed"
role="button"
tabindex="0"
title="@userId:matrix.org (power 0)"
>
<div
class="mx_EntityTile_avatar"
@ -57,10 +58,11 @@ exports[`MemberTile should display an warning E2EIcon when the e2E status = Warn
<div>
<div>
<div
aria-label="@userId:matrix.org (power 0)"
class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
data-state="closed"
role="button"
tabindex="0"
title="@userId:matrix.org (power 0)"
>
<div
class="mx_EntityTile_avatar"
@ -110,10 +112,11 @@ exports[`MemberTile should not display an E2EIcon when the e2E status = normal 1
<div>
<div>
<div
aria-label="@userId:matrix.org (power 0)"
class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
data-state="closed"
role="button"
tabindex="0"
title="@userId:matrix.org (power 0)"
>
<div
class="mx_EntityTile_avatar"

32
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
View File

@ -135,20 +135,26 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
>
Current session
</h3>
<div
aria-disabled="true"
aria-expanded="false"
aria-haspopup="true"
class="mx_AccessibleButton mx_AccessibleButton_disabled"
data-testid="current-session-menu"
disabled=""
role="button"
<span
data-state="closed"
tabindex="0"
>
<div
class="mx_KebabContextMenu_icon"
/>
</div>
aria-disabled="true"
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton mx_AccessibleButton_disabled"
data-testid="current-session-menu"
disabled=""
role="button"
tabindex="0"
>
<div
class="mx_KebabContextMenu_icon"
/>
</div>
</span>
</div>
<div
class="mx_SettingsSubsection_content"
@ -174,7 +180,9 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"
@ -317,7 +325,9 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"

18
test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
View File

@ -517,11 +517,12 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -649,11 +650,12 @@ exports[`<LoginWithQRFlow /> renders spinner while connecting 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -719,11 +721,12 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -777,11 +780,12 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -847,11 +851,12 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>
@ -908,11 +913,12 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
class="mx_LoginWithQR_heading"
>
<div
aria-label="Back"
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
data-state="closed"
data-testid="back-button"
role="button"
tabindex="0"
title="Back"
>
<div />
</div>

12
test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
View File

@ -68,10 +68,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
</div>
</div>
<div
aria-label="Deny"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
data-state="closed"
role="button"
tabindex="0"
title="Deny"
>
<div
height="18"
@ -79,10 +80,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
/>
</div>
<div
aria-label="Approve"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
data-state="closed"
role="button"
tabindex="0"
title="Approve"
>
<div
height="18"
@ -135,10 +137,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
</span>
</div>
<div
aria-label="Deny"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
data-state="closed"
role="button"
tabindex="0"
title="Deny"
>
<div
height="18"
@ -146,10 +149,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
/>
</div>
<div
aria-label="Approve"
class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
data-state="closed"
role="button"
tabindex="0"
title="Approve"
>
<div
height="18"

4
test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
View File

@ -84,7 +84,9 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"
@ -213,7 +215,9 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton"
data-state="closed"
data-testid="current-session-menu"
role="button"
tabindex="0"

1
test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View File

@ -16,7 +16,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
role="button"
tabindex="0"
title="User menu"
>
<div
class="mx_UserMenu_userAvatar"