Deprecate AccessibleTooltipButton and add Tooltip capability to AccessibleButton

src/components/views/beta/BetaCard.tsx

@@ -27,7 +27,6 @@ import SdkConfig from "../../../SdkConfig";
 import SettingsFlag from "../elements/SettingsFlag";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import InlineSpinner from "../elements/InlineSpinner";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { shouldShowFeedback } from "../../../utils/Feedback";
 
 // XXX: Keep this around for re-use in future Betas
@@ -50,19 +49,14 @@ export const BetaPill: React.FC<IBetaPillProps> = ({
 }) => {
     if (onClick) {
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 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")}
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         );
     }
 

src/components/views/elements/AccessibleButton.tsx

@@ -16,6 +16,7 @@
 
 import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
 import classnames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -86,6 +87,14 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
      * Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
      */
     onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
+    /**
+     * The tooltip to show on hover or focus.
+     */
+    title?: string;
+    /**
+     * The caption to show within a tooltip as above, only valid when used in conjunction with `title`.
+     */
+    caption?: string;
 };
 
 /**
@@ -116,10 +125,13 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
         onKeyDown,
         onKeyUp,
         triggerOnMouseDown,
+        caption,
         ...restProps
     }: Props<T>,
     ref: Ref<HTMLElement>,
 ): JSX.Element {
+    const { title } = restProps;
+
     const newProps: RenderedElementProps = restProps;
     if (disabled) {
         newProps["aria-disabled"] = true;
@@ -182,7 +194,16 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
     });
 
     // React.createElement expects InputHTMLAttributes
-    return React.createElement(element, newProps, children);
+    const button = React.createElement(element, newProps, children);
+
+    if (title) {
+        return (
+            <Tooltip label={title} caption={caption} isTriggerInteractive={!disabled}>
+                {button}
+            </Tooltip>
+        );
+    }
+    return button;
 });
 
 // Type assertion required due to forwardRef type workaround in react.d.ts

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -60,6 +60,9 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
     onHideTooltip?(ev: SyntheticEvent): void;
 };
 
+/**
+ * @deprecated use AccessibleButton with `title` and `caption` instead.
+ */
 const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
     { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props<T>,
     ref: Ref<HTMLElement>,

src/components/views/elements/AppTile.tsx

@@ -25,7 +25,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
-import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
 import AppPermission from "./AppPermission";
 import AppWarning from "./AppWarning";
@@ -58,6 +57,7 @@ import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingSto
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
 import { parseUrl } from "../../../utils/UrlUtils";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 interface IProps {
     app: IWidget | IApp;
@@ -749,7 +749,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                 WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center);
 
             layoutButtons.push(
-                <AccessibleButton
+                <AccessibleTooltipButton
                     key="toggleMaximised"
                     className="mx_AppTileMenuBar_widgets_button"
                     title={isMaximised ? _t("widget|unmaximise") : _t("action|maximise")}
@@ -760,18 +760,18 @@ export default class AppTile extends React.Component<IProps, IState> {
                     ) : (
                         <MaximiseIcon className="mx_Icon mx_Icon_12" />
                     )}
-                </AccessibleButton>,
+                </AccessibleTooltipButton>,
             );
 
             layoutButtons.push(
-                <AccessibleButton
+                <AccessibleTooltipButton
                     key="minimise"
                     className="mx_AppTileMenuBar_widgets_button"
                     title={_t("action|minimise")}
                     onClick={this.onMinimiseClicked}
                 >
                     <MinimiseIcon className="mx_Icon mx_Icon_12" />
-                </AccessibleButton>,
+                </AccessibleTooltipButton>,
             );
         }
 
