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>

playwright/e2e/read-receipts/index.ts

@@ -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) {

playwright/e2e/spaces/threads-activity-centre/index.ts

@@ -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();
     }
 

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -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}

src/components/views/elements/AccessibleButton.tsx

@@ -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

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -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>,

src/components/views/right_panel/UserInfo.tsx

@@ -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>

test/components/structures/__snapshots__/UserMenu-test.tsx.snap

@@ -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"

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -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"

test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap

@@ -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"

test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap

@@ -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"

test/components/views/elements/AppTile-test.tsx

@@ -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();
             });
         });
     });

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -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"

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -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"

test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap

@@ -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"

test/components/views/right_panel/UserInfo-test.tsx

@@ -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 ...
+            // there should now be a button with the device id which should contain the device name
-            const deviceButton = screen.getByRole("button", { description: "d1" });
+            expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument();
-
-            // ... which should contain the device name
-            expect(within(deviceButton).getByText("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 ...
+                // there should now be a button with the first dehydrated device...
-                const device1Button = screen.getByRole("button", { description: "d1" });
+                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 ...
+                // and a button with the second dehydrated device...
-                const device2Button = screen.getByRole("button", { description: "d2" });
+                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 () => {

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -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

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -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"

test/components/views/rooms/MemberList-test.tsx

@@ -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;

test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap

@@ -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"

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

@@ -135,20 +135,26 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
       >
         Current session
       </h3>
-      <div
+      <span
-        aria-disabled="true"
+        data-state="closed"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="mx_AccessibleButton mx_AccessibleButton_disabled"
-        data-testid="current-session-menu"
-        disabled=""
-        role="button"
         tabindex="0"
       >
         <div
-          class="mx_KebabContextMenu_icon"
+          aria-disabled="true"
-        />
+          aria-expanded="false"
-      </div>
+          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"

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

@@ -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>

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

@@ -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"

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

@@ -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"

test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -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"