Update compound to 8.3.5 (#31736)

* chore: update compound to `8.3.5` * refactor: remove incorrect color in shared components * test: update shared components snapshots * test: update shared component screenshots * test: update EW snapshots * test: update EW screenshots * test: update snapshot
2026-05-04 19:56:45 +02:00 · 2026-01-16 15:30:08 +01:00 · 2026-01-16 15:30:08 +01:00 · b9638695b7
commit b9638695b7
parent e2dad68169
41 changed files with 134 additions and 132 deletions
--- a/package.json
+++ b/package.json
@ -93,7 +93,7 @@
        "@sentry/browser": "^10.0.0",
        "@types/png-chunks-extract": "^1.0.2",
        "@vector-im/compound-design-tokens": "6.8.0",
-        "@vector-im/compound-web": "^8.3.4",
+        "@vector-im/compound-web": "^8.3.5",
        "@vector-im/matrix-wysiwyg": "2.40.0",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@ -96,6 +96,6 @@
    },
    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
    "peerDependencies": {
-        "@vector-im/compound-web": "^8.3.4"
+        "@vector-im/compound-web": "^8.3.5"
    }
 }
--- a/packages/shared-components/playwright/snapshots/audio-audioplayerview--default-linux.png
+++ b/packages/shared-components/playwright/snapshots/audio-audioplayerview--default-linux.png
--- a/packages/shared-components/playwright/snapshots/audio-audioplayerview--has-error-linux.png
+++ b/packages/shared-components/playwright/snapshots/audio-audioplayerview--has-error-linux.png
--- a/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-media-name-linux.png
+++ b/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-media-name-linux.png
--- a/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-size-linux.png
+++ b/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-size-linux.png
--- a/packages/shared-components/playwright/snapshots/audio-playpausebutton--default-linux.png
+++ b/packages/shared-components/playwright/snapshots/audio-playpausebutton--default-linux.png
--- a/packages/shared-components/playwright/snapshots/audio-playpausebutton--playing-linux.png
+++ b/packages/shared-components/playwright/snapshots/audio-playpausebutton--playing-linux.png
--- a/packages/shared-components/playwright/snapshots/pillinput-pill--default-linux.png
+++ b/packages/shared-components/playwright/snapshots/pillinput-pill--default-linux.png
--- a/packages/shared-components/src/audio/AudioPlayerView/snapshots/AudioPlayerView.test.tsx.snap
+++ b/packages/shared-components/src/audio/AudioPlayerView/snapshots/AudioPlayerView.test.tsx.snap
@ -16,7 +16,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
        aria-disabled="false"
        aria-label="Play"
        aria-labelledby="_r_0_"
-        class="_icon-button_1pz9o_8 button"
+        class="_icon-button_1215g_8 button"
        data-kind="primary"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -107,7 +107,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
        aria-disabled="false"
        aria-label="Play"
        aria-labelledby="_r_i_"
-        class="_icon-button_1pz9o_8 button"
+        class="_icon-button_1215g_8 button"
        data-kind="primary"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -203,7 +203,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
        aria-disabled="false"
        aria-label="Play"
        aria-labelledby="_r_6_"
-        class="_icon-button_1pz9o_8 button"
+        class="_icon-button_1215g_8 button"
        data-kind="primary"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -294,7 +294,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
        aria-disabled="false"
        aria-label="Play"
        aria-labelledby="_r_c_"
-        class="_icon-button_1pz9o_8 button"
+        class="_icon-button_1215g_8 button"
        data-kind="primary"
        role="button"
        style="--cpd-icon-button-size: 32px;"
