Tooltip: Use AccessibleButton in reusable elements (#12461)

* Update reusable elements

* Update tests

* Make right as default tooltip placement

* Add tests

src/components/views/elements/AccessibleButton.tsx

@@ -138,7 +138,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
         triggerOnMouseDown,
         title,
         caption,
-        placement,
+        placement = "right",
         onTooltipOpenChange,
         ...restProps
     }: Props<T>,

src/components/views/elements/CopyableText.tsx

@@ -20,8 +20,7 @@ import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
-import { ButtonEvent } from "./AccessibleButton";
-import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
 
 interface IProps {
     children?: React.ReactNode;
@@ -53,11 +52,13 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
     return (
         <div className={combinedClassName}>
             {children}
-            <AccessibleTooltipButton
+            <AccessibleButton
                 title={tooltip ?? _t("action|copy")}
                 onClick={onCopyClickInternal}
                 className="mx_CopyableText_copyButton"
-                onHideTooltip={onHideTooltip}
+                onTooltipOpenChange={(open) => {
+                    if (!open) onHideTooltip();
+                }}
             />
         </div>
     );

src/components/views/elements/ImageView.tsx

@@ -21,7 +21,6 @@ import FocusLock from "react-focus-lock";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
-import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
@@ -38,6 +37,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { presentableTextForFile } from "../../../utils/FileUtils";
+import AccessibleButton from "./AccessibleButton";
 
 // Max scale to keep gaps around the image
 const MAX_SCALE = 0.95;
@@ -513,14 +513,14 @@ export default class ImageView extends React.Component<IProps, IState> {
         }
 
         const zoomOutButton = (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_ImageView_button mx_ImageView_button_zoomOut"
                 title={_t("action|zoom_out")}
                 onClick={this.onZoomOutClick}
             />
         );
         const zoomInButton = (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_ImageView_button mx_ImageView_button_zoomIn"
                 title={_t("action|zoom_in")}
                 onClick={this.onZoomInClick}
@@ -553,23 +553,23 @@ export default class ImageView extends React.Component<IProps, IState> {
                     <div className="mx_ImageView_toolbar">
                         {zoomOutButton}
                         {zoomInButton}
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCCW"
                             title={_t("lightbox|rotate_left")}
                             onClick={this.onRotateCounterClockwiseClick}
                         />
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCW"
                             title={_t("lightbox|rotate_right")}
                             onClick={this.onRotateClockwiseClick}
                         />
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("action|download")}
                             onClick={this.onDownloadClick}
                         />
                         {contextMenuButton}
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("action|close")}
                             onClick={this.props.onFinished}

src/components/views/elements/SSOButtons.tsx

@@ -30,7 +30,6 @@ import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
 import PlatformPeg from "../../../PlatformPeg";
 import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
-import AccessibleTooltipButton from "./AccessibleTooltipButton";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
 
@@ -131,9 +130,9 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
     if (mini) {
         // TODO fallback icon
         return (
-            <AccessibleTooltipButton {...props} title={label} className={classes} onClick={onClick}>
+            <AccessibleButton {...props} title={label} className={classes} onClick={onClick}>
                 {icon}
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         );
     }
 

src/components/views/elements/ToggleSwitch.tsx

@@ -18,7 +18,7 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 
-import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import AccessibleButton from "./AccessibleButton";
 
 interface IProps {
     // Whether or not this toggle is in the 'on' position.
@@ -41,7 +41,7 @@ interface IProps {
 }
 
 // Controlled Toggle Switch element, written with Accessibility in mind
-export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX.Element => {
+export default ({ checked, disabled = false, onChange, title, tooltip, ...props }: IProps): JSX.Element => {
     const _onClick = (): void => {
         if (disabled) return;
         onChange(!checked);
@@ -54,15 +54,17 @@ export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX.
     });
 
     return (
-        <AccessibleTooltipButton
+        <AccessibleButton
             {...props}
             className={classes}
             onClick={_onClick}
             role="switch"
+            aria-label={title}
             aria-checked={checked}
             aria-disabled={disabled}
+            title={tooltip}
         >
             <div className="mx_ToggleSwitch_ball" />
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 };