Tooltip: Improve accessibility for context menus

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -18,9 +18,9 @@ limitations under the License.
 
 import React, { ComponentProps, forwardRef, Ref } from "react";
 
-import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleTooltipButton<T>> & {
+type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
     // whether the context menu is currently open
     isExpanded: boolean;
 };
@@ -31,17 +31,17 @@ export const ContextMenuTooltipButton = forwardRef(function <T extends keyof JSX
     ref: Ref<HTMLElement>,
 ) {
     return (
-        <AccessibleTooltipButton
+        <AccessibleButton
             {...props}
             element={element as keyof JSX.IntrinsicElements}
             onClick={onClick}
             onContextMenu={onContextMenu ?? onClick ?? undefined}
             aria-haspopup={true}
             aria-expanded={isExpanded}
-            forceHide={isExpanded}
+            title={isExpanded ? undefined : props.title}
             ref={ref}
         >
             {children}
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 });

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -754,7 +754,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     onClick={this.onContextMenuOpenClick}
                     isExpanded={!!this.state.contextMenuPosition}
                     title={_t("room|context_menu|title")}
-                    alignment={Alignment.Bottom}
+                    placement="bottom"
                 >
                     {roomName}
                     {this.props.room && <div className="mx_LegacyRoomHeader_chevron" />}

src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx

@@ -265,7 +265,7 @@ export default class LegacyCallViewButtons extends React.Component<IProps, IStat
                         onClick={this.onDialpadClick}
                         isExpanded={this.state.showDialpad}
                         title={_t("voip|dialpad")}
-                        alignment={Alignment.Top}
+                        placement="top"
                     />
                 )}
                 <LegacyCallViewDropdownButton
@@ -311,7 +311,7 @@ export default class LegacyCallViewButtons extends React.Component<IProps, IStat
                         ref={this.contextMenuButton}
                         isExpanded={this.state.showMoreMenu}
                         title={_t("voip|more_button")}
-                        alignment={Alignment.Top}
+                        placement="top"
                     />
                 )}
                 <AccessibleTooltipButton

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

@@ -89,10 +89,10 @@ describe("RoomList", () => {
                 const { rerender } = render(getComponent());
 
                 const roomsList = screen.getByRole("group", { name: "Rooms" });
-                const addRoomButton = within(roomsList).getByRole("button", { name: "Add room" });
+                const getAddRoomButton = () => within(roomsList).getByRole("button", { name: "Add room" });
                 expect(screen.queryByRole("menu")).not.toBeInTheDocument();
 
-                await userEvent.click(addRoomButton);
+                await userEvent.click(getAddRoomButton());
 
                 const menu = screen.getByRole("menu");
 
@@ -102,15 +102,15 @@ describe("RoomList", () => {
                 disabled = [UIComponent.CreateRooms];
                 rerender(getComponent());
 
-                expect(addRoomButton).toBeInTheDocument();
+                expect(getAddRoomButton()).toBeInTheDocument();
                 expect(menu).toBeInTheDocument();
                 expect(within(menu).queryByRole("menuitem", { name: "New room" })).not.toBeInTheDocument();
                 expect(within(menu).getByRole("menuitem", { name: "Explore public rooms" })).toBeInTheDocument();
 
                 disabled = [UIComponent.ExploreRooms];
                 rerender(getComponent());
 
-                expect(addRoomButton).toBeInTheDocument();
+                expect(getAddRoomButton()).toBeInTheDocument();
                 expect(menu).toBeInTheDocument();
                 expect(within(menu).getByRole("menuitem", { name: "New room" })).toBeInTheDocument();
                 expect(within(menu).queryByRole("menuitem", { name: "Explore public rooms" })).not.toBeInTheDocument();
@@ -163,10 +163,10 @@ describe("RoomList", () => {
                 const { rerender } = render(getComponent());
 
                 const roomsList = screen.getByRole("group", { name: "Rooms" });
-                const addRoomButton = within(roomsList).getByRole("button", { name: "Add room" });
+                const getAddRoomButton = () => within(roomsList).getByRole("button", { name: "Add room" });
                 expect(screen.queryByRole("menu")).not.toBeInTheDocument();
 
-                await userEvent.click(addRoomButton);
+                await userEvent.click(getAddRoomButton());
 
                 const menu = screen.getByRole("menu");
 
@@ -177,7 +177,7 @@ describe("RoomList", () => {
                 disabled = [UIComponent.CreateRooms];
                 rerender(getComponent());
 
-                expect(addRoomButton).toBeInTheDocument();
+                expect(getAddRoomButton()).toBeInTheDocument();
                 expect(menu).toBeInTheDocument();
                 expect(within(menu).getByRole("menuitem", { name: "Explore rooms" })).toBeInTheDocument();
                 expect(within(menu).queryByRole("menuitem", { name: "New room" })).not.toBeInTheDocument();
@@ -186,7 +186,7 @@ describe("RoomList", () => {
                 disabled = [UIComponent.ExploreRooms];
                 rerender(getComponent());
 
-                expect(addRoomButton).toBeInTheDocument();
+                expect(getAddRoomButton()).toBeInTheDocument();
                 expect(menu).toBeInTheDocument();
                 expect(within(menu).queryByRole("menuitem", { name: "Explore rooms" })).toBeInTheDocument();
                 expect(within(menu).getByRole("menuitem", { name: "New room" })).toBeInTheDocument();

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

@@ -229,8 +229,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       class="mx_ThreadsActivityCentre_container"
     >
       <button
-        aria-controls="floating-ui-35"
-        aria-describedby="floating-ui-35"
+        aria-controls="floating-ui-39"
+        aria-describedby="floating-ui-39"
         aria-expanded="true"
         aria-haspopup="dialog"
         aria-label="Threads"