--- a/packages/shared-components/src/audio/PlayPauseButton/snapshots/PlayPauseButton.test.tsx.snap
+++ b/packages/shared-components/src/audio/PlayPauseButton/snapshots/PlayPauseButton.test.tsx.snap
@ -6,7 +6,7 @@ exports[`PlayPauseButton renders the button in default state 1`] = `
    aria-disabled="false"
    aria-label="Play"
    aria-labelledby="_r_0_"
-    class="_icon-button_1pz9o_8 button"
+    class="_icon-button_1215g_8 button"
    data-kind="primary"
    role="button"
    style="--cpd-icon-button-size: 32px;"
@ -38,7 +38,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
    aria-disabled="false"
    aria-label="Pause"
    aria-labelledby="_r_6_"
-    class="_icon-button_1pz9o_8 button"
+    class="_icon-button_1215g_8 button"
    data-kind="primary"
    role="button"
    style="--cpd-icon-button-size: 32px;"
--- a/packages/shared-components/src/pill-input/Pill/Pill.tsx
+++ b/packages/shared-components/src/pill-input/Pill/Pill.tsx
@ -61,7 +61,7 @@ export function Pill({ className, children, label, onClick, ...props }: PropsWit
                    aria-label={_t("action|delete")}
                    className="mx_Dialog_nonDialogButton"
                >
-                    <CloseIcon color="var(--cpd-color-icon-tertiary)" />
+                    <CloseIcon />
                </IconButton>
            )}
        </Flex>
--- a/packages/shared-components/src/pill-input/Pill/snapshots/Pill.test.tsx.snap
+++ b/packages/shared-components/src/pill-input/Pill/snapshots/Pill.test.tsx.snap
@ -18,7 +18,7 @@ exports[`Pill renders the pill 1`] = `
    <button
      aria-describedby="_r_0_"
      aria-label="Delete"
-      class="_icon-button_1pz9o_8 mx_Dialog_nonDialogButton"
+      class="_icon-button_1215g_8 mx_Dialog_nonDialogButton"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 16px;"
@ -29,7 +29,6 @@ exports[`Pill renders the pill 1`] = `
        style="--cpd-icon-button-size: 100%;"
      >
        <svg
-          color="var(--cpd-color-icon-tertiary)"
          fill="currentColor"
          height="1em"
          viewBox="0 0 24 24"
--- a/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png
+++ b/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png
--- a/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png
+++ b/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png
--- a/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png
+++ b/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png
--- a/test/unit-tests/components/structures/snapshots/FilePanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/FilePanel-test.tsx.snap
@ -20,7 +20,7 @@ exports[`FilePanel renders empty state 1`] = `
      </div>
      <button
        aria-labelledby="_r_0_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
@ -1140,7 +1140,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
          <button
            aria-disabled="false"
            aria-label="Video call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1167,7 +1167,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
          <button
            aria-disabled="false"
            aria-label="Voice call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1194,7 +1194,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
          <button
            aria-label="Threads"
            aria-labelledby="_r_a_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1221,7 +1221,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
          <button
            aria-label="Room info"
            aria-labelledby="_r_f_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1679,7 +1679,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
          <button
            aria-disabled="false"
            aria-label="Video call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1706,7 +1706,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
          <button
            aria-disabled="false"
            aria-label="Voice call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1733,7 +1733,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
          <button
            aria-label="Threads"
            aria-labelledby="_r_5o_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1760,7 +1760,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
          <button
            aria-label="Room info"
            aria-labelledby="_r_5t_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2154,7 +2154,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
          <button
            aria-disabled="false"
            aria-label="Video call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2181,7 +2181,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
          <button
            aria-disabled="false"
            aria-label="Voice call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2208,7 +2208,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
          <button
            aria-label="Threads"
            aria-labelledby="_r_2q_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2235,7 +2235,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
          <button
            aria-label="Room info"
            aria-labelledby="_r_2v_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2629,7 +2629,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-disabled="false"
            aria-label="Video call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2656,7 +2656,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-disabled="false"
            aria-label="Voice call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2683,7 +2683,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-label="Threads"
            aria-labelledby="_r_fm_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2710,7 +2710,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-label="Room info"
            aria-labelledby="_r_fr_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2843,7 +2843,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-disabled="false"
            aria-label="Video call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2870,7 +2870,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-disabled="false"
            aria-label="Voice call"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2897,7 +2897,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-label="Threads"
            aria-labelledby="_r_fm_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2924,7 +2924,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
          <button
            aria-label="Room info"
            aria-labelledby="_r_fr_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -3358,7 +3358,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          <button
            aria-label="Chat"
            aria-labelledby="_r_kg_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -3385,7 +3385,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          <button
            aria-label="Threads"
            aria-labelledby="_r_kl_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -3412,7 +3412,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          <button
            aria-label="Room info"
            aria-labelledby="_r_kq_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -3527,7 +3527,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
              </div>
              <button
                aria-labelledby="_r_l8_"
-                class="_icon-button_1pz9o_8"
+                class="_icon-button_1215g_8"
                data-kind="secondary"
                data-testid="base-card-close-button"
                role="button"
