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/res/css/views/elements/_CopyableText.pcss

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_CopyableText {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     justify-content: space-between;
     width: max-content;
@@ -20,27 +20,17 @@ Please see LICENSE files in the repository root for full details.
         border: solid 1px $light-fg-color;
         margin-bottom: 10px;
         margin-top: 10px;
-        padding: 10px 0 10px 10px;
+        padding: 10px;
     }
 
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
-        /* using em here to adapt to the local font size */
-        width: 1em;
-        height: 1em;
-        padding-left: 12px;
-        padding-right: 10px;
         display: block;
         /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
         position: sticky;
-        right: 0;
+        margin-left: var(--cpd-space-1x);
-        /* center to first line */
-        top: 0.15em;
-        background-color: $background;
 
         svg {
-            width: 1em;
-            height: 1em;
             color: $message-action-bar-fg-color;
             display: block;
         }

apps/web/res/css/views/right_panel/_UserInfo.pcss

@@ -126,19 +126,10 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_CopyableText_copyButton {
-            width: 28px;
-            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
             position: unset;
-            padding-left: var(--cpd-space-2x);
-        }
-
-        .mx_CopyableText_copyButton::before {
-            width: 20px;
-            height: 20px;
-            background-color: var(--cpd-color-icon-secondary-alpha);
         }
     }
 

apps/web/res/css/views/rooms/_EventTile.pcss

@@ -869,8 +869,6 @@ $left-gutter: 64px;
             position: absolute;
             top: $spacing-8;
             right: $spacing-8;
-            width: 16px;
-            height: 16px;
             visibility: hidden;
 
             &.mx_EventTile_buttonBottom {

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
+        <IconButton
-            element="button"
+            tooltip={tooltip ?? _t("action|copy")}
-            title={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>
     );
 };
 

apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -58,10 +58,16 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >
             <button
-              aria-label="Copy"
+              aria-labelledby="react-use-id-2"
-              class="mx_AccessibleButton mx_CopyableText_copyButton"
+              class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+              data-kind="primary"
               role="button"
+              style="--cpd-icon-button-size: 28px; padding: 4px;"
               tabindex="0"
+            >
+              <div
+                class="_indicator-icon_147l5_17"
+                style="--cpd-icon-button-size: 100%;"
               >
                 <svg
                   fill="currentColor"
@@ -77,6 +83,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
                     d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                   />
                 </svg>
+              </div>
             </button>
           </span>
         </div>

apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -98,10 +98,16 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >
                 <button
-                  aria-label="Copy"
+                  aria-labelledby="react-use-id-2"
-                  class="mx_AccessibleButton mx_CopyableText_copyButton"
+                  class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 28px; padding: 4px;"
                   tabindex="0"
+                >
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
                     <svg
                       fill="currentColor"
@@ -117,6 +123,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                         d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                       />
                     </svg>
+                  </div>
                 </button>
               </span>
             </div>

apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap

@@ -29,10 +29,16 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >
     <button
-      aria-label="Copy"
+      aria-labelledby="react-use-id-2"
-      class="mx_AccessibleButton mx_CopyableText_copyButton"
+      class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
         <svg
           fill="currentColor"
@@ -48,6 +54,7 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
             d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
           />
         </svg>
+      </div>
     </button>
   </span>
 </DocumentFragment>

apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { getByLabelText, getAllByLabelText, render } from "jest-matrix-react";
+import { render, screen } from "jest-matrix-react";
 import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import userEvent from "@testing-library/user-event";
 
