Upgrade to latest compound-web package (#84)

* Upgrade to latest compound-web package

* Use a custom render function for jest tests

This way we don't need to manually wrap our components with
<TooltipProvider>

* Pin wrap-ansi to fix broken yarn install

* Add playwright helper to find tooltip from element

and use it in the failing test

* Exclude floating-ui divs/spans from axe testing

This is rendered outside .MatrixChat by compound and contains all the
tooltips.

* Wrap outermost components with TooltipProvider

* Remove onChange and use onSelect for toggle

* Fix jest tests and update snapshots

* Use vector-im/matrix-wysiwig

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

.eslintrc.js

@@ -51,6 +51,10 @@ module.exports = {
             "error",
             {
                 paths: [
+                    {
+                        name: "@testing-library/react",
+                        message: "Please use jest-matrix-react instead",
+                    },
                     {
                         name: "matrix-js-sdk",
                         message: "Please use matrix-js-sdk/src/matrix instead",

jest.config.ts

@@ -37,6 +37,7 @@ const config: Config = {
     coverageReporters: ["text-summary", "lcov"],
     testResultsProcessor: "@casualbot/jest-sonar-reporter",
     prettierPath: null,
+    moduleDirectories: ["node_modules", "test/test-utils"],
 };
 
 // if we're running under GHA, enable the GHA reporter

package.json

@@ -68,7 +68,9 @@
         "jwt-decode": "4.0.0",
         "@floating-ui/react": "0.26.11",
         "@radix-ui/react-id": "1.1.0",
-        "caniuse-lite": "1.0.30001655"
+        "caniuse-lite": "1.0.30001655",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
+        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
@@ -80,7 +82,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^5.5.0",
+        "@vector-im/compound-web": "^6.3.1",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/crypto/event-shields.spec.ts

@@ -70,7 +70,9 @@ test.describe("Cryptography", function () {
             const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("This message could not be decrypted");
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "This message could not be decrypted",
+            );
 
             /* Should show a red padlock for an unencrypted message in an e2e room */
             await bob.evaluate(
@@ -90,7 +92,7 @@ test.describe("Cryptography", function () {
             await expect(last).toContainText("test unencrypted");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("Not encrypted");
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
 
             /* Should show no padlock for an unverified user */
             // bob sends a valid event
@@ -123,7 +125,9 @@ test.describe("Cryptography", function () {
             await expect(lastTile).toContainText("test encrypted from unverified");
             await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastTileE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
+            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
+                "Encrypted by a device not verified by its owner.",
+            );
 
             /* In legacy crypto: should show a grey padlock for a message from a deleted device.
              * In rust crypto: should show a red padlock for a message from an unverified device.
@@ -159,7 +163,7 @@ test.describe("Cryptography", function () {
             await expect(last).toContainText("test encrypted from unverified");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText(
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
                 workerInfo.project.name === "Legacy Crypto"
                     ? "Encrypted by an unknown or deleted device."
                     : "Encrypted by a device not verified by its owner.",
@@ -212,7 +216,7 @@ test.describe("Cryptography", function () {
             // The key is coming from backup, so it is not anymore possible to establish if the claimed device
             // creator of this key is authentic. The tooltip should be "The authenticity of this encrypted message can't be guaranteed on this device."
             // It is not "Encrypted by an unknown or deleted device." even if the claimed device is actually deleted.
-            await expect(page.getByRole("tooltip")).toContainText(
+            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
                 "The authenticity of this encrypted message can't be guaranteed on this device.",
             );
         });
@@ -296,7 +300,9 @@ test.describe("Cryptography", function () {
             const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
             await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
             await lastE2eIcon.focus();
-            await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Encrypted by a device not verified by its owner.",
+            );
 
             const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
             await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();

playwright/element-web-test.ts

@@ -224,7 +224,7 @@ export const test = base.extend<{
     },
 
     axe: async ({ page }, use) => {
-        await use(new AxeBuilder({ page }));
+        await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
     },
     checkA11y: async ({ axe }, use, testInfo) =>
         use(async () => {

playwright/pages/ElementAppPage.ts

@@ -172,4 +172,22 @@ export class ElementAppPage {
         await this.page.getByRole("button", { name: "Room info" }).first().click();
         return this.page.locator(".mx_RightPanel");
     }
+
+    /**
+     * Get a locator for the tooltip associated with an element
+     * @param e The element with the tooltip
+     * @returns Locator to the tooltip
+     */
+    public async getTooltipForElement(e: Locator): Promise<Locator> {
+        const [labelledById, describedById] = await Promise.all([
+            e.getAttribute("aria-labelledby"),
+            e.getAttribute("aria-describedby"),
+        ]);
+        if (!labelledById && !describedById) {
+            throw new Error(
+                "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
+            );
+        }
+        return this.page.locator(`#${labelledById ?? describedById}`);
+    }
 }

src/Modal.tsx

@@ -12,7 +12,7 @@ import ReactDOM from "react-dom";
 import classNames from "classnames";
 import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
-import { Glass } from "@vector-im/compound-web";
+import { Glass, TooltipProvider } from "@vector-im/compound-web";
 
 import dis, { defaultDispatcher } from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
@@ -416,16 +416,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
 
             const staticDialog = (
-                <div className={classes}>
+                <TooltipProvider>
-                    <Glass className="mx_Dialog_border">
+                    <div className={classes}>
-                        <div className="mx_Dialog">{this.staticModal.elem}</div>
+                        <Glass className="mx_Dialog_border">
-                    </Glass>
+                            <div className="mx_Dialog">{this.staticModal.elem}</div>
-                    <div
+                        </Glass>
-                        data-testid="dialog-background"
+                        <div
-                        className="mx_Dialog_background mx_Dialog_staticBackground"
+                            data-testid="dialog-background"
-                        onClick={this.onBackgroundClick}
+                            className="mx_Dialog_background mx_Dialog_staticBackground"
-                    />
+                            onClick={this.onBackgroundClick}
-                </div>
+                        />
+                    </div>
+                </TooltipProvider>
             );
 
             ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -441,16 +443,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             });
 
             const dialog = (
-                <div className={classes}>
+                <TooltipProvider>
-                    <Glass className="mx_Dialog_border">
+                    <div className={classes}>
-                        <div className="mx_Dialog">{modal.elem}</div>
+                        <Glass className="mx_Dialog_border">
-                    </Glass>
+                            <div className="mx_Dialog">{modal.elem}</div>
-                    <div
+                        </Glass>
-                        data-testid="dialog-background"
+                        <div
-                        className="mx_Dialog_background"
+                            data-testid="dialog-background"
-                        onClick={this.onBackgroundClick}
+                            className="mx_Dialog_background"
-                    />
+                            onClick={this.onBackgroundClick}
-                </div>
+                        />
+                    </div>
+                </TooltipProvider>
             );
 
             setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);

src/components/structures/ContextMenu.tsx

@@ -12,6 +12,7 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro
 import ReactDOM from "react-dom";
 import classNames from "classnames";
 import FocusLock from "react-focus-lock";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import { Writeable } from "../../@types/common";
 import UIStore from "../../stores/UIStore";
@@ -621,15 +622,17 @@ export function createMenu(
     };
 
     const menu = (
-        <ContextMenu
+        <TooltipProvider>
-            {...props}
+            <ContextMenu
-            mountAsChild={true}
+                {...props}
-            hasBackground={false}
+                mountAsChild={true}
-            onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
+                hasBackground={false}
-            windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
+                onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
-        >
+                windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
-            <ElementClass {...props} onFinished={onFinished} />
+            >
-        </ContextMenu>
+                <ElementClass {...props} onFinished={onFinished} />
+            </ContextMenu>
+        </TooltipProvider>
     );
 
     ReactDOM.render(menu, getOrCreateContainer());

src/components/structures/MatrixChat.tsx

@@ -24,6 +24,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 // what-input helps improve keyboard accessibility
 import "what-input";
@@ -2181,7 +2182,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         return (
             <ErrorBoundary>
-                <SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
+                <SDKContext.Provider value={this.stores}>
+                    <TooltipProvider>{view}</TooltipProvider>
+                </SDKContext.Provider>
             </ErrorBoundary>
         );
     }

src/components/structures/ThreadPanel.tsx

@@ -130,7 +130,7 @@ export const ThreadPanelHeader: React.FC<{
     return (
         <div className="mx_BaseCard_header_title">
             <Tooltip label={_t("threads|mark_all_read")}>
-                <IconButton onClick={onMarkAllThreadsReadClick} aria-label={_t("threads|mark_all_read")} size="24px">
+                <IconButton onClick={onMarkAllThreadsReadClick} size="24px">
                     <MarkAllThreadsReadIcon />
                 </IconButton>
             </Tooltip>

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -58,7 +58,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
             <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
+                <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
                         <RetryIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}

src/components/structures/auth/forgot-password/VerifyEmailModal.tsx

@@ -57,7 +57,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
 
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
-                <Tooltip label={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
+                <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>
                     <AccessibleButton className="mx_AuthBody_resend-button" kind="link" onClick={onResendClickFn}>
                         <RetryIcon className="mx_Icon mx_Icon_16" />
                         {_t("action|resend")}

src/components/views/elements/AccessibleButton.tsx

@@ -212,7 +212,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
     if (title) {
         return (
             <Tooltip
-                label={title}
+                description={title}
                 caption={caption}
                 isTriggerInteractive={true}
                 placement={placement}

src/components/views/elements/InfoTooltip.tsx

@@ -35,7 +35,7 @@ export default class InfoTooltip extends React.PureComponent<TooltipProps> {
 
         // Tooltip are forced on the right for a more natural feel to them on info icons
         return (
-            <Tooltip label={tooltip || title} placement="right">
+            <Tooltip description={tooltip || title} placement="right">
                 <div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
                     <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
                     {children}

src/components/views/elements/PersistedElement.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { MutableRefObject, ReactNode } from "react";
 import ReactDOM from "react-dom";
 import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import dis from "../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -167,9 +168,11 @@ export default class PersistedElement extends React.Component<IProps> {
     private renderApp(): void {
         const content = (
             <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                <div ref={this.collectChild} style={this.props.style}>
+                <TooltipProvider>
-                    {this.props.children}
+                    <div ref={this.collectChild} style={this.props.style}>
-                </div>
+                        {this.props.children}
+                    </div>
+                </TooltipProvider>
             </MatrixClientContext.Provider>
         );
 

src/components/views/elements/Pill.tsx

@@ -141,7 +141,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
         <bdi>
             <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
                 <Tooltip
-                    label={resourceId ?? ""}
+                    description={resourceId ?? ""}
                     open={resourceId ? undefined : false}
                     placement="right"
                     isTriggerInteractive={isAnchor}

src/components/views/elements/RoomTopic.tsx

@@ -111,7 +111,7 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
     if (!body) return <div className={classNames(className, "mx_RoomTopic")} />;
 
     return (
-        <Tooltip label={_t("room|read_topic")} disabled={disableTooltip}>
+        <Tooltip description={_t("room|read_topic")} disabled={disableTooltip}>
             <div
                 {...props}
                 tabIndex={0}

src/components/views/messages/MStickerBody.tsx

@@ -61,7 +61,7 @@ export default class MStickerBody extends MImageBody {
 
         return {
             placement: "right",
-            label: content.body,
+            description: content.body,
         };
     }
 

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/messages/ReactionsRowButtonTooltip.tsx

@@ -51,7 +51,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<Props
             const caption = shortName ? _t("timeline|reactions|tooltip_caption", { shortName }) : undefined;
 
             return (
-                <Tooltip label={formattedSenders} caption={caption} placement="right">
+                <Tooltip description={formattedSenders} caption={caption} placement="right">
                     {children}
                 </Tooltip>
             );

src/components/views/messages/TextualBody.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 import ReactDOM from "react-dom";
 import { MsgType } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import * as HtmlUtils from "../../../HtmlUtils";
 import { formatDate } from "../../../DateUtils";
@@ -335,7 +336,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
 
                 const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
                 node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
-                const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
+                const spoiler = (
+                    <TooltipProvider>
+                        <Spoiler reason={reason} contentHtml={node.outerHTML} />
+                    </TooltipProvider>
+                );
 
                 ReactDOM.render(spoiler, spoilerContainer);
                 node.parentNode?.replaceChild(spoilerContainer, node);

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -373,9 +373,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
                     Icon={FavouriteIcon}
                     label={_t("room|context_menu|favourite")}
                     checked={isFavorite}
-                    onChange={() => tagRoom(room, DefaultTagID.Favourite)}
+                    onSelect={() => tagRoom(room, DefaultTagID.Favourite)}
-                    // XXX: https://github.com/element-hq/compound/issues/288
-                    onSelect={() => {}}
                 />
                 <MenuItem
                     Icon={UserAddIcon}

src/components/views/rooms/EventTile.tsx

@@ -1555,7 +1555,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
         <div className="mx_EventTile_msgOption">
             <div className="mx_ReadReceiptGroup">
                 <Tooltip label={label} placement="top-end">
-                    <div className="mx_ReadReceiptGroup_button">
+                    <div className="mx_ReadReceiptGroup_button" role="status">
                         <span className="mx_ReadReceiptGroup_container">
                             <span className={receiptClasses}>{nonCssBadge}</span>
                         </span>

src/components/views/rooms/MessageComposer.tsx

@@ -666,7 +666,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
         });
 
         return (
-            <Tooltip open={isTooltipOpen} label={formatTimeLeft(secondsLeft)} placement="top">
+            <Tooltip open={isTooltipOpen} description={formatTimeLeft(secondsLeft)} placement="bottom">
                 <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
                     {recordingTooltip}
                     <div className="mx_MessageComposer_wrapper">

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"

src/components/views/rooms/RoomHeader.tsx

@@ -205,7 +205,7 @@ export default function RoomHeader({
     );
     const closeLobbyButton = (
         <Tooltip label={_t("voip|close_lobby")}>
-            <IconButton onClick={toggleCall} aria-label={_t("voip|close_lobby")}>
+            <IconButton onClick={toggleCall}>
                 <CloseCallIcon />
             </IconButton>
         </Tooltip>

src/components/views/rooms/RoomHeader/CallGuestLinkButton.tsx

@@ -80,7 +80,7 @@ export const CallGuestLinkButton: React.FC<{ room: Room }> = ({ room }) => {
         <>
             {canInviteGuests && (
                 <Tooltip label={_t("voip|get_call_link")}>
-                    <IconButton onClick={shareClick} aria-label={_t("voip|get_call_link")}>
+                    <IconButton onClick={shareClick}>
                         <ExternalLinkIcon />
                     </IconButton>
                 </Tooltip>

src/toasts/IncomingCallToast.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useCallback, useEffect, useState } from "react";
 import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
-import { Button, Tooltip } from "@vector-im/compound-web";
+import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 
 import { _t } from "../languageHandler";
@@ -47,7 +47,7 @@ function JoinCallButtonWithCall({ onClick, call, disabledTooltip }: JoinCallButt
     disTooltip = disabledTooltip ?? disabledBecauseFullTooltip ?? undefined;
 
     return (
-        <Tooltip label={disTooltip ?? _t("voip|video_call")}>
+        <Tooltip description={disTooltip ?? _t("voip|video_call")}>
             <Button
                 className="mx_IncomingCallToast_joinButton"
                 onClick={onClick}
@@ -163,38 +163,40 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
     useEventEmitter(call ?? undefined, CallEvent.Participants, onParticipantChange);
 
     return (
-        <>
+        <TooltipProvider>
-            <div>
+            <>
-                <RoomAvatar room={room ?? undefined} size="24px" />
+                <div>
-            </div>
+                    <RoomAvatar room={room ?? undefined} size="24px" />
-            <div className="mx_IncomingCallToast_content">
-                <div className="mx_IncomingCallToast_info">
-                    <span className="mx_IncomingCallToast_room">
-                        {room ? room.name : _t("voip|call_toast_unknown_room")}
-                    </span>
-                    <div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
-                    {call ? (
-                        <LiveContentSummaryWithCall call={call} />
-                    ) : (
-                        <LiveContentSummary
-                            type={LiveContentType.Video}
-                            text={_t("common|video")}
-                            active={false}
-                            participantCount={0}
-                        />
-                    )}
                 </div>
-                <JoinCallButtonWithCall
+                <div className="mx_IncomingCallToast_content">
-                    onClick={onJoinClick}
+                    <div className="mx_IncomingCallToast_info">
-                    call={call}
+                        <span className="mx_IncomingCallToast_room">
-                    disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
+                            {room ? room.name : _t("voip|call_toast_unknown_room")}
+                        </span>
+                        <div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
+                        {call ? (
+                            <LiveContentSummaryWithCall call={call} />
+                        ) : (
+                            <LiveContentSummary
+                                type={LiveContentType.Video}
+                                text={_t("common|video")}
+                                active={false}
+                                participantCount={0}
+                            />
+                        )}
+                    </div>
+                    <JoinCallButtonWithCall
+                        onClick={onJoinClick}
+                        call={call}
+                        disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
+                    />
+                </div>
+                <AccessibleButton
+                    className="mx_IncomingCallToast_closeButton"
+                    onClick={onCloseClick}
+                    title={_t("action|close")}
                 />
-            </div>
+            </>
-            <AccessibleButton
+        </TooltipProvider>
-                className="mx_IncomingCallToast_closeButton"
-                onClick={onCloseClick}
-                title={_t("action|close")}
-            />
-        </>
     );
 }

src/utils/exportUtils/HtmlExport.tsx

@@ -12,6 +12,7 @@ import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"
 import { renderToStaticMarkup } from "react-dom/server";
 import { logger } from "matrix-js-sdk/src/logger";
 import escapeHtml from "escape-html";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import Exporter from "./Exporter";
 import { mediaFromMxc } from "../../customisations/Media";
@@ -271,25 +272,27 @@ export default class HTMLExporter extends Exporter {
         return (
             <div className="mx_Export_EventWrapper" id={mxEv.getId()}>
                 <MatrixClientContext.Provider value={this.room.client}>
-                    <EventTile
+                    <TooltipProvider>
-                        mxEvent={mxEv}
+                        <EventTile
-                        continuation={continuation}
+                            mxEvent={mxEv}
-                        isRedacted={mxEv.isRedacted()}
+                            continuation={continuation}
-                        replacingEventId={mxEv.replacingEventId()}
+                            isRedacted={mxEv.isRedacted()}
-                        forExport={true}
+                            replacingEventId={mxEv.replacingEventId()}
-                        alwaysShowTimestamps={true}
+                            forExport={true}
-                        showUrlPreview={false}
+                            alwaysShowTimestamps={true}
-                        checkUnmounting={() => false}
+                            showUrlPreview={false}
-                        isTwelveHour={false}
+                            checkUnmounting={() => false}
-                        last={false}
+                            isTwelveHour={false}
-                        lastInSection={false}
+                            last={false}
-                        permalinkCreator={this.permalinkCreator}
+                            lastInSection={false}
-                        lastSuccessful={false}
+                            permalinkCreator={this.permalinkCreator}
-                        isSelectedEvent={false}
+                            lastSuccessful={false}
-                        showReactions={false}
+                            isSelectedEvent={false}
-                        layout={Layout.Group}
+                            showReactions={false}
-                        showReadReceipts={false}
+                            layout={Layout.Group}
-                    />
+                            showReadReceipts={false}
+                        />
+                    </TooltipProvider>
                 </MatrixClientContext.Provider>
             </div>
         );

src/utils/pillify.tsx

@@ -10,6 +10,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 import { MatrixClient, MatrixEvent, RuleId } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import SettingsStore from "../settings/SettingsStore";
 import { Pill, pillRoomNotifLen, pillRoomNotifPos, PillType } from "../components/views/elements/Pill";
@@ -75,7 +76,9 @@ export function pillifyLinks(
                 const pillContainer = document.createElement("span");
 
                 const pill = (
-                    <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
+                    <TooltipProvider>
+                        <Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
+                    </TooltipProvider>
                 );
 
                 ReactDOM.render(pill, pillContainer);
@@ -130,12 +133,14 @@ export function pillifyLinks(
 
                         const pillContainer = document.createElement("span");
                         const pill = (
-                            <Pill
+                            <TooltipProvider>
-                                type={PillType.AtRoomMention}
+                                <Pill
-                                inMessage={true}
+                                    type={PillType.AtRoomMention}
-                                room={room}
+                                    inMessage={true}
-                                shouldShowPillAvatar={shouldShowPillAvatar}
+                                    room={room}
-                            />
+                                    shouldShowPillAvatar={shouldShowPillAvatar}
+                                />
+                            </TooltipProvider>
                         );
 
                         ReactDOM.render(pill, pillContainer);

src/utils/tooltipify.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import ReactDOM from "react-dom";
+import { TooltipProvider } from "@vector-im/compound-web";
 
 import PlatformPeg from "../PlatformPeg";
 import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
@@ -52,9 +53,11 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
             // wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
             // without the superfluous span but this is not something React trivially supports at this time.
             const tooltip = (
-                <LinkWithTooltip tooltip={href}>
+                <TooltipProvider>
-                    <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
+                    <LinkWithTooltip tooltip={href}>
-                </LinkWithTooltip>
+                        <span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
+                    </LinkWithTooltip>
+                </TooltipProvider>
             );
 
             ReactDOM.render(tooltip, node);

test/HtmlUtils-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { ReactElement } from "react";
 import { mocked } from "jest-mock";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { IContent } from "matrix-js-sdk/src/matrix";
 
 import { bodyToSpan, formatEmojis, topicToHtml } from "../src/HtmlUtils";

test/LegacyCallHandler-test.ts

@@ -21,7 +21,7 @@ import EventEmitter from "events";
 import { mocked } from "jest-mock";
 import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
 import fetchMock from "fetch-mock-jest";
-import { waitFor } from "@testing-library/react";
+import { waitFor } from "jest-matrix-react";
 
 import LegacyCallHandler, {
     AudioID,

test/Notifier-test.ts

@@ -17,7 +17,7 @@ import {
     MatrixEvent,
     SyncState,
 } from "matrix-js-sdk/src/matrix";
-import { waitFor } from "@testing-library/react";
+import { waitFor } from "jest-matrix-react";
 import { CallMembership, MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 import BasePlatform from "../src/BasePlatform";

test/TextForEvent-test.ts

@@ -16,7 +16,7 @@ import {
     RoomMember,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { ReactElement } from "react";
 import { Mocked, mocked } from "jest-mock";
 

test/accessibility/LandmarkNavigation-test.tsx

@@ -6,7 +6,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "jest-matrix-react";
 import React from "react";
 
 import { Landmark, LandmarkNavigation } from "../../src/accessibility/LandmarkNavigation";

test/accessibility/RovingTabIndex-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { HTMLAttributes } from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import {

test/components/structures/AutocompleteInput-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { screen, render, fireEvent, waitFor, within, act } from "@testing-library/react";
+import { screen, render, fireEvent, waitFor, within, act } from "jest-matrix-react";
 
 import * as TestUtils from "../../test-utils";
 import AutocompleteProvider from "../../../src/autocomplete/AutocompleteProvider";

test/components/structures/FilePanel-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { EventTimelineSet, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
-import { screen, render, waitFor } from "@testing-library/react";
+import { screen, render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
 import FilePanel from "../../../src/components/structures/FilePanel";

test/components/structures/LargeLoader-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 
 import { LargeLoader } from "../../../src/components/structures/LargeLoader";
 

test/components/structures/LeftPanel-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, RenderResult, screen } from "@testing-library/react";
+import { render, RenderResult, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
 import LeftPanel from "../../../src/components/structures/LeftPanel";

test/components/structures/LoggedInView-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "jest-matrix-react";
 import { ConditionKind, EventType, IPushRule, MatrixEvent, ClientEvent, PushRuleKind } from "matrix-js-sdk/src/matrix";
 import { MediaHandler } from "matrix-js-sdk/src/webrtc/mediaHandler";
 import { logger } from "matrix-js-sdk/src/logger";

test/components/structures/MainSplit-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { render, fireEvent } from "jest-matrix-react";
 
 import MainSplit from "../../../src/components/structures/MainSplit";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";

test/components/structures/MatrixChat-test.tsx

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 import "core-js/stable/structured-clone";
 import "fake-indexeddb/auto";
 import React, { ComponentProps } from "react";
-import { fireEvent, render, RenderResult, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, RenderResult, screen, waitFor, within } from "jest-matrix-react";
 import fetchMock from "fetch-mock-jest";
 import { Mocked, mocked } from "jest-mock";
 import { ClientEvent, MatrixClient, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";

test/components/structures/MatrixClientContextProvider-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { act, render } from "@testing-library/react";
+import { act, render } from "jest-matrix-react";
 import React, { useContext } from "react";
 import { CryptoEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";

test/components/structures/MessagePanel-test.tsx

@@ -11,7 +11,7 @@ import React from "react";
 import { EventEmitter } from "events";
 import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../src/settings/SettingsStore";

test/components/structures/PictureInPictureDragger-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { MouseEventHandler } from "react";
-import { screen, render, RenderResult } from "@testing-library/react";
+import { screen, render, RenderResult } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import PictureInPictureDragger, { CreatePipChildren } from "../../../src/components/structures/PictureInPictureDragger";

test/components/structures/PipContainer-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked, Mocked } from "jest-mock";
-import { screen, render, act, cleanup } from "@testing-library/react";
+import { screen, render, act, cleanup } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, PendingEventOrdering, Room, MatrixEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { Widget, ClientWidgetApi } from "matrix-widget-api";

test/components/structures/ReleaseAnnouncement-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "jest-matrix-react";
 
 import { ReleaseAnnouncement } from "../../../src/components/structures/ReleaseAnnouncement";
 import Modal, { ModalManagerEvent } from "../../../src/Modal";

test/components/structures/RightPanel-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "jest-matrix-react";
 import { jest } from "@jest/globals";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";

test/components/structures/RoomSearchView-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import {
     Room,
     MatrixClient,

test/components/structures/RoomStatusBar-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import {
     MatrixClient,
     PendingEventOrdering,

test/components/structures/RoomStatusBarUnsentMessages-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 
 import { RoomStatusBarUnsentMessages } from "../../../src/components/structures/RoomStatusBarUnsentMessages";
 import { StaticNotificationState } from "../../../src/stores/notifications/StaticNotificationState";

test/components/structures/RoomView-test.tsx

@@ -22,7 +22,7 @@ import {
     IEvent,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import {

test/components/structures/SpaceHierarchy-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
 import { HierarchyRoom, JoinRule, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";

test/components/structures/TabbedView-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";
 
 import TabbedView, { Tab, TabLocation } from "../../../src/components/structures/TabbedView";
 import { NonEmptyArray } from "../../../src/@types/common";

test/components/structures/ThreadPanel-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen, fireEvent, waitFor, getByRole } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor, getByRole } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import {
     MatrixClient,

test/components/structures/ThreadView-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
+import { act, getByTestId, render, RenderResult, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import {

test/components/structures/TimelinePanel-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, waitFor, screen } from "@testing-library/react";
+import { render, waitFor, screen } from "jest-matrix-react";
 import {
     ReceiptType,
     EventTimelineSet,
@@ -399,7 +399,7 @@ describe("TimelinePanel", () => {
         setupPagination(client, timeline, eventsPage1, null);
 
         await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {});
+            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />);
 
             await waitFor(() => expectEvents(container, [events[1]]));
 

test/components/structures/UploadBar-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { jest } from "@jest/globals";
 import { Room } from "matrix-js-sdk/src/matrix";
 

test/components/structures/UserMenu-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, render, RenderResult, screen, waitFor } from "@testing-library/react";
+import { act, render, RenderResult, screen, waitFor } from "jest-matrix-react";
 import { DEVICE_CODE_SCOPE, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { CryptoApi } from "matrix-js-sdk/src/crypto-api";
 import { mocked } from "jest-mock";

test/components/structures/ViewSource-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import React from "react";
 

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

@@ -19,6 +19,7 @@ exports[`FilePanel renders empty state 1`] = `
         </p>
       </div>
       <button
+        aria-labelledby="floating-ui-1"
         class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
         data-testid="base-card-close-button"
         role="button"

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

@@ -62,6 +62,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-labelledby="floating-ui-364"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -77,6 +78,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         <button
           aria-disabled="false"
           aria-label="Voice call"
+          aria-labelledby="floating-ui-369"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -101,6 +103,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         </button>
         <button
           aria-label="Room info"
+          aria-labelledby="floating-ui-374"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -125,6 +128,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         </button>
         <button
           aria-label="Threads"
+          aria-labelledby="floating-ui-379"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -153,6 +157,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       >
         <div
           aria-label="2 members"
+          aria-labelledby="floating-ui-384"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -275,6 +280,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-labelledby="floating-ui-394"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -290,6 +296,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         <button
           aria-disabled="false"
           aria-label="Voice call"
+          aria-labelledby="floating-ui-399"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -314,6 +321,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         </button>
         <button
           aria-label="Room info"
+          aria-labelledby="floating-ui-404"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -338,6 +346,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         </button>
         <button
           aria-label="Threads"
+          aria-labelledby="floating-ui-409"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -366,6 +375,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       >
         <div
           aria-label="2 members"
+          aria-labelledby="floating-ui-414"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -573,6 +583,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-labelledby="floating-ui-224"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -588,6 +599,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         <button
           aria-disabled="false"
           aria-label="Voice call"
+          aria-labelledby="floating-ui-229"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -612,6 +624,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         </button>
         <button
           aria-label="Room info"
+          aria-labelledby="floating-ui-234"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -636,6 +649,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         </button>
         <button
           aria-label="Threads"
+          aria-labelledby="floating-ui-239"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -664,6 +678,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       >
         <div
           aria-label="2 members"
+          aria-labelledby="floating-ui-244"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -948,6 +963,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-labelledby="floating-ui-294"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
@@ -963,6 +979,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         <button
           aria-disabled="false"
           aria-label="Voice call"
+          aria-labelledby="floating-ui-299"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -987,6 +1004,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         </button>
         <button
           aria-label="Room info"
+          aria-labelledby="floating-ui-304"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -1011,6 +1029,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         </button>
         <button
           aria-label="Threads"
+          aria-labelledby="floating-ui-309"
           class="_icon-button_bh2qc_17"
           role="button"
           style="--cpd-icon-button-size: 32px;"
@@ -1039,6 +1058,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       >
         <div
           aria-label="2 members"
+          aria-labelledby="floating-ui-314"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -1350,6 +1370,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           >
             <button
               aria-label="Room info"
+              aria-labelledby="floating-ui-84"
               class="_icon-button_bh2qc_17"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -1374,6 +1395,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             </button>
             <button
               aria-label="Chat"
+              aria-labelledby="floating-ui-89"
               class="_icon-button_bh2qc_17"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -1398,6 +1420,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             </button>
             <button
               aria-label="Threads"
+              aria-labelledby="floating-ui-94"
               class="_icon-button_bh2qc_17"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -1426,6 +1449,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           >
             <div
               aria-label="0 members"
+              aria-labelledby="floating-ui-99"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1463,6 +1487,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 </p>
               </div>
               <button
+                aria-labelledby="floating-ui-108"
                 class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
                 data-testid="base-card-close-button"
                 role="button"

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

@@ -393,6 +393,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <span
+            aria-labelledby="floating-ui-9"
             tabindex="0"
           >
             <span

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

@@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
     class="mx_BaseCard_header_title"
   >
     <button
-      aria-label="Mark all as read"
+      aria-labelledby="floating-ui-1"
       class="_icon-button_bh2qc_17"
       role="button"
       style="--cpd-icon-button-size: 24px;"
@@ -41,7 +41,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
     class="mx_BaseCard_header_title"
   >
     <button
-      aria-label="Mark all as read"
+      aria-labelledby="floating-ui-6"
       class="_icon-button_bh2qc_17"
       role="button"
       style="--cpd-icon-button-size: 24px;"

test/components/structures/auth/CompleteSecurity-test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import EventEmitter from "events";
 

test/components/structures/auth/ForgotPassword-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { act, render, RenderResult, screen } from "@testing-library/react";
+import { act, render, RenderResult, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, createClient } from "matrix-js-sdk/src/matrix";
 

test/components/structures/auth/Login-test.tsx

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 import { mocked, MockedObject } from "jest-mock";
 import fetchMock from "fetch-mock-jest";
 import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, OidcClientConfig } from "matrix-js-sdk/src/matrix";

test/components/structures/auth/LoginSplashView-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { act, render, RenderResult } from "@testing-library/react";
+import { act, render, RenderResult } from "jest-matrix-react";
 import React, { ComponentProps } from "react";
 import EventEmitter from "events";
 import { CryptoEvent } from "matrix-js-sdk/src/matrix";

test/components/structures/auth/Registration-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
 import { createClient, MatrixClient, MatrixError, OidcClientConfig } from "matrix-js-sdk/src/matrix";
 import { mocked, MockedObject } from "jest-mock";
 import fetchMock from "fetch-mock-jest";

test/components/views/audio_messages/RecordingPlayback-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { mocked } from "jest-mock";
 import { logger } from "matrix-js-sdk/src/logger";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { fireEvent, render, RenderResult } from "jest-matrix-react";
 
 import RecordingPlayback, { PlaybackLayout } from "../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../src/audio/Playback";

test/components/views/audio_messages/SeekBar-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { createRef, RefObject } from "react";
 import { mocked } from "jest-mock";
-import { act, fireEvent, render, RenderResult } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult } from "jest-matrix-react";
 
 import { Playback } from "../../../../src/audio/Playback";
 import { createTestPlayback } from "../../../test-utils/audio";

test/components/views/auth/CountryDropdown-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import CountryDropdown from "../../../../src/components/views/auth/CountryDropdown";

test/components/views/auth/InteractiveAuthEntryComponents-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { render, screen, waitFor, act, fireEvent } from "@testing-library/react";
+import { render, screen, waitFor, act, fireEvent } from "jest-matrix-react";
 import { AuthType } from "matrix-js-sdk/src/interactive-auth";
 import userEvent from "@testing-library/user-event";
 

test/components/views/auth/RegistrationToken-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { fireEvent, render, RenderResult } from "jest-matrix-react";
 
 import InteractiveAuthComponent from "../../../../src/components/structures/InteractiveAuth";
 import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";

test/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap

@@ -46,7 +46,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x);"
     >
       <button
-        class="_button_zt6rp_17 mx_Dialog_nonDialogButton _has-icon_zt6rp_61"
+        class="_button_i91xf_17 mx_Dialog_nonDialogButton _has-icon_i91xf_66"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -70,7 +70,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
         Go to your account
       </button>
       <button
-        class="_button_zt6rp_17 mx_Dialog_nonDialogButton"
+        class="_button_i91xf_17 mx_Dialog_nonDialogButton"
         data-kind="secondary"
         data-size="lg"
         role="button"

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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import { JoinRule, MatrixClient, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
 import React from "react";
@@ -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/MemberAvatar-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { getByTestId, render, waitFor } from "@testing-library/react";
+import { getByTestId, render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import { MatrixClient, PendingEventOrdering, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import React, { ComponentProps } from "react";

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

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 

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

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import { MatrixClient, PendingEventOrdering, Room, RoomMember, User } from "matrix-js-sdk/src/matrix";
 import React from "react";
@@ -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-6"
       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-6"
       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-12"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
       style="width: 32px; height: 32px;"
       tabindex="0"

test/components/views/beacon/BeaconListItem-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";
 import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
 
 import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";

test/components/views/beacon/BeaconMarker-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "jest-matrix-react";
 import * as maplibregl from "maplibre-gl";
 import { Beacon, Room, RoomMember, MatrixEvent, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 

test/components/views/beacon/BeaconStatus-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { Beacon } from "matrix-js-sdk/src/matrix";
 
 import BeaconStatus from "../../../../src/components/views/beacon/BeaconStatus";

test/components/views/beacon/BeaconViewDialog-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, RenderResult, waitFor } from "jest-matrix-react";
 import { MatrixClient, MatrixEvent, Room, RoomMember, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { mocked } from "jest-mock";

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

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ComponentProps } from "react";
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";
 
 import DialogSidebar from "../../../../src/components/views/beacon/DialogSidebar";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";

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

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";
 import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix";
 
 import LeftPanelLiveShareWarning from "../../../../src/components/views/beacon/LeftPanelLiveShareWarning";

test/components/views/beacon/OwnBeaconStatus-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { mocked } from "jest-mock";
 import { Beacon } from "matrix-js-sdk/src/matrix";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import OwnBeaconStatus from "../../../../src/components/views/beacon/OwnBeaconStatus";

test/components/views/beacon/RoomCallBanner-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { Room, PendingEventOrdering, MatrixClient, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, Widget } from "matrix-widget-api";
-import { act, cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen } from "jest-matrix-react";
 import { mocked, Mocked } from "jest-mock";
 
 import { mkRoomMember, MockedCall, setupAsyncStoreWithClient, stubClient, useMockedCalls } from "../../../test-utils";

test/components/views/beacon/ShareLatestLocation-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render } from "jest-matrix-react";
 
 import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLatestLocation";
 import { copyPlaintext } from "../../../../src/utils/strings";

test/components/views/beacon/StyledLiveBeaconIcon-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import StyledLiveBeaconIcon from "../../../../src/components/views/beacon/StyledLiveBeaconIcon";
 

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

@@ -32,6 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           class="mx_BeaconListItem_interactions"
         >
           <a
+            aria-labelledby="floating-ui-1"
             data-testid="open-location-in-osm"
             href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
             rel="noreferrer noopener"

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

@@ -74,6 +74,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <a
+                aria-labelledby="floating-ui-8"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"

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

@@ -3,6 +3,7 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
   <a
+    aria-labelledby="floating-ui-1"
     data-testid="open-location-in-osm"
     href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
     rel="noreferrer noopener"

test/components/views/beta/BetaCard-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 
 import { shouldShowFeedback } from "../../../../src/utils/Feedback";
 import BetaCard from "../../../../src/components/views/beta/BetaCard";

test/components/views/context_menus/ContextMenu-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import ContextMenu, { ChevronFace } from "../../../../src/components/structures/ContextMenu";
 import UIStore from "../../../../src/stores/UIStore";

test/components/views/context_menus/EmbeddedPage-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 } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
 import { _t } from "../../../../src/languageHandler";

test/components/views/context_menus/MessageContextMenu-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, RenderResult, screen, waitFor } from "jest-matrix-react";
 import {
     EventStatus,
     MatrixEvent,