--- a/test/unit-tests/components/structures/snapshots/ThreadPanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/ThreadPanel-test.tsx.snap
@ -7,7 +7,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
  >
    <button
      aria-labelledby="_r_0_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -57,7 +57,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
  >
    <button
      aria-labelledby="_r_6_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
--- a/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
@ -44,7 +44,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
        </div>
        <button
          aria-labelledby="_r_0_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="secondary"
          data-testid="base-card-close-button"
          role="button"
--- a/test/unit-tests/components/views/right_panel/snapshots/BaseCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/BaseCard-test.tsx.snap
@ -20,7 +20,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
      </div>
      <button
        aria-labelledby="_r_0_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/right_panel/snapshots/ExtensionsCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/ExtensionsCard-test.tsx.snap
@ -20,7 +20,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
      </div>
      <button
        aria-labelledby="_r_0_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -121,7 +121,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
      </div>
      <button
        aria-labelledby="_r_6_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/right_panel/snapshots/PinnedMessagesCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/PinnedMessagesCard-test.tsx.snap
@ -20,7 +20,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
      </div>
      <button
        aria-labelledby="_r_f_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -102,7 +102,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
      </div>
      <button
        aria-labelledby="_r_l_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -170,7 +170,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
-                class="_icon-button_1pz9o_8"
+                class="_icon-button_1215g_8"
                data-kind="primary"
                data-state="closed"
                id="radix-_r_11_"
@ -251,7 +251,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
-                class="_icon-button_1pz9o_8"
+                class="_icon-button_1215g_8"
                data-kind="primary"
                data-state="closed"
                id="radix-_r_19_"
@ -330,7 +330,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
      </div>
      <button
        aria-labelledby="_r_10f_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -398,7 +398,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
-                class="_icon-button_1pz9o_8"
+                class="_icon-button_1215g_8"
                data-kind="primary"
                data-state="closed"
                id="radix-_r_10r_"
@ -479,7 +479,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                aria-expanded="false"
                aria-haspopup="menu"
                aria-label="Open menu"
-                class="_icon-button_1pz9o_8"
+                class="_icon-button_1215g_8"
                data-kind="primary"
                data-state="closed"
                id="radix-_r_113_"
--- a/test/unit-tests/components/views/right_panel/snapshots/RoomSummaryCardView-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/RoomSummaryCardView-test.tsx.snap
@ -16,7 +16,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
      />
      <button
        aria-labelledby="_r_e_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -127,7 +127,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
              </span>
            </p>
            <button
-              class="_icon-button_1pz9o_8 mx_RoomSummaryCard_topic_chevron"
+              class="_icon-button_1215g_8 mx_RoomSummaryCard_topic_chevron"
              data-kind="primary"
              role="button"
              style="--cpd-icon-button-size: 24px;"
@ -180,7 +180,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
        aria-orientation="vertical"
        role="menubar"
      >
-        <div
+        <button
          aria-checked="false"
          class="_item_lqfwq_8 _interactive_lqfwq_26"
          data-kind="primary"
@ -212,13 +212,14 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
              class="_input_udcm8_24"
              id="_r_j_"
              role="switch"
+              tabindex="-1"
              type="checkbox"
            />
            <div
              class="_ui_udcm8_34"
            />
          </div>
-        </div>
+        </button>
        <button
          class="_item_lqfwq_8 _interactive_lqfwq_26"
          data-kind="primary"
@ -729,7 +730,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
      />
      <button
        aria-labelledby="_r_0_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -855,7 +856,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
        aria-orientation="vertical"
        role="menubar"
      >
-        <div
+        <button
          aria-checked="false"
          class="_item_lqfwq_8 _interactive_lqfwq_26"
          data-kind="primary"
@ -887,13 +888,14 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
              class="_input_udcm8_24"
              id="_r_5_"
              role="switch"
+              tabindex="-1"
              type="checkbox"
            />
            <div
              class="_ui_udcm8_34"
            />
          </div>
-        </div>
+        </button>
        <button
          class="_item_lqfwq_8 _interactive_lqfwq_26"
          data-kind="primary"
@ -1404,7 +1406,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
      />
      <button
        aria-labelledby="_r_7_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -1515,7 +1517,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
              </span>
            </p>
            <button
-              class="_icon-button_1pz9o_8 mx_RoomSummaryCard_topic_chevron"
+              class="_icon-button_1215g_8 mx_RoomSummaryCard_topic_chevron"
              data-kind="primary"
              role="button"
              style="--cpd-icon-button-size: 24px;"
