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>

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
-            {...props}
-            mountAsChild={true}
-            hasBackground={false}
-            onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
-            windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
-        >
-            <ElementClass {...props} onFinished={onFinished} />
-        </ContextMenu>
+        <TooltipProvider>
+            <ContextMenu
+                {...props}
+                mountAsChild={true}
+                hasBackground={false}
+                onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
+                windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
+            >
+                <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")}