imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Tooltip to AccessibleButton (#12443)

Browse source 
* 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>
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

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"