@@ -789,13 +789,13 @@ export default class AppTile extends React.Component<IProps, IState> {
                             <span className="mx_AppTileMenuBar_widgets">
                                 {layoutButtons}
                                 {this.props.showPopout && !this.state.requiresClient && (
-                                    <AccessibleButton
+                                    <AccessibleTooltipButton
                                         className="mx_AppTileMenuBar_widgets_button"
                                         title={_t("widget|popout")}
                                         onClick={this.onPopoutWidgetClick}
                                     >
                                         <PopoutIcon className="mx_Icon mx_Icon_12 mx_Icon--stroke" />
-                                    </AccessibleButton>
+                                    </AccessibleTooltipButton>
                                 )}
                                 {this.state.hasContextMenuOptions && (
                                     <ContextMenuButton

src/components/views/messages/TextualBody.tsx

@@ -31,7 +31,6 @@ import { tooltipifyLinks, unmountTooltips } from "../../../utils/tooltipify";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import UIStore from "../../../stores/UIStore";
 import { Action } from "../../../dispatcher/actions";
 import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
@@ -522,22 +521,15 @@ 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
+            <AccessibleButton
                 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>
+            </AccessibleButton>
         );
     }
 

src/components/views/rooms/CollapsibleButton.tsx

@@ -18,7 +18,6 @@ import React, { ComponentProps, useContext } from "react";
 import classNames from "classnames";
 
 import AccessibleButton from "../elements/AccessibleButton";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { OverflowMenuContext } from "./MessageComposerButtons";
 import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
 import { Ref } from "../../../accessibility/roving/types";
@@ -43,13 +42,8 @@ export const CollapsibleButton: React.FC<Props> = ({
     }
 
     return (
-        <AccessibleTooltipButton
-            {...props}
-            title={title}
-            className={classNames(className, iconClassName)}
-            ref={inputRef}
-        >
+        <AccessibleButton {...props} title={title} className={classNames(className, iconClassName)} ref={inputRef}>
             {children}
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 };

src/components/views/rooms/EmojiButton.tsx

@@ -61,6 +61,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
                 iconClassName="mx_EmojiButton_icon"
                 onClick={openMenu}
                 title={_t("common|emoji")}
+                aria-label={_t("common|emoji")}
                 inputRef={button}
             />
 

src/components/views/rooms/EntityTile.tsx

@@ -178,6 +178,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
                 <AccessibleButton
                     className={classNames(mainClassNames)}
                     title={this.props.title}
+                    aria-label={this.props.title}
                     onClick={this.props.onClick}
                 >
                     <div className="mx_EntityTile_avatar">

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -32,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons";
 import E2EIcon from "./E2EIcon";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { ButtonEvent } from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
@@ -658,7 +658,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         if (this.props.viewingCall && !isVideoRoom) {
             if (this.props.activeCall === null) {
                 endButtons.push(
-                    <AccessibleButton
+                    <AccessibleTooltipButton
                         className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_closeButton"
                         onClick={this.onHideCallClick}
                         title={_t("room|header|close_call_button")}

src/components/views/rooms/MessageComposerButtons.tsx

@@ -246,6 +246,7 @@ const UploadButton: React.FC = () => {
             iconClassName="mx_MessageComposer_upload"
             onClick={onClick}
             title={_t("common|attachment")}
+            aria-label={_t("common|attachment")}
         />
     );
 };

src/components/views/rooms/PinnedEventTile.tsx

@@ -27,7 +27,6 @@ import { _t } from "../../../languageHandler";
 import { formatDate } from "../../../DateUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 
@@ -76,7 +75,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
         let unpinButton: JSX.Element | undefined;
         if (this.props.onUnpinClicked) {
             unpinButton = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     onClick={this.props.onUnpinClicked}
                     className="mx_PinnedEventTile_unpinButton"
                     title={_t("action|unpin")}

src/components/views/rooms/RoomKnocksBar.tsx

@@ -99,6 +99,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
                     kind="icon_primary_outline"
                     onClick={() => handleDeny(knockMembers[0].userId)}
                     title={_t("action|deny")}
+                    aria-label={_t("action|deny")}
                 >
                     <XIcon width={18} height={18} />
                 </AccessibleButton>
@@ -108,6 +109,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
                     kind="icon_primary"
                     onClick={() => handleApprove(knockMembers[0].userId)}
                     title={_t("action|approve")}
+                    aria-label={_t("action|approve")}
                 >
                     <CheckIcon width={18} height={18} />
                 </AccessibleButton>

src/components/views/rooms/RoomList.tsx

@@ -57,10 +57,10 @@ import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ExtraTile from "./ExtraTile";
 import RoomSublist, { IAuxButtonProps } from "./RoomSublist";
 import { SdkContextClass } from "../../../contexts/SDKContext";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void;
@@ -185,7 +185,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
         );
     } else if (!activeSpace && showCreateRooms) {
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 tabIndex={tabIndex}
                 onClick={(e) => {
                     dispatcher.dispatch({ action: "view_create_chat" });

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -19,7 +19,6 @@ import { Room, IEventRelation, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Optional } from "matrix-events-sdk";
 
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { RecordingState } from "../../../audio/VoiceRecording";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -44,6 +43,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import RoomContext from "../../../contexts/RoomContext";
 import { IUpload, VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
 import { createVoiceMessageContent } from "../../../utils/createVoiceMessageContent";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     room: Room;
@@ -271,7 +271,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             }
 
             stopBtn = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_VoiceRecordComposerTile_stop"
                     onClick={this.onRecordStartEndClick}
                     title={tooltip}
@@ -284,7 +284,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
             deleteButton = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_VoiceRecordComposerTile_delete"
                     title={_t("action|delete")}
                     onClick={this.onCancel}

src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx

@@ -96,6 +96,7 @@ const Knock: VFC<{
                 kind="icon_primary_outline"
                 onClick={() => handleDeny(roomMember.userId)}
                 title={_t("action|deny")}
+                aria-label={_t("action|deny")}
             >
                 <XIcon width={18} height={18} />
             </AccessibleButton>
@@ -105,6 +106,7 @@ const Knock: VFC<{
                 kind="icon_primary"
                 onClick={() => handleApprove(roomMember.userId)}
                 title={_t("action|approve")}
+                aria-label={_t("action|approve")}
             >
                 <CheckIcon width={18} height={18} />
             </AccessibleButton>

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -38,7 +38,6 @@ import {
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
 import createRoom, { IOpts as ICreateOpts } from "../../../createRoom";
 import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
@@ -310,7 +309,7 @@ const SpaceCreateMenu: React.FC<{
     } else {
         body = (
             <React.Fragment>
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_SpaceCreateMenu_back"
                     onClick={() => setVisibility(null)}
                     title={_t("action|go_back")}