Switch AccessibleTooltipButton to using Compound Tooltips

res/css/views/rooms/_MessageComposerFormatBar.pcss

@@ -102,9 +102,4 @@ limitations under the License.
     font-weight: var(--cpd-font-weight-semibold);
     min-width: 54px;
     text-align: center;
-
-    .mx_MessageComposerFormatBar_tooltipShortcut {
-        font-size: $font-9px;
-        opacity: 0.7;
-    }
 }

res/css/views/rooms/_RoomBreadcrumbs.pcss

@@ -49,8 +49,3 @@ limitations under the License.
         height: 32px;
     }
 }
-
-.mx_RoomBreadcrumbs_Tooltip {
-    margin-left: -42px;
-    margin-top: -42px;
-}

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -63,20 +63,3 @@ limitations under the License.
         color: $tertiary-content;
     }
 }
-
-.mx_FormattingButtons_Tooltip {
-    padding: 0 2px 0 2px;
-
-    .mx_FormattingButtons_Tooltip_KeyboardShortcut {
-        color: $tertiary-content;
-
-        kbd {
-            margin-top: 2px;
-            text-align: center;
-            display: inline-block;
-            text-transform: capitalize;
-            font-size: 12px;
-            font-family: Inter, sans-serif;
-        }
-    }
-}

src/accessibility/RovingTabIndex.tsx

@@ -18,14 +18,14 @@ import React, {
     createContext,
     useCallback,
     useContext,
-    useLayoutEffect,
     useMemo,
     useRef,
     useReducer,
     Reducer,
     Dispatch,
     RefObject,
     ReactNode,
+    useEffect,
 } from "react";
 
 import { getKeyBindingsManager } from "../KeyBindingsManager";
@@ -346,7 +346,7 @@ export const useRovingTabIndex = <T extends HTMLElement>(
     }
 
     // setup (after refs)