@@ -49,11 +49,11 @@ describe("DevtoolsDialog", () => {
         const user = userEvent.setup();
         jest.spyOn(navigator.clipboard, "writeText");
 
-        const { container } = getComponent(room.roomId);
+        getComponent(room.roomId);
 
-        const copyBtn = getByLabelText(container, "Copy");
+        const copyBtn = screen.getByLabelText("Copy");
         await user.click(copyBtn);
-        const copiedBtn = getByLabelText(container, "Copied!");
+        const copiedBtn = screen.getByLabelText("Copied!");
 
         expect(copiedBtn).toBeInTheDocument();
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(room.roomId);
@@ -64,11 +64,11 @@ describe("DevtoolsDialog", () => {
         jest.spyOn(navigator.clipboard, "writeText");
 
         const threadRootId = "$test_event_id_goes_here";
-        const { container } = getComponent(room.roomId, threadRootId);
+        getComponent(room.roomId, threadRootId);
 
-        const copyBtn = getAllByLabelText(container, "Copy")[1];
+        const copyBtn = screen.getAllByLabelText("Copy")[1];
         await user.click(copyBtn);
-        const copiedBtn = getByLabelText(container, "Copied!");
+        const copiedBtn = screen.getByLabelText("Copied!");
 
         expect(copiedBtn).toBeInTheDocument();
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(threadRootId);

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -34,11 +34,16 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <button
-        aria-describedby="react-use-id-1"
+        aria-labelledby="react-use-id-1"
-        aria-label="Copy"
+        class="_icon-button_1215g_8 mx_CopyableText_copyButton"
-        class="mx_AccessibleButton mx_CopyableText_copyButton"
+        data-kind="primary"
         role="button"
+        style="--cpd-icon-button-size: 28px; padding: 4px;"
         tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
         >
           <svg
             fill="currentColor"
@@ -54,6 +59,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
               d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
             />
           </svg>
+        </div>
       </button>
     </span>
     <div

apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap

@@ -12,10 +12,16 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-1"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -31,6 +37,7 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -40,10 +47,16 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         >
           Device ID: SIGNED
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-2"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -59,6 +72,7 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -100,10 +114,16 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-3"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -119,6 +139,7 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -128,10 +149,16 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-4"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -147,6 +174,7 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -176,10 +204,16 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-1"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -195,6 +229,7 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -204,10 +239,16 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         >
           Device ID: UNSIGNED
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-2"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -223,6 +264,7 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -264,10 +306,16 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-3"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -283,6 +331,7 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -292,10 +341,16 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-4"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -311,6 +366,7 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -340,10 +396,16 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-1"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -359,6 +421,7 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -368,10 +431,16 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         >
           Device ID: VERIFIED
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-2"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -387,6 +456,7 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -430,10 +500,16 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-3"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -449,6 +525,7 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -458,10 +535,16 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-4"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -477,6 +560,7 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -506,10 +590,16 @@ exports[`<Users /> should render a single user 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-1"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -525,6 +615,7 @@ exports[`<Users /> should render a single user 1`] = `
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </li>

apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -60,10 +60,16 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
       </div>
     </pre>
     <button
-      aria-label="Copy"
+      aria-labelledby="react-use-id-1"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
         <svg
           fill="currentColor"
@@ -79,6 +85,7 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
             d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
           />
         </svg>
+      </div>
     </button>
   </div>
   
@@ -279,10 +286,16 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
       </div>
     </pre>
     <button
-      aria-label="Copy"
+      aria-labelledby="react-use-id-1"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
         <svg
           fill="currentColor"
@@ -298,6 +311,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
             d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
           />
         </svg>
+      </div>
     </button>
   </div>
   
@@ -486,10 +500,16 @@ num_sqrt = num **
       </svg>
     </button>
     <button
-      aria-label="Copy"
+      aria-labelledby="react-use-id-1"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
+    >
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
         <svg
           fill="currentColor"
@@ -505,6 +525,7 @@ num_sqrt = num **
             d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
           />
         </svg>
+      </div>
     </button>
   </div>
   

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -105,10 +105,16 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             >
               customUserIdentifier
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-2"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -124,6 +130,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </p>
@@ -408,10 +415,16 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             >
               customUserIdentifier
               <button
-                aria-label="Copy"
+                aria-labelledby="react-use-id-2"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
+              >
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
                     fill="currentColor"
@@ -427,6 +440,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
                       d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                     />
                   </svg>
+                </div>
               </button>
             </span>
           </p>

apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap

@@ -53,10 +53,16 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
         >
           customUserIdentifier
           <button
-            aria-label="Copy"
+            aria-labelledby="react-use-id-1"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
               <svg
                 fill="currentColor"
@@ -72,6 +78,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
                   d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                 />
               </svg>
+            </div>
           </button>
         </span>
       </p>

apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap

@@ -43,10 +43,16 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                 >
                   !room:example.com
                   <button
-                    aria-label="Copy"
+                    aria-labelledby="react-use-id-1"
-                    class="mx_AccessibleButton mx_CopyableText_copyButton"
+                    class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                    data-kind="primary"
                     role="button"
+                    style="--cpd-icon-button-size: 28px; padding: 4px;"
                     tabindex="0"
+                  >
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
                     >
                       <svg
                         fill="currentColor"
@@ -62,6 +68,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                           d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
                         />
                       </svg>
+                    </div>
                   </button>
                 </span>
               </div>

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap

@@ -42,14 +42,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
       >
         <input
           autocomplete="email"
-          id="mx_Field_3"
+          id="mx_Field_11"
           label="Email Address"
           placeholder="Email Address"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_3"
+          for="mx_Field_11"
         >
           Email Address
         </label>
@@ -154,14 +154,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
         </span>
         <input
           autocomplete="tel-national"
-          id="mx_Field_4"
+          id="mx_Field_12"
           label="Phone Number"
           placeholder="Phone Number"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_4"
+          for="mx_Field_12"
         >
           Phone Number
         </label>

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx

@@ -191,7 +191,7 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                     {canOnlyStartChat ? (
                         <IconButton
                             size="28px"
-                            style={{ padding: "4px" }}
+                            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
                             onClick={(e) => vm.createChatRoom(e.nativeEvent)}
                             tooltip={_t("action|start_chat")}
                         >