@ -1568,7 +1570,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
        aria-orientation="vertical"
        role="menubar"
      >
-        <div
+        <button
          aria-checked="false"
          class="_item_lqfwq_8 _interactive_lqfwq_26"
          data-kind="primary"
@ -1600,13 +1602,14 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
              class="_input_udcm8_24"
              id="_r_c_"
              role="switch"
+              tabindex="-1"
              type="checkbox"
            />
            <div
              class="_ui_udcm8_34"
            />
          </div>
-        </div>
+        </button>
        <button
          class="_item_lqfwq_8 _interactive_lqfwq_26"
          data-kind="primary"
--- a/test/unit-tests/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/snapshots/UserInfo-test.tsx.snap
@ -20,7 +20,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
      </div>
      <button
        aria-labelledby="_r_7c_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -322,7 +322,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
      </div>
      <button
        aria-labelledby="_r_7m_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/rooms/RoomHeader/snapshots/RoomHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/snapshots/RoomHeader-test.tsx.snap
@ -45,7 +45,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
    <button
      aria-disabled="false"
      aria-label="Video call"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 32px;"
@ -72,7 +72,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
    <button
      aria-disabled="false"
      aria-label="Voice call"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 32px;"
@ -99,7 +99,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
    <button
      aria-label="Threads"
      aria-labelledby="_r_12m_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 32px;"
@ -126,7 +126,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
    <button
      aria-label="Room info"
      aria-labelledby="_r_12r_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 32px;"
--- a/test/unit-tests/components/views/rooms/RoomHeader/snapshots/VideoRoomChatButton-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/snapshots/VideoRoomChatButton-test.tsx.snap
@ -4,7 +4,7 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
 <button
  aria-label="Chat"
  aria-labelledby="_r_6_"
-  class="_icon-button_1pz9o_8"
+  class="_icon-button_1215g_8"
  data-indicator="default"
  data-kind="primary"
  role="button"
--- a/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomList-test.tsx.snap
@ -82,7 +82,7 @@ exports[`<RoomList /> should render a room list 1`] = `
            aria-haspopup="menu"
            aria-label="More Options"
            aria-labelledby="_r_2_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            data-state="closed"
            id="radix-_r_0_"
@ -114,7 +114,7 @@ exports[`<RoomList /> should render a room list 1`] = `
            aria-haspopup="menu"
            aria-label="Notification options"
            aria-labelledby="_r_9_"
-            class="_icon-button_1pz9o_8"
+            class="_icon-button_1215g_8"
            data-kind="primary"
            data-state="closed"
            id="radix-_r_7_"
@ -207,7 +207,7 @@ exports[`<RoomList /> should render a room list 1`] = `
        aria-haspopup="menu"
        aria-label="More Options"
        aria-labelledby="_r_g_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_e_"
@ -239,7 +239,7 @@ exports[`<RoomList /> should render a room list 1`] = `
        aria-haspopup="menu"
        aria-label="Notification options"
        aria-labelledby="_r_n_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_l_"