-    useLayoutEffect(() => {
+    useEffect(() => {
         context.dispatch({
             type: Type.Register,
             payload: { ref },

src/components/structures/SpaceHierarchy.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React, {
     ComponentProps,
+    ComponentType,
     Dispatch,
     KeyboardEvent,
     KeyboardEventHandler,
@@ -73,7 +74,6 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
-import { Alignment } from "../views/elements/Tooltip";
 import { getTopic } from "../../hooks/room/useTopic";
 import { SdkContextClass } from "../../contexts/SDKContext";
 import { getDisplayAliasForAliasSet } from "../../Rooms";
@@ -664,13 +664,13 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
 
     const disabled = !selectedRelations.length || removing || saving;
 
-    let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
+    let Button: ComponentType<ComponentProps<typeof AccessibleTooltipButton>> = AccessibleButton;
     let props: Partial<ComponentProps<typeof AccessibleTooltipButton>> = {};
     if (!selectedRelations.length) {
         Button = AccessibleTooltipButton;
         props = {
-            tooltip: _t("space|select_room_below"),
-            alignment: Alignment.Top,
+            title: _t("space|select_room_below"),
+            side: "top",
         };
     }
 

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -29,7 +29,6 @@ import AccessibleButton, { AccessibleButtonKind, ButtonEvent } from "../elements
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
-import { Alignment } from "../elements/Tooltip";
 import CaptchaForm from "./CaptchaForm";
 
 /* This file contains a collection of components which are used by the
@@ -509,7 +508,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                                             title={
                                                 this.state.requested ? _t("auth|uia|email_resent") : _t("action|resend")
                                             }
-                                            alignment={Alignment.Right}
+                                            side="right"
                                             onHideTooltip={
                                                 this.state.requested
                                                     ? () => this.setState({ requested: false })

src/components/views/beta/BetaCard.tsx

@@ -52,13 +52,8 @@ export const BetaPill: React.FC<IBetaPillProps> = ({
         return (
             <AccessibleTooltipButton
                 className="mx_BetaCard_betaPill"
-                title={`${tooltipTitle} ${tooltipCaption}`}
-                tooltip={
-                    <div>
-                        <div className="mx_Tooltip_title">{tooltipTitle}</div>
-                        <div className="mx_Tooltip_sub">{tooltipCaption}</div>
-                    </div>
-                }
+                title={tooltipTitle}
+                caption={tooltipCaption}
                 onClick={onClick}
             >
                 {_t("common|beta")}

src/components/views/dialogs/ForwardDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useEffect, useMemo, useState } from "react";
 import classnames from "classnames";
 import {
     IContent,
@@ -39,7 +39,6 @@ import { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { Alignment } from "../elements/Tooltip";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
@@ -107,10 +106,10 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
         }
     };
 
-    let className;
+    let className: string;
     let disabled = false;
-    let title;
-    let icon;
+    let title: string | undefined;
+    let icon: ReactNode | undefined;
     if (sendState === SendState.CanSend) {
         className = "mx_ForwardList_canSend";
         if (!room.maySendMessage()) {
@@ -140,7 +139,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
                 className="mx_ForwardList_roomButton"
                 onClick={jumpToRoom}
                 title={_t("forward|open_room")}
-                alignment={Alignment.Top}
+                side="top"
             >
                 <DecoratedRoomAvatar room={room} size="32px" />
                 <span className="mx_ForwardList_entry_name">{room.name}</span>
@@ -152,7 +151,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
                 onClick={send}
                 disabled={disabled}
                 title={title}
-                alignment={Alignment.Top}
+                side="top"
             >
                 <div className="mx_ForwardList_sendLabel">{_t("forward|send_label")}</div>
                 {icon}

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -16,9 +16,9 @@ limitations under the License.
 */
 
 import React, { SyntheticEvent, FocusEvent, forwardRef, useEffect, Ref, useState, ComponentProps } from "react";
+import { Tooltip } from "@vector-im/compound-web";
 
 import AccessibleButton from "./AccessibleButton";
-import Tooltip, { Alignment } from "./Tooltip";
 
 /**
  * Type of props accepted by {@link AccessibleTooltipButton}.
@@ -27,29 +27,17 @@ import Tooltip, { Alignment } from "./Tooltip";
  */
 type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
     /**
-     * Title to show in the tooltip and use as aria-label
+     * Title to show in the tooltip
      */
     title?: string;
-    /**
-     * Tooltip node to show in the tooltip, takes precedence over `title`
-     */
-    tooltip?: React.ReactNode;
     /**
      * Trigger label to render
      */
     label?: string;
-    /**
-     * Classname to apply to the tooltip
-     */
-    tooltipClassName?: string;
     /**
      * Force the tooltip to be hidden
      */
     forceHide?: boolean;
-    /**
-     * Alignment to render the tooltip with
-     */
-    alignment?: Alignment;
     /**
      * Function to call when the children are hovered over
      */
@@ -58,10 +46,10 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
      * Function to call when the tooltip goes from shown to hidden.
      */
     onHideTooltip?(ev: SyntheticEvent): void;
-};
+} & Pick<ComponentProps<typeof Tooltip>, "caption" | "side" | "align">;
 
 const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
-    { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props<T>,
+    { title, children, forceHide, side, align, onHideTooltip, caption, ...props }: Props<T>,
     ref: Ref<HTMLElement>,
 ) {
     const [hover, setHover] = useState(false);
@@ -91,23 +79,22 @@ const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.Intrins
         if (ev.relatedTarget) showTooltip();
     };
 
-    const tip = hover && (title || tooltip) && (
-        <Tooltip tooltipClassName={tooltipClassName} label={tooltip || title} alignment={alignment} />
-    );
     return (
-        <AccessibleButton
-            {...props}
-            onMouseOver={showTooltip}
-            onMouseLeave={hideTooltip}
-            onFocus={onFocus}
-            onBlur={hideTooltip}
-            aria-label={title || props["aria-label"]}
-            ref={ref}
-        >
-            {children}
-            {props.label}
-            {(tooltip || title) && tip}
-        </AccessibleButton>
+        <Tooltip label={title ?? ""} caption={caption} side={side} align={align} open={hover && !!title}>
+            <AccessibleButton
+                // Compound tooltips use aria-describeddby instead of aria-label which makes it hard for tests to target buttons by label
+                data-testid={title}
+                {...props}
+                onMouseOver={showTooltip}
+                onMouseLeave={hideTooltip}
+                onFocus={onFocus}
+                onBlur={hideTooltip}
+                ref={ref}
+            >
+                {children}
+                {props.label}
+            </AccessibleButton>
+        </Tooltip>
     );
 });
 

src/components/views/messages/CallEvent.tsx

@@ -83,7 +83,7 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                             kind={buttonKind}
                             disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
                             onClick={onButtonClick}
-                            tooltip={buttonDisabledTooltip}
+                            title={buttonDisabledTooltip}
                         >
                             {buttonText}
                         </AccessibleTooltipButton>

src/components/views/messages/MessageActionBar.tsx

@@ -233,15 +233,6 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
         <RovingAccessibleTooltipButton
             className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
             disabled={hasARelation}
-            tooltip={
-                <>
-                    <div className="mx_Tooltip_title">
-                        {!hasARelation
-                            ? _t("action|reply_in_thread")
-                            : _t("threads|error_start_thread_existing_relation")}
-                    </div>
-                </>
-            }
             title={!hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation")}
             onClick={onClick}
             onContextMenu={onClick}
@@ -509,18 +500,6 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     mx_MessageActionBar_iconButton: true,
                     mx_MessageActionBar_expandCollapseMessageButton: true,
                 });
-                const tooltip = (
-                    <>
-                        <div className="mx_Tooltip_title">
-                            {this.props.isQuoteExpanded
-                                ? _t("timeline|mab|collapse_reply_chain")
-                                : _t("timeline|mab|expand_reply_chain")}
-                        </div>
-                        <div className="mx_Tooltip_sub">
-                            {_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
-                        </div>
-                    </>
-                );
                 toolbarOpts.push(
                     <RovingAccessibleTooltipButton
                         className={expandClassName}
@@ -529,7 +508,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                                 ? _t("timeline|mab|collapse_reply_chain")
                                 : _t("timeline|mab|expand_reply_chain")
                         }
-                        tooltip={tooltip}
+                        caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
                         onClick={this.props.toggleThreadExpanded}
                         key="expand"
                     >

src/components/views/messages/TextualBody.tsx

@@ -526,19 +526,12 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         const date = this.props.mxEvent.replacingEventDate();
         const dateString = date && formatDate(date);
 
-        const tooltip = (
-            <div>
-                <div className="mx_Tooltip_title">{_t("timeline|edits|tooltip_title", { date: dateString })}</div>
-                <div className="mx_Tooltip_sub">{_t("timeline|edits|tooltip_sub")}</div>
-            </div>
-        );
-
         return (
             <AccessibleTooltipButton
                 className="mx_EventTile_edited"
                 onClick={this.openHistoryDialog}
-                title={_t("timeline|edits|tooltip_label", { date: dateString })}
-                tooltip={tooltip}
+                title={_t("timeline|edits|tooltip_title", { date: dateString })}
+                caption={_t("timeline|edits|tooltip_sub")}
             >
                 <span>{`(${_t("common|edited")})`}</span>
             </AccessibleTooltipButton>

src/components/views/pips/WidgetPip.tsx

@@ -34,7 +34,6 @@ import { WidgetType } from "../../../widgets/WidgetType";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
-import { Alignment } from "../elements/Tooltip";
 
 interface Props {
     widgetId: string;
@@ -124,14 +123,10 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
                             {roomName}
                         </RovingAccessibleButton>
                     </Toolbar>
+
                     {(call !== null || WidgetType.JITSI.matches(widget?.type)) && (
                         <Toolbar className="mx_WidgetPip_footer">
-                            <RovingAccessibleTooltipButton
-                                onClick={onLeaveClick}
-                                tooltip={_t("action|leave")}
-                                aria-label={_t("action|leave")}
-                                alignment={Alignment.Top}
-                            >
+                            <RovingAccessibleTooltipButton onClick={onLeaveClick} title={_t("action|leave")} side="top">
                                 <HangupIcon className="mx_Icon mx_Icon_24" />
                             </RovingAccessibleTooltipButton>
                         </Toolbar>

src/components/views/right_panel/HeaderButton.tsx

@@ -23,7 +23,6 @@ import classNames from "classnames";
 
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { ButtonEvent } from "../elements/AccessibleButton";
-import { Alignment } from "../elements/Tooltip";
 
 interface IProps {
     // Whether this button is highlighted
@@ -56,7 +55,7 @@ export default class HeaderButton extends React.Component<IProps> {
                 {...props}
                 aria-current={isHighlighted ? "true" : "false"}
                 title={title}
-                alignment={Alignment.Bottom}
+                side="bottom"
                 className={classes}
                 onClick={onClick}
             />