WIP - 3

src/components/views/messages/MessageTimestamp.tsx

@@ -53,7 +53,7 @@ export default class MessageTimestamp extends React.Component<IProps> {
         }
 
         return (
-            <Tooltip label={label} caption={caption}>
+            <Tooltip description={label} caption={caption}>
                 <span className="mx_MessageTimestamp" aria-hidden={true} aria-live="off">
                     {icon}
                     {timestamp}

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -211,7 +211,7 @@ export function ReadReceiptPerson({
     onAfterClick,
 }: ReadReceiptPersonProps): JSX.Element {
     return (
-        <Tooltip label={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
+        <Tooltip description={roomMember?.rawDisplayName ?? userId} caption={userId} placement="top">
             <div>
                 <MenuItem
                     className="mx_ReadReceiptGroup_person"

test/components/views/avatars/DecoratedRoomAvatar-test.tsx

@@ -61,7 +61,7 @@ describe("DecoratedRoomAvatar", () => {
 
         // wait for the tooltip to open
         const tooltip = await waitFor(() => {
-            const tooltip = document.getElementById(globe.getAttribute("aria-describedby")!);
+            const tooltip = document.getElementById(globe.getAttribute("aria-labelledby")!);
             expect(tooltip).toBeVisible();
             return tooltip;
         });
@@ -88,7 +88,7 @@ describe("DecoratedRoomAvatar", () => {
 
         // wait for the tooltip to open
         const tooltip = await waitFor(() => {
-            const tooltip = document.getElementById(presence.getAttribute("aria-describedby")!);
+            const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
             expect(tooltip).toBeVisible();
             return tooltip;
         });

test/components/views/avatars/WithPresenceIndicator-test.tsx

@@ -91,7 +91,7 @@ describe("WithPresenceIndicator", () => {
 
         // wait for the tooltip to open
         const tooltip = await waitFor(() => {
-            const tooltip = document.getElementById(presence.getAttribute("aria-describedby")!);
+            const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
             expect(tooltip).toBeVisible();
             return tooltip;
         });

test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap

@@ -16,7 +16,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
       r
     </span>
     <div
-      aria-describedby="floating-ui-2"
+      aria-labelledby="floating-ui-1"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
       tabindex="0"
     />
@@ -40,7 +40,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
       r
     </span>
     <div
-      aria-describedby="floating-ui-8"
+      aria-labelledby="floating-ui-7"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
       tabindex="0"
     />

test/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-describedby="floating-ui-2"
+      aria-labelledby="floating-ui-1"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
       style="width: 32px; height: 32px;"
       tabindex="0"
@@ -23,7 +23,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-describedby="floating-ui-8"
+      aria-labelledby="floating-ui-7"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
       style="width: 32px; height: 32px;"
       tabindex="0"
@@ -39,7 +39,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-describedby="floating-ui-14"
+      aria-labelledby="floating-ui-14"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
       style="width: 32px; height: 32px;"
       tabindex="0"

test/components/views/dialogs/ChangelogDialog-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import fetchMock from "fetch-mock-jest";
-import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 
 import ChangelogDialog from "../../../../src/components/views/dialogs/ChangelogDialog";
 

test/components/views/messages/MessageTimestamp-test.tsx

@@ -27,7 +27,6 @@ describe("MessageTimestamp", () => {
 <DocumentFragment>
   <span
     aria-hidden="true"
-    aria-labelledby="floating-ui-1"
     aria-live="off"
     class="mx_MessageTimestamp"
   >

test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx

@@ -71,7 +71,7 @@ describe("<VideoRoomChatButton />", () => {
         const room = makeRoom();
         getComponent(room);
 
-        fireEvent.click(screen.getByLabelText("Chat"));
+        fireEvent.click(screen.getByRole("button", { name: "Chat" }));
 
         expect(sdkContext.rightPanelStore.showOrHidePanel).toHaveBeenCalledWith(RightPanelPhases.Timeline);
     });
@@ -82,8 +82,8 @@ describe("<VideoRoomChatButton />", () => {
         getComponent(room);
 
         // snapshot includes `data-indicator` attribute
-        expect(screen.getByLabelText("Chat")).toMatchSnapshot();
-        expect(screen.getByLabelText("Chat").hasAttribute("data-indicator")).toBeTruthy();
+        expect(screen.getByRole("button", { name: "Chat" })).toMatchSnapshot();
+        expect(screen.getByRole("button", { name: "Chat" }).hasAttribute("data-indicator")).toBeTruthy();
     });
 
     it("adds unread marker when room notification state changes to unread", async () => {
@@ -93,14 +93,16 @@ describe("<VideoRoomChatButton />", () => {
         getComponent(room);
 
         // no unread marker
-        expect(screen.getByLabelText("Chat").hasAttribute("data-indicator")).toBeFalsy();
+        expect(screen.getByRole("button", { name: "Chat" }).hasAttribute("data-indicator")).toBeFalsy();
 
         // @ts-ignore ugly mocking
         notificationState._level = NotificationLevel.Highlight;
         notificationState.emit(NotificationStateEvents.Update);
 
         // unread marker
-        await waitFor(() => expect(screen.getByLabelText("Chat").hasAttribute("data-indicator")).toBeTruthy());
+        await waitFor(() =>
+            expect(screen.getByRole("button", { name: "Chat" }).hasAttribute("data-indicator")).toBeTruthy(),
+        );
     });
 
     it("clears unread marker when room notification state changes to read", async () => {
@@ -110,13 +112,15 @@ describe("<VideoRoomChatButton />", () => {
         getComponent(room);
 
         // unread marker
-        expect(screen.getByLabelText("Chat").hasAttribute("data-indicator")).toBeTruthy();
+        expect(screen.getByRole("button", { name: "Chat" }).hasAttribute("data-indicator")).toBeTruthy();
 
         // @ts-ignore ugly mocking
         notificationState._level = NotificationLevel.None;
         notificationState.emit(NotificationStateEvents.Update);
 
         // unread marker cleared
-        await waitFor(() => expect(screen.getByLabelText("Chat").hasAttribute("data-indicator")).toBeFalsy());
+        await waitFor(() =>
+            expect(screen.getByRole("button", { name: "Chat" }).hasAttribute("data-indicator")).toBeFalsy(),
+        );
     });
 });

test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
 <button
   aria-label="Chat"
+  aria-labelledby="floating-ui-7"
   class="_icon-button_bh2qc_17"
   data-indicator="default"
   role="button"

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

@@ -2,17 +2,17 @@
 
 exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 <div
-  aria-describedby="floating-ui-5"
-  aria-labelledby="floating-ui-4"
-  class="_tooltip_svz44_17"
-  id="floating-ui-6"
+  aria-describedby="floating-ui-7"
+  aria-labelledby="floating-ui-6"
+  class="_tooltip_1pslb_17"
+  id="floating-ui-8"
   role="tooltip"
   style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   tabindex="-1"
 >
   <svg
     aria-hidden="true"
-    class="_arrow_svz44_34"
+    class="_arrow_1pslb_42"
     height="10"
     style="position: absolute; pointer-events: none; top: 100%;"
     viewBox="0 0 10 10"
@@ -23,7 +23,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
       stroke="none"
     />
     <clippath
-      id="floating-ui-9"
+      id="floating-ui-11"
     >
       <rect
         height="10"
@@ -34,13 +34,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
     </clippath>
   </svg>
   <span
-    id="floating-ui-4"
+    id="floating-ui-6"
   >
     Alice
   </span>
   <span
-    class="_caption_svz44_29 cpd-theme-dark"
-    id="floating-ui-5"
+    class="_caption_1pslb_37 cpd-theme-dark"
+    id="floating-ui-7"
   >
     @alice:example.org
   </span>
@@ -49,9 +49,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 
 exports[`ReadReceiptGroup <ReadReceiptPerson /> should render 1`] = `
 <div>
-  <div
-    aria-labelledby="floating-ui-1"
-  >
+  <div>
     <div
       class="mx_AccessibleButton mx_ReadReceiptGroup_person"
       role="menuitem"

test/components/views/settings/UserProfileSettings-test.tsx

@@ -7,10 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ChangeEvent } from "react";
-import { act, render, screen } from "jest-matrix-react";
+import { act, render, screen } from "@testing-library/react";
 import { MatrixClient, UploadResponse } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import UserProfileSettings from "../../../../src/components/views/settings/UserProfileSettings";
 import { mkStubRoom, stubClient } from "../../../test-utils";
@@ -54,22 +55,29 @@ interface MockedEditInPlaceProps {
     value: string;
 }
 
-jest.mock("@vector-im/compound-web", () => ({
-    EditInPlace: (({ onChange, onSave, onCancel, value }) => {
-        editInPlaceOnChange = onChange;
-        editInPlaceOnSave = onSave;
-        editInPlaceOnCancel = onCancel;
-        return <div>Mocked EditInPlace: {value}</div>;
-    }) as React.FC<MockedEditInPlaceProps>,
-}));
+jest.mock("@vector-im/compound-web", () => {
+    const compound = jest.requireActual("@vector-im/compound-web");
+    return {
+        __esModule: true,
+        ...compound,
+        EditInPlace: (({ onChange, onSave, onCancel, value }) => {
+            editInPlaceOnChange = onChange;
+            editInPlaceOnSave = onSave;
+            editInPlaceOnCancel = onCancel;
+            return <div>Mocked EditInPlace: {value}</div>;
+        }) as React.FC<MockedEditInPlaceProps>,
+    };
+});
 
 const renderProfileSettings = (toastRack: Partial<ToastRack>, client: MatrixClient) => {
     return render(
-        <MatrixClientContext.Provider value={client}>
-            <ToastContext.Provider value={toastRack}>
-                <UserProfileSettings canSetAvatar={true} canSetDisplayName={true} />
-            </ToastContext.Provider>
-        </MatrixClientContext.Provider>,
+        <TooltipProvider>
+            <MatrixClientContext.Provider value={client}>
+                <ToastContext.Provider value={toastRack}>
+                    <UserProfileSettings canSetAvatar={true} canSetDisplayName={true} />
+                </ToastContext.Provider>
+            </MatrixClientContext.Provider>
+        </TooltipProvider>,
     );
 };