@ -331,7 +331,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_u_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_s_"
@ -363,7 +363,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_15_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_13_"
@ -454,7 +454,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_1c_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_1a_"
@ -486,7 +486,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_1j_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_1h_"
@ -577,7 +577,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_1q_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_1o_"
@ -609,7 +609,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_21_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_1v_"
@ -700,7 +700,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_28_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_26_"
@ -732,7 +732,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_2f_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_2d_"
@ -823,7 +823,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_2m_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_2k_"
@ -855,7 +855,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_2t_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_2r_"
@ -946,7 +946,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_34_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_32_"
@ -978,7 +978,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_3b_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_39_"
@ -1069,7 +1069,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_3i_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_3g_"
@ -1101,7 +1101,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_3p_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_3n_"
@ -1192,7 +1192,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_40_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_3u_"
@ -1224,7 +1224,7 @@ exports[`<RoomList /> should render a room list 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_47_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_45_"
--- a/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListHeaderView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListHeaderView-test.tsx.snap
@ -22,7 +22,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
        aria-expanded="false"
        aria-haspopup="menu"
        aria-label="Open space menu"
-        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        class="_icon-button_1215g_8 mx_SpaceMenu_button"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_i_"
@ -63,7 +63,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
          aria-haspopup="menu"
          aria-label="Room Options"
          aria-labelledby="_r_m_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_k_"
@ -99,7 +99,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
          aria-expanded="false"
          aria-haspopup="menu"
          aria-labelledby="_r_t_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_r_"
@ -160,7 +160,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
        aria-expanded="false"
        aria-haspopup="menu"
        aria-label="Open space menu"
-        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        class="_icon-button_1215g_8 mx_SpaceMenu_button"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_14_"
@ -201,7 +201,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
          aria-haspopup="menu"
          aria-label="Room Options"
          aria-labelledby="_r_18_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_16_"
@ -234,7 +234,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
      >
        <button
          aria-labelledby="_r_1d_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          role="button"
          style="--cpd-icon-button-size: 32px;"
@ -292,7 +292,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
        aria-expanded="false"
        aria-haspopup="menu"
        aria-label="Open space menu"
-        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        class="_icon-button_1215g_8 mx_SpaceMenu_button"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_0_"
@ -333,7 +333,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
          aria-haspopup="menu"
          aria-label="Room Options"
          aria-labelledby="_r_4_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_2_"
@ -369,7 +369,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
          aria-expanded="false"
          aria-haspopup="menu"
          aria-labelledby="_r_b_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_9_"
@ -430,7 +430,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
        aria-expanded="false"
        aria-haspopup="menu"
        aria-label="Open space menu"
-        class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
+        class="_icon-button_1215g_8 mx_SpaceMenu_button"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_36_"
@ -471,7 +471,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
          aria-haspopup="menu"
          aria-label="Room Options"
          aria-labelledby="_r_3a_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_38_"
@ -507,7 +507,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
          aria-expanded="false"
          aria-haspopup="menu"
          aria-labelledby="_r_3h_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_3f_"
@ -577,7 +577,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
          aria-haspopup="menu"
          aria-label="Room Options"
          aria-labelledby="_r_3q_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_3o_"
@ -613,7 +613,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
          aria-expanded="false"
          aria-haspopup="menu"
          aria-labelledby="_r_41_"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_3v_"
--- a/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListItemMenuView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListItemMenuView-test.tsx.snap
@ -12,7 +12,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_2_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_0_"
@ -44,7 +44,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_9_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_7_"
@ -89,7 +89,7 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
      aria-haspopup="menu"
      aria-label="More Options"
      aria-labelledby="_r_i_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_g_"
@ -121,7 +121,7 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
      aria-haspopup="menu"
      aria-label="Notification options"
      aria-labelledby="_r_p_"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="primary"
      data-state="closed"
      id="radix-_r_n_"
--- a/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListOptionsMenu-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/snapshots/RoomListOptionsMenu-test.tsx.snap
@ -8,7 +8,7 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
    aria-haspopup="menu"
    aria-label="Room Options"
    aria-labelledby="_r_2_"
-    class="_icon-button_1pz9o_8"
+    class="_icon-button_1215g_8"
    data-kind="primary"
    data-state="closed"
    id="radix-_r_0_"
--- a/test/unit-tests/components/views/rooms/snapshots/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/PinnedEventTile-test.tsx.snap
@ -36,7 +36,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
          aria-expanded="false"
          aria-haspopup="menu"
          aria-label="Open menu"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_6_"
@ -115,7 +115,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
          aria-expanded="false"
          aria-haspopup="menu"
          aria-label="Open menu"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="primary"
          data-state="closed"
          id="radix-_r_f_"
--- a/test/unit-tests/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/ThirdPartyMemberInfo-test.tsx.snap
@ -20,7 +20,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
      </div>
      <button
        aria-labelledby="_r_0_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
@ -95,7 +95,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
      </div>
      <button
        aria-labelledby="_r_6_"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="secondary"
        data-testid="base-card-close-button"
        role="button"
--- a/test/unit-tests/components/views/settings/snapshots/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/snapshots/ThemeChoicePanel-test.tsx.snap
@ -242,7 +242,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
            <button
              aria-label="Delete"
              aria-labelledby="_r_2f_"
-              class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
+              class="_icon-button_1215g_8 _destructive_1215g_95"
              data-kind="primary"
              role="button"
              style="--cpd-icon-button-size: 32px;"
@ -521,7 +521,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
            <button
              aria-label="Delete"
              aria-labelledby="_r_17_"
-              class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
+              class="_icon-button_1215g_8 _destructive_1215g_95"
              data-kind="primary"
              role="button"
              style="--cpd-icon-button-size: 32px;"
--- a/test/unit-tests/components/views/settings/encryption/snapshots/ChangeRecoveryKey-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/snapshots/ChangeRecoveryKey-test.tsx.snap
@ -7,7 +7,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -109,7 +109,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
      </div>
      <button
        aria-label="Copy"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="primary"
        role="button"
        style="--cpd-icon-button-size: 28px;"
@ -169,7 +169,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -328,7 +328,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -509,7 +509,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -626,7 +626,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -728,7 +728,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
      </div>
      <button
        aria-label="Copy"
-        class="_icon-button_1pz9o_8"
+        class="_icon-button_1215g_8"
        data-kind="primary"
        role="button"
        style="--cpd-icon-button-size: 28px;"
--- a/test/unit-tests/components/views/settings/encryption/snapshots/DeleteKeyStoragePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/snapshots/DeleteKeyStoragePanel-test.tsx.snap
@ -7,7 +7,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
--- a/test/unit-tests/components/views/settings/encryption/snapshots/ResetIdentityPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/snapshots/ResetIdentityPanel-test.tsx.snap
@ -7,7 +7,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -190,7 +190,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -373,7 +373,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
@ -559,7 +559,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
  >
    <button
      aria-label="Back"
-      class="_icon-button_1pz9o_8"
+      class="_icon-button_1215g_8"
      data-kind="secondary"
      role="button"
      style="--cpd-icon-button-size: 28px;"
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/EncryptionUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/EncryptionUserSettingsTab-test.tsx.snap
@ -236,7 +236,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
      >
        <button
          aria-label="Back"
-          class="_icon-button_1pz9o_8"
+          class="_icon-button_1215g_8"
          data-kind="secondary"
          role="button"
          style="--cpd-icon-button-size: 28px;"
--- a/test/unit-tests/components/views/spaces/snapshots/QuickSettingsButton-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/snapshots/QuickSettingsButton-test.tsx.snap
@ -5,7 +5,7 @@ exports[`QuickSettingsButton should render the quick settings button in expanded
  <button
    aria-expanded="true"
    aria-label="Quick settings"
-    class="_icon-button_1pz9o_8 mx_QuickSettingsButton expanded"
+    class="_icon-button_1215g_8 mx_QuickSettingsButton expanded"
    data-kind="primary"
    role="button"
    style="--cpd-icon-button-size: 32px;"
--- a/test/unit-tests/components/views/spaces/snapshots/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/snapshots/SpacePanel-test.tsx.snap
@ -333,7 +333,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
        aria-haspopup="menu"
        aria-label="Threads"
        aria-labelledby="_r_12_"
-        class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
+        class="_icon-button_1215g_8 mx_ThreadsActivityCentreButton"
        data-kind="primary"
        data-state="closed"
        id="radix-_r_10_"
@ -365,7 +365,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
      aria-expanded="false"
      aria-label="Quick settings"
      aria-labelledby="_r_17_"
-      class="_icon-button_1pz9o_8 mx_QuickSettingsButton"
+      class="_icon-button_1215g_8 mx_QuickSettingsButton"
      data-kind="primary"
      role="button"
      style="--cpd-icon-button-size: 32px;"
--- a/yarn.lock
+++ b/yarn.lock
@ -4170,10 +4170,10 @@
  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.5.0.tgz#2ceb3cd5a8680f579bd7c303c94c7e93fde2c507"
  integrity sha512-93PD61x8lkU4Hh1DUBV8EHaP1WOZtAJV+/EPbWQCN3wWU1tiruHi3ChhT5xfxeJaipPb6xzLdyt1EyRH0N7Vzg==

-"@vector-im/compound-web@^8.3.4":
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.4.tgz#842bfcae9ed11e19656cd4bb90d40fed64dbc2c4"
-  integrity sha512-um+rCfnkEyOEIF8qpsLvvxi/jRQXjhul+mXDCsZHBEfashj08zf5euEQxesleAIuDvNXtIWyxDJpwzxIm21YEg==
+"@vector-im/compound-web@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.5.tgz#bb6d712868915899978128c2081b7b09389a1570"
+  integrity sha512-MbqnZMSwu3y8Z7b529Hf8t790adbcjQiq6X+PrX8emvRDsQsSa/S5Na1udStseCuLp3nAfqrgnospIgselbpvA==
  dependencies:
    "@floating-ui/react" "^0.27.0"
    "@radix-ui/react-context-menu" "^2.2.16"