Make the text copy button use IconButton (#34224)

* Make the text copy button use IconButton

This obviously should be a shared component, but design is looking at
what it will actually look like long term, so until then, let's at
least make it use compound's IconButton so it gets the hover background
state, and sort out the padding & margins.

Requires https://github.com/element-hq/compound-web/pull/528

* snapshots & add aria-label

* more snapshots

* Remove unnecessary width & height

update other screenshots with expected changes

* One more screenshot

* This really shouldn't be necessary: see what test fails

* Fix test to look in screen for the labels

Because the labels from the tooltip don't go in the container, they
get added to the dom at the top level in a floaty bit.

* update snapshots again

* Fix button size

and also add comment to the other place where we fudge the padding

* Update snapshots

* Align to center

* Screenshots

apps/web/src/components/views/elements/CopyableText.tsx

@@ -10,10 +10,10 @@ Please see LICENSE files in the repository root for full details.
 import React, { useState } from "react";
 import classNames from "classnames";
 import { CopyIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { IconButton } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
-import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
 
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
@@ -29,7 +29,7 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
 }) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
-    const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
+    const onCopyClickInternal = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
         e.preventDefault();
         const text = getTextToCopy();
         const successful = !!text && (await copyPlaintext(text));
@@ -43,17 +43,18 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
     };
 
     return (
-        <AccessibleButton
-            element="button"
-            title={tooltip ?? _t("action|copy")}
+        <IconButton
+            tooltip={tooltip ?? _t("action|copy")}
             onClick={onCopyClickInternal}
             className={className}
-            onTooltipOpenChange={(open) => {
+            size="28px"
+            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
+            onTooltipOpenChange={(open: boolean) => {
                 if (!open) onHideTooltip();
             }}
         >
             {children}
-        </AccessibleButton>
+        </IconButton>
     );
 };