Tooltip: Use AccessibleButton in reusable elements

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,14 @@ 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();
+                }}
+                placement="right"
             />
         </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,17 +513,19 @@ 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}
+                placement="right"
             />
         );
         const zoomInButton = (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_ImageView_button mx_ImageView_button_zoomIn"
                 title={_t("action|zoom_in")}
                 onClick={this.onZoomInClick}
+                placement="right"
             />
         );
 
@@ -553,26 +555,30 @@ 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}
+                            placement="right"
                         />
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_rotateCW"
                             title={_t("lightbox|rotate_right")}
                             onClick={this.onRotateClockwiseClick}
+                            placement="right"
                         />
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_download"
                             title={_t("action|download")}
                             onClick={this.onDownloadClick}
+                            placement="right"
                         />
                         {contextMenuButton}
-                        <AccessibleTooltipButton
+                        <AccessibleButton
                             className="mx_ImageView_button mx_ImageView_button_close"
                             title={_t("action|close")}
                             onClick={this.props.onFinished}
+                            placement="right"
                         />
                         {this.renderContextMenu()}
                     </div>

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} placement="right">
                 {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,18 @@ 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}
+            placement="right"
         >
             <div className="mx_ToggleSwitch_ball" />
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 };

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

@@ -48,6 +48,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
             <div
               aria-label="Copy"
               class="mx_AccessibleButton mx_CopyableText_copyButton"
+              data-state="closed"
               role="button"
               tabindex="0"
             />

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

@@ -82,6 +82,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                 <div
                   aria-label="Copy"
                   class="mx_AccessibleButton mx_CopyableText_copyButton"
+                  data-state="closed"
                   role="button"
                   tabindex="0"
                 />

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

@@ -19,6 +19,7 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
     <div
       aria-label="Copy"
       class="mx_AccessibleButton mx_CopyableText_copyButton"
+      data-state="closed"
       role="button"
       tabindex="0"
     />

test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -41,6 +41,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
       <div
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
+        data-state="closed"
         role="button"
         tabindex="0"
       />

test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap

@@ -45,6 +45,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                   <div
                     aria-label="Copy"
                     class="mx_AccessibleButton mx_CopyableText_copyButton"
+                    data-state="closed"
                     role="button"
                     tabindex="0"
                   />

test/components/views/settings/tabs/user/LabsUserSettingsTab-test.tsx

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
@@ -113,12 +114,14 @@ describe("<LabsUserSettingsTab />", () => {
                 expect(toggle.getAttribute("aria-checked")).toEqual("true");
 
                 // Hover over the toggle to make it show the tooltip
-                fireEvent.mouseOver(toggle);
-
-                const tooltip = rendered.getByRole("tooltip");
-                expect(tooltip).toHaveTextContent(
-                    "Once enabled, Rust cryptography can only be disabled by logging out and in again",
-                );
+                await userEvent.hover(toggle);
+
+                await waitFor(() => {
+                    const tooltip = screen.getByRole("tooltip");
+                    expect(tooltip).toHaveTextContent(
+                        "Once enabled, Rust cryptography can only be disabled by logging out and in again",
+                    );
+                });
             });
         });
 
@@ -150,12 +153,14 @@ describe("<LabsUserSettingsTab />", () => {
                 expect(toggle.getAttribute("aria-checked")).toEqual("true");
 
                 // Hover over the toggle to make it show the tooltip
-                fireEvent.mouseOver(toggle);
-
-                const tooltip = rendered.getByRole("tooltip");
-                expect(tooltip).toHaveTextContent(
-                    "Rust cryptography cannot be disabled on this deployment of BrandedClient",
-                );
+                await userEvent.hover(toggle);
+
+                await waitFor(() => {
+                    const tooltip = rendered.getByRole("tooltip");
+                    expect(tooltip).toHaveTextContent(
+                        "Rust cryptography cannot be disabled on this deployment of BrandedClient",
+                    );
+                });
             });
         });
     });

test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -289,6 +289,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Send read receipts"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
+                  data-state="closed"
                   id="mx_SettingsFlag_GQvdMWe954DV"
                   role="switch"
                   tabindex="0"