From 949d0dc8a9943c0f0f9aa3fb55348a9c3258a028 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 15 Oct 2025 10:44:06 +0000
Subject: [PATCH 1/5] Update eslint-plugins (#31033)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json |  4 ++--
 yarn.lock    | 36 +++++++++++++++++++++++-------------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 4b5eb021f0..1b6e22ef48 100644
--- a/package.json
+++ b/package.json
@@ -242,12 +242,12 @@
         "eslint-config-prettier": "^10.0.0",
         "eslint-plugin-deprecate": "0.8.7",
         "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-jest": "^28.0.0",
+        "eslint-plugin-jest": "^29.0.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-matrix-org": "^3.0.0",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
-        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
         "eslint-plugin-unicorn": "^56.0.0",
         "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index 4c0d254df2..3e7a41a306 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3948,7 +3948,7 @@
     semver "^7.6.0"
     ts-api-utils "^2.1.0"
 
-"@typescript-eslint/utils@8.46.1", "@typescript-eslint/utils@^6.0.0 || ^7.0.0 || ^8.0.0":
+"@typescript-eslint/utils@8.46.1", "@typescript-eslint/utils@^8.0.0":
   version "8.46.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.46.1.tgz#c572184d9227d66b10a954b90249a20c48b22452"
   integrity sha512-vkYUy6LdZS7q1v/Gxb2Zs7zziuXN0wxqsetJdeZdRe/f5dwJFglmuvZBfTUivCtjH725C1jWCDfpadadD95EDQ==
@@ -3991,9 +3991,8 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
-  uid ""
 
 "@vector-im/matrix-wysiwyg@2.40.0":
   version "2.40.0"
@@ -6706,12 +6705,12 @@ eslint-plugin-import@^2.25.4:
     string.prototype.trimend "^1.0.9"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-jest@^28.0.0:
-  version "28.14.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-28.14.0.tgz#02da77dc27d7b4c5480df3552ea26de056857b36"
-  integrity sha512-P9s/qXSMTpRTerE2FQ0qJet2gKbcGyFTPAJipoKxmWqR6uuFqIqk8FuEfg5yBieOezVrEfAMZrEwJ6yEp+1MFQ==
+eslint-plugin-jest@^29.0.0:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-29.0.1.tgz#0f72a81349409d20742208260c9a6cb9efed4df5"
+  integrity sha512-EE44T0OSMCeXhDrrdsbKAhprobKkPtJTbQz5yEktysNpHeDZTAL1SfDTNKmcFfJkY6yrQLtTKZALrD3j/Gpmiw==
   dependencies:
-    "@typescript-eslint/utils" "^6.0.0 || ^7.0.0 || ^8.0.0"
+    "@typescript-eslint/utils" "^8.0.0"
 
 eslint-plugin-jsx-a11y@^6.5.1:
   version "6.10.2"
@@ -6751,10 +6750,16 @@ eslint-plugin-react-compiler@^19.0.0-beta-df7b47d-20241124:
     zod "^3.22.4"
     zod-validation-error "^3.0.3"
 
-eslint-plugin-react-hooks@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz#1be0080901e6ac31ce7971beed3d3ec0a423d9e3"
-  integrity sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==
+eslint-plugin-react-hooks@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.0.tgz#a255a1db826ea42b0e37f160430e4bd0b4b659f9"
+  integrity sha512-fNXaOwvKwq2+pXiRpXc825Vd63+KM4DLL40Rtlycb8m7fYpp6efrTp1sa6ZbP/Ap58K2bEKFXRmhURE+CJAQWw==
+  dependencies:
+    "@babel/core" "^7.24.4"
+    "@babel/parser" "^7.24.4"
+    hermes-parser "^0.25.1"
+    zod "^3.22.4 || ^4.0.0"
+    zod-validation-error "^3.0.3 || ^4.0.0"
 
 eslint-plugin-react@^7.28.0:
   version "7.37.5"
@@ -14123,12 +14128,17 @@ zod-validation-error@^3.0.3:
   resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.5.3.tgz#85ba33290200d8db9f043621e284f40dddefb7e5"
   integrity sha512-OT5Y8lbUadqVZCsnyFaTQ4/O2mys4tj7PqhdbBCp7McPwvIEKfPtdA6QfPeFQK2/Rz5LgwmAXRJTugBNBi0btw==
 
+"zod-validation-error@^3.0.3 || ^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-4.0.2.tgz#bc605eba49ce0fcd598c127fee1c236be3f22918"
+  integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==
+
 zod@^3.22.4:
   version "3.25.76"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.25.76.tgz#26841c3f6fd22a6a2760e7ccb719179768471e34"
   integrity sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==
 
-zod@^4.1.11:
+"zod@^3.22.4 || ^4.0.0", zod@^4.1.11:
   version "4.1.12"
   resolved "https://registry.yarnpkg.com/zod/-/zod-4.1.12.tgz#64f1ea53d00eab91853195653b5af9eee68970f0"
   integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==

From ac96ab0d460d2d4c666b5c5f3b90e3ecfed2dd1f Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 15 Oct 2025 11:20:34 +0000
Subject: [PATCH 2/5] Update react monorepo (#31014)

* Update react monorepo

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update shared-components snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
---
 package.json                                  | 10 +--
 .../AudioPlayerView.test.tsx.snap             |  8 +-
 .../PlayPauseButton.test.tsx.snap             |  4 +-
 .../Pill/__snapshots__/Pill.test.tsx.snap     |  6 +-
 .../__snapshots__/RichList.test.tsx.snap      |  6 +-
 .../__snapshots__/FilePanel-test.tsx.snap     |  2 +-
 .../__snapshots__/RoomView-test.tsx.snap      | 60 +++++++--------
 .../SpaceHierarchy-test.tsx.snap              | 34 ++++-----
 .../__snapshots__/ThreadPanel-test.tsx.snap   |  6 +-
 .../DecoratedRoomAvatar-test.tsx.snap         |  4 +-
 .../RoomAvatarView-test.tsx.snap              | 14 ++--
 .../WithPresenceIndicator-test.tsx.snap       |  6 +-
 .../BeaconListItem-test.tsx.snap              |  2 +-
 .../__snapshots__/DialogSidebar-test.tsx.snap |  2 +-
 .../ShareLatestLocation-test.tsx.snap         |  2 +-
 .../ConfirmRejectInviteDialog-test.tsx.snap   | 16 ++--
 .../CreateRoomDialog-test.tsx.snap            | 14 ++--
 .../DevtoolsDialog-test.tsx.snap              |  6 +-
 .../__snapshots__/LogoutDialog-test.tsx.snap  |  4 +-
 ...nageRestrictedJoinRuleDialog-test.tsx.snap |  4 +-
 .../MessageEditHistoryDialog-test.tsx.snap    |  4 +-
 .../ReportRoomDialog-test.tsx.snap            |  6 +-
 .../ServerPickerDialog-test.tsx.snap          |  2 +-
 .../VerificationRequestDialog-test.tsx.snap   |  2 +-
 .../RestoreKeyBackupDialog-test.tsx.snap      |  6 +-
 .../__snapshots__/AppTile-test.tsx.snap       |  8 +-
 .../__snapshots__/FacePile-test.tsx.snap      |  2 +-
 .../__snapshots__/ImageView-test.tsx.snap     |  2 +-
 .../__snapshots__/InfoTooltip-test.tsx.snap   |  2 +-
 .../LabelledCheckbox-test.tsx.snap            |  4 +-
 .../__snapshots__/RoomFacePile-test.tsx.snap  |  4 +-
 .../SettingsDropdown-test.tsx.snap            |  8 +-
 .../__snapshots__/SettingsField-test.tsx.snap |  4 +-
 .../LocationShareMenu-test.tsx.snap           |  6 +-
 .../LocationViewDialog-test.tsx.snap          |  2 +-
 .../__snapshots__/MLocationBody-test.tsx.snap |  4 +-
 .../__snapshots__/PollHistory-test.tsx.snap   |  6 +-
 .../__snapshots__/PollListItem-test.tsx.snap  |  2 +-
 .../PollListItemEnded-test.tsx.snap           |  2 +-
 .../__snapshots__/BaseCard-test.tsx.snap      |  2 +-
 .../ExtensionsCard-test.tsx.snap              |  4 +-
 .../PinnedMessagesCard-test.tsx.snap          | 40 +++++-----
 .../RoomSummaryCardView-test.tsx.snap         | 14 ++--
 .../__snapshots__/UserInfo-test.tsx.snap      |  4 +-
 .../__snapshots__/RoomHeader-test.tsx.snap    | 10 +--
 .../VideoRoomChatButton-test.tsx.snap         |  2 +-
 .../RoomListHeaderView-test.tsx.snap          | 36 ++++-----
 .../RoomListItemMenuView-test.tsx.snap        | 16 ++--
 .../RoomListOptionsMenu-test.tsx.snap         |  4 +-
 .../RoomListPrimaryFilters-test.tsx.snap      |  2 +-
 .../PinnedEventTile-test.tsx.snap             | 24 +++---
 .../PinnedMessageBanner-test.tsx.snap         | 38 +++++-----
 .../ReadReceiptGroup-test.tsx.snap            |  8 +-
 .../ThirdPartyMemberInfo-test.tsx.snap        |  4 +-
 .../MemberTileView-test.tsx.snap              |  4 +-
 .../LayoutSwitcher-test.tsx.snap              | 20 ++---
 .../__snapshots__/Notifications-test.tsx.snap | 10 +--
 .../__snapshots__/SetIdServer-test.tsx.snap   |  4 +-
 .../ThemeChoicePanel-test.tsx.snap            | 76 +++++++++----------
 .../FilteredDeviceListHeader-test.tsx.snap    |  4 +-
 .../__snapshots__/AdvancedPanel-test.tsx.snap |  8 +-
 .../ChangeRecoveryKey-test.tsx.snap           | 24 +++---
 .../Notifications2-test.tsx.snap              | 42 +++++-----
 .../AppearanceUserSettingsTab-test.tsx.snap   | 32 ++++----
 .../PreferencesUserSettingsTab-test.tsx.snap  | 12 +--
 .../SecurityUserSettingsTab-test.tsx.snap     |  4 +-
 .../SessionManagerTab-test.tsx.snap           |  4 +-
 .../SidebarUserSettingsTab-test.tsx.snap      | 32 ++++----
 .../__snapshots__/SpacePanel-test.tsx.snap    | 10 +--
 .../SpaceSettingsVisibilityTab-test.tsx.snap  |  6 +-
 .../ThreadsActivityCentre-test.tsx.snap       | 18 ++---
 .../__snapshots__/link-tooltip-test.tsx.snap  |  2 +-
 yarn.lock                                     | 46 +++++------
 73 files changed, 426 insertions(+), 426 deletions(-)

diff --git a/package.json b/package.json
index 1b6e22ef48..4b5456f4ec 100644
--- a/package.json
+++ b/package.json
@@ -68,10 +68,10 @@
         "postinstall": "patch-package"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.1",
+        "**/pretty-format/react-is": "19.2.0",
         "@playwright/test": "1.56.0",
-        "@types/react": "19.1.14",
-        "@types/react-dom": "19.1.9",
+        "@types/react": "19.2.2",
+        "@types/react-dom": "19.2.1",
         "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
         "caniuse-lite": "1.0.30001750",
@@ -214,9 +214,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.14",
+        "@types/react": "19.2.2",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.9",
+        "@types/react-dom": "19.2.1",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.0",
         "@types/sdp-transform": "^2.4.10",
diff --git a/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap b/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
index 790ab16870..0687ea44a8 100644
--- a/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
+++ b/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
@@ -106,7 +106,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«ri»"
+        aria-labelledby="_r_i_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
@@ -202,7 +202,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«r6»"
+        aria-labelledby="_r_6_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
@@ -293,7 +293,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="«rc»"
+        aria-labelledby="_r_c_"
         class="_icon-button_1pz9o_8 button"
         data-kind="primary"
         role="button"
diff --git a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
index 3c60aeae11..503b5ac498 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
+++ b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`PlayPauseButton renders the button in default state 1`] = `
   <button
     aria-disabled="false"
     aria-label="Play"
-    aria-labelledby="«r0»"
+    aria-labelledby="_r_0_"
     class="_icon-button_1pz9o_8 button"
     data-kind="primary"
     role="button"
@@ -37,7 +37,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
   <button
     aria-disabled="false"
     aria-label="Pause"
-    aria-labelledby="«r6»"
+    aria-labelledby="_r_6_"
     class="_icon-button_1pz9o_8 button"
     data-kind="primary"
     role="button"
diff --git 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
index ce81390347..e467ec9ab7 100644
--- 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
@@ -11,12 +11,12 @@ exports[`Pill renders the pill 1`] = `
     />
     <span
       class="label"
-      id="«r0»"
+      id="_r_0_"
     >
       Pill
     </span>
     <button
-      aria-describedby="«r0»"
+      aria-describedby="_r_0_"
       aria-label="Delete"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
@@ -57,7 +57,7 @@ exports[`Pill renders the pill without close button 1`] = `
     />
     <span
       class="label"
-      id="«r1»"
+      id="_r_1_"
     >
       Pill
     </span>
diff --git a/packages/shared-components/src/rich-list/RichList/__snapshots__/RichList.test.tsx.snap b/packages/shared-components/src/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
index 818984a786..5569c63a9c 100644
--- a/packages/shared-components/src/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
+++ b/packages/shared-components/src/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
@@ -11,12 +11,12 @@ exports[`RichItem renders the list 1`] = `
     >
       <span
         class="title"
-        id="«r0»"
+        id="_r_0_"
       >
         Rich List Title
       </span>
       <ul
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="content"
         role="listbox"
         tabindex="0"
@@ -174,7 +174,7 @@ exports[`RichItem renders the list with isEmpty=true 1`] = `
     >
       <span
         class="title"
-        id="«r1»"
+        id="_r_1_"
       >
         Rich List Title
       </span>
diff --git a/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
index 069b4a704a..1307a47d06 100644
--- a/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`FilePanel renders empty state 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index 350f3d9b60..7f5eeceba6 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -47,7 +47,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby="«rg1»"
+        aria-labelledby="_r_g1_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -74,7 +74,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby="«rg6»"
+        aria-labelledby="_r_g6_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -104,7 +104,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       >
         <div
           aria-label="2 members"
-          aria-labelledby="«rgb»"
+          aria-labelledby="_r_gb_"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -212,7 +212,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby="«rgj»"
+        aria-labelledby="_r_gj_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -239,7 +239,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby="«rgo»"
+        aria-labelledby="_r_go_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -269,7 +269,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       >
         <div
           aria-label="2 members"
-          aria-labelledby="«rgt»"
+          aria-labelledby="_r_gt_"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -463,7 +463,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby="«rc1»"
+        aria-labelledby="_r_c1_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -490,7 +490,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby="«rc6»"
+        aria-labelledby="_r_c6_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -520,7 +520,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       >
         <div
           aria-label="2 members"
-          aria-labelledby="«rcb»"
+          aria-labelledby="_r_cb_"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -639,7 +639,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             >
               <svg
                 aria-label="Messages in this room are not end-to-end encrypted"
-                aria-labelledby="«rck»"
+                aria-labelledby="_r_ck_"
                 class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                 color="var(--cpd-color-icon-info-primary)"
                 fill="currentColor"
@@ -810,7 +810,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby="«re1»"
+        aria-labelledby="_r_e1_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -837,7 +837,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby="«re6»"
+        aria-labelledby="_r_e6_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         role="button"
@@ -867,7 +867,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       >
         <div
           aria-label="2 members"
-          aria-labelledby="«reb»"
+          aria-labelledby="_r_eb_"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -1231,7 +1231,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="«r2j»"
+                aria-labelledby="_r_2j_"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1247,7 +1247,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-disabled="false"
             aria-label="Voice call"
-            aria-labelledby="«r2o»"
+            aria-labelledby="_r_2o_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1273,7 +1273,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="«r2t»"
+            aria-labelledby="_r_2t_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1300,7 +1300,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="«r32»"
+            aria-labelledby="_r_32_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1330,7 +1330,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           >
             <div
               aria-label="0 members"
-              aria-labelledby="«r37»"
+              aria-labelledby="_r_37_"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1443,7 +1443,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="«r2j»"
+                aria-labelledby="_r_2j_"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1459,7 +1459,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-disabled="false"
             aria-label="Voice call"
-            aria-labelledby="«r2o»"
+            aria-labelledby="_r_2o_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1485,7 +1485,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="«r2t»"
+            aria-labelledby="_r_2t_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1512,7 +1512,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="«r32»"
+            aria-labelledby="_r_32_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1542,7 +1542,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           >
             <div
               aria-label="0 members"
-              aria-labelledby="«r37»"
+              aria-labelledby="_r_37_"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1610,7 +1610,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                   tabindex="0"
                 >
                   <div
-                    aria-labelledby="«r3m»"
+                    aria-labelledby="_r_3m_"
                     class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
                     data-testid="e2e-icon"
                   >
@@ -1821,7 +1821,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Chat"
-            aria-labelledby="«r7l»"
+            aria-labelledby="_r_7l_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1848,7 +1848,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="«r7q»"
+            aria-labelledby="_r_7q_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1875,7 +1875,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="«r7v»"
+            aria-labelledby="_r_7v_"
             class="_icon-button_1pz9o_8"
             data-kind="primary"
             role="button"
@@ -1905,7 +1905,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           >
             <div
               aria-label="0 members"
-              aria-labelledby="«r84»"
+              aria-labelledby="_r_84_"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1981,7 +1981,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 </p>
               </div>
               <button
-                aria-labelledby="«r8d»"
+                aria-labelledby="_r_8d_"
                 class="_icon-button_1pz9o_8"
                 data-kind="secondary"
                 data-testid="base-card-close-button"
@@ -2041,7 +2041,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                   >
                     <svg
                       aria-label="Messages in this room are not end-to-end encrypted"
-                      aria-labelledby="«r8m»"
+                      aria-labelledby="_r_8m_"
                       class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                       color="var(--cpd-color-icon-info-primary)"
                       fill="currentColor"
diff --git a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index c75b79aee4..e97a0cf7e1 100644
--- a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
 <DocumentFragment>
@@ -58,7 +58,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
     role="tree"
   >
     <li
-      aria-labelledby="«r8»"
+      aria-labelledby="_r_8_"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -88,7 +88,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="«r8»"
+              id="_r_8_"
             >
               Unnamed Room
             </span>
@@ -122,7 +122,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby="«r8»"
+                    aria-labelledby="_r_8_"
                     class="_input_1hel1_18"
                     id="checkbox_MwbPDmfGtm"
                     role="presentation"
@@ -156,7 +156,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
       </div>
     </li>
     <li
-      aria-labelledby="«rc»"
+      aria-labelledby="_r_c_"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -186,7 +186,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="«rc»"
+              id="_r_c_"
             >
               Unnamed Room
             </span>
@@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby="«rc»"
+                    aria-labelledby="_r_c_"
                     class="_input_1hel1_18"
                     id="checkbox_GQvdMWe954"
                     role="presentation"
@@ -254,7 +254,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
       </div>
     </li>
     <li
-      aria-labelledby="«rg»"
+      aria-labelledby="_r_g_"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -284,7 +284,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="«rg»"
+              id="_r_g_"
             >
               Knock room
             </span>
@@ -318,7 +318,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby="«rg»"
+                    aria-labelledby="_r_g_"
                     class="_input_1hel1_18"
                     id="checkbox_DVIAu5CsiH"
                     role="presentation"
@@ -353,7 +353,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
     </li>
     <li
       aria-expanded="true"
-      aria-labelledby="«rk»"
+      aria-labelledby="_r_k_"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -383,7 +383,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="«rk»"
+              id="_r_k_"
             >
               Nested space
             </span>
@@ -417,7 +417,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby="«rk»"
+                    aria-labelledby="_r_k_"
                     class="_input_1hel1_18"
                     id="checkbox_RD7nyrA2oh"
                     role="presentation"
@@ -458,7 +458,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
       />
     </li>
     <li
-      aria-labelledby="«ro»"
+      aria-labelledby="_r_o_"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -488,7 +488,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="«ro»"
+              id="_r_o_"
             >
               Nested room
             </span>
@@ -510,7 +510,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <span
-            aria-labelledby="«rp»"
+            aria-labelledby="_r_p_"
             tabindex="0"
           >
             <form
@@ -526,7 +526,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                     class="_container_1hel1_10"
                   >
                     <input
-                      aria-labelledby="«ro»"
+                      aria-labelledby="_r_o_"
                       class="_input_1hel1_18"
                       disabled=""
                       id="checkbox_jWVJIPauy1"
diff --git a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
index e30c3e5618..3abc036124 100644
--- a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properly renders Show: All threads 1`] = `
 <DocumentFragment>
@@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
     class="mx_ThreadPanelHeader"
   >
     <button
-      aria-labelledby="«r0»"
+      aria-labelledby="_r_0_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"
@@ -45,7 +45,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
     class="mx_ThreadPanelHeader"
   >
     <button
-      aria-labelledby="«r6»"
+      aria-labelledby="_r_6_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
index 5250682916..c4f197b915 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
@@ -16,7 +16,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
       r
     </span>
     <div
-      aria-labelledby="«r0»"
+      aria-labelledby="_r_0_"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
       tabindex="0"
     />
@@ -40,7 +40,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
       r
     </span>
     <div
-      aria-labelledby="«r6»"
+      aria-labelledby="_r_6_"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
       tabindex="0"
     />
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
index a1b74d4654..62cdef22ac 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
@@ -50,7 +50,7 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
     </span>
     <svg
       aria-label="This is a low priority room"
-      aria-labelledby="«r0»"
+      aria-labelledby="_r_0_"
       class="mx_RoomAvatarView_icon"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -93,7 +93,7 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
     </span>
     <svg
       aria-label="This room is public"
-      aria-labelledby="«rc»"
+      aria-labelledby="_r_c_"
       class="mx_RoomAvatarView_icon"
       color="var(--cpd-color-icon-info-primary)"
       fill="currentColor"
@@ -136,7 +136,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
     </span>
     <svg
       aria-label="This room is a video room"
-      aria-labelledby="«r6»"
+      aria-labelledby="_r_6_"
       class="mx_RoomAvatarView_icon"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -179,7 +179,7 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
     </span>
     <svg
       aria-label="Away"
-      aria-labelledby="«r14»"
+      aria-labelledby="_r_14_"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-quaternary)"
       fill="currentColor"
@@ -235,7 +235,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
     </span>
     <svg
       aria-label="Busy"
-      aria-labelledby="«ru»"
+      aria-labelledby="_r_u_"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -293,7 +293,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
     </span>
     <svg
       aria-label="Offline"
-      aria-labelledby="«ro»"
+      aria-labelledby="_r_o_"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -351,7 +351,7 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
     </span>
     <svg
       aria-label="Online"
-      aria-labelledby="«ri»"
+      aria-labelledby="_r_i_"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-accent-primary)"
       fill="currentColor"
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
index 07f947d6d6..1cc2b8ce18 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
@@ -7,7 +7,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="«r0»"
+      aria-labelledby="_r_0_"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
       style="width: 32px; height: 32px;"
       tabindex="0"
@@ -23,7 +23,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="«r6»"
+      aria-labelledby="_r_6_"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
       style="width: 32px; height: 32px;"
       tabindex="0"
@@ -39,7 +39,7 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="«rc»"
+      aria-labelledby="_r_c_"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
       style="width: 32px; height: 32px;"
       tabindex="0"
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
index 234b32911d..7d18989a03 100644
--- a/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           class="mx_BeaconListItem_interactions"
         >
           <a
-            aria-labelledby="«r0»"
+            aria-labelledby="_r_0_"
             data-testid="open-location-in-osm"
             href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
             rel="noreferrer noopener"
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index b9364bb6db..259b1da2f2 100644
--- a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -72,7 +72,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <a
-                aria-labelledby="«r8»"
+                aria-labelledby="_r_8_"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
index 09500389af..dbbe748b07 100644
--- a/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
   <a
-    aria-labelledby="«r0»"
+    aria-labelledby="_r_0_"
     data-testid="open-location-in-osm"
     href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
     rel="noreferrer noopener"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
index d6adf24458..ae45bdbfff 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
@@ -38,22 +38,22 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_«r7»"
+            id="mx_LabelledToggleSwitch__r_7_"
           >
             Ignore user
           </div>
           <span
             class="mx_Caption"
-            id="mx_LabelledToggleSwitch_«r7»_caption"
+            id="mx_LabelledToggleSwitch__r_7__caption"
           >
             You will not see any messages or room invites from this user.
           </span>
         </span>
         <div
           aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch_«r7»_caption"
+          aria-describedby="mx_LabelledToggleSwitch__r_7__caption"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_«r7»"
+          aria-labelledby="mx_LabelledToggleSwitch__r_7_"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"
@@ -70,22 +70,22 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_«r8»"
+            id="mx_LabelledToggleSwitch__r_8_"
           >
             Report room
           </div>
           <span
             class="mx_Caption"
-            id="mx_LabelledToggleSwitch_«r8»_caption"
+            id="mx_LabelledToggleSwitch__r_8__caption"
           >
             Report this room to your account provider.
           </span>
         </span>
         <div
           aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch_«r8»_caption"
+          aria-describedby="mx_LabelledToggleSwitch__r_8__caption"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_«r8»"
+          aria-labelledby="mx_LabelledToggleSwitch__r_8_"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
index d4789c9b93..1873ac6e8f 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CreateRoomDialog /> for a private room should create a private room 1`] = `
 <DocumentFragment>
@@ -98,7 +98,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             class="mx_SettingsFlag_label"
           >
             <div
-              id="mx_LabelledToggleSwitch_«r4m»"
+              id="mx_LabelledToggleSwitch__r_4m_"
             >
               Enable end-to-end encryption
             </div>
@@ -106,7 +106,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
           <div
             aria-checked="true"
             aria-disabled="false"
-            aria-labelledby="mx_LabelledToggleSwitch_«r4m»"
+            aria-labelledby="mx_LabelledToggleSwitch__r_4m_"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
             role="switch"
             tabindex="0"
@@ -134,7 +134,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r4n»"
+                id="mx_LabelledToggleSwitch__r_4n_"
               >
                 Block anyone not part of server.org from ever joining this room.
               </div>
@@ -142,7 +142,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r4n»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_4n_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -292,7 +292,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
             class="mx_SettingsFlag_label"
           >
             <div
-              id="mx_LabelledToggleSwitch_«r54»"
+              id="mx_LabelledToggleSwitch__r_54_"
             >
               Enable end-to-end encryption
             </div>
@@ -300,7 +300,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
           <div
             aria-checked="true"
             aria-disabled="false"
-            aria-labelledby="mx_LabelledToggleSwitch_«r54»"
+            aria-labelledby="mx_LabelledToggleSwitch__r_54_"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
             role="switch"
             tabindex="0"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 9913c2cd87..8f30d6a2fa 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -34,7 +34,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <div
-        aria-describedby="«r2»"
+        aria-describedby="_r_2_"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         role="button"
@@ -206,7 +206,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-«r4»"
+              for="radix-_r_4_"
             >
               Element Call URL
             </label>
@@ -215,7 +215,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             >
               <input
                 class="_control_sqdq4_10"
-                id="radix-«r4»"
+                id="radix-_r_4_"
                 name="input"
                 title=""
                 value=""
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
index b84bbf187e..522fcf7c9b 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
@@ -74,7 +74,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is a backup on the
       </details>
     </div>
     <div
-      aria-describedby="«rq»"
+      aria-describedby="_r_q_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -163,7 +163,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is no backup on th
       </details>
     </div>
     <div
-      aria-describedby="«r10»"
+      aria-describedby="_r_10_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 20664312a8..6d69dfa708 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -76,7 +76,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-describedby="«r5»"
+                    aria-describedby="_r_5_"
                     class="_input_1hel1_18"
                     id="checkbox_vY7Q4uEh9K"
                     type="checkbox"
@@ -126,7 +126,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 </label>
                 <span
                   class="_message_19upo_85 _help-message_19upo_91"
-                  id="«r5»"
+                  id="_r_5_"
                 >
                   0 members
                 </span>
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index 1c876fb6c6..0696271b94 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -103,7 +103,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="«r2»"
+      aria-describedby="_r_2_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -318,7 +318,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="«r8»"
+      aria-describedby="_r_8_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
index d0f67b023b..ff4f3aeb4b 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
@@ -44,7 +44,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         />
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-«r8»"
+          id="radix-_r_8_"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
         </span>
@@ -72,7 +72,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_«r9»"
+            id="mx_LabelledToggleSwitch__r_9_"
           >
             Leave room
           </div>
@@ -80,7 +80,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         <div
           aria-checked="false"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_«r9»"
+          aria-labelledby="mx_LabelledToggleSwitch__r_9_"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
index ac9b7446a7..e0128dbab9 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
           class="mx_StyledRadioButton_content"
         >
           <span
-            aria-labelledby="«r0»"
+            aria-labelledby="_r_0_"
             class="mx_Login_underlinedServerName"
             tabindex="0"
           >
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
index cec0876831..2dc48de40e 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
@@ -103,7 +103,7 @@ exports[`VerificationRequestDialog After we started verification here, says we a
       Once accepted you'll be able to continue with the verification.
     </div>
     <div
-      aria-describedby="«r6»"
+      aria-describedby="_r_6_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
index bc60a23671..8f4045d9ce 100644
--- a/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
@@ -286,7 +286,7 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="«r2»"
+      aria-describedby="_r_2_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -485,7 +485,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is ca
       </div>
     </div>
     <div
-      aria-describedby="«rk»"
+      aria-describedby="_r_k_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -552,7 +552,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in
       </div>
     </div>
     <div
-      aria-describedby="«rq»"
+      aria-describedby="_r_q_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index a3feeea45b..cbb182c1ca 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AppTile destroys non-persisted right panel widget on room change 1`] = `
 <DocumentFragment>
@@ -33,7 +33,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           />
         </div>
         <button
-          aria-labelledby="«r0»"
+          aria-labelledby="_r_0_"
           class="_icon-button_1pz9o_8"
           data-kind="secondary"
           data-testid="base-card-close-button"
@@ -342,8 +342,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby="«r2n»"
-                aria-labelledby="«r2m»"
+                aria-describedby="_r_2n_"
+                aria-labelledby="_r_2m_"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <svg
diff --git a/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index 62187854c3..117681b5be 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="«r0»"
+    aria-labelledby="_r_0_"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
index 4781d89e56..edf5dc4adf 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<ImageView /> renders correctly 1`] = `
         class="mx_ImageView_toolbar"
       >
         <div
-          aria-describedby="«r2»"
+          aria-describedby="_r_2_"
           aria-label="Zoom out"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
           role="button"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
index 438d3f0ecc..88b0534d05 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`InfoTooltip should show tooltip on hover 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="«r2»"
+    aria-describedby="_r_2_"
     class="mx_InfoTooltip"
     tabindex="0"
   >
diff --git a/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
index 944cb23513..493b701416 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
             class="_container_1hel1_10"
           >
             <input
-              aria-describedby="«r4»"
+              aria-describedby="_r_4_"
               checked=""
               class="_input_1hel1_18"
               id="checkbox_vY7Q4uEh9K"
@@ -57,7 +57,7 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
           </label>
           <span
             class="_message_19upo_85 _help-message_19upo_91"
-            id="«r4»"
+            id="_r_4_"
           >
             this is a byline
           </span>
diff --git a/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index 4b396abded..9d2017cc22 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="«r1»"
-    aria-labelledby="«r0»"
+    aria-describedby="_r_1_"
+    aria-labelledby="_r_0_"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
index 98c6b8b63e..bf354d8ced 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
   >
     <label
       class="mx_SettingsDropdown_label"
-      for="«r0»"
+      for="_r_0_"
     >
       <span
         class="mx_SettingsDropdown_labelText"
@@ -19,12 +19,12 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
       class="mx_Dropdown mx_Dropdown_disabled"
     >
       <div
-        aria-describedby="«r0»_value"
+        aria-describedby="_r_0__value"
         aria-disabled="true"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Open %(brand)s when you log in to your computer"
-        aria-owns="«r0»_input"
+        aria-owns="_r_0__input"
         class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput mx_AccessibleButton_disabled"
         disabled=""
         role="button"
@@ -32,7 +32,7 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
       >
         <div
           class="mx_Dropdown_option"
-          id="«r0»_value"
+          id="_r_0__value"
         >
           <div>
             No
diff --git a/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
index 3103159bce..3b5a8cc685 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<SettingsField /> should render with the default label 1`] = `
     >
       <label
         class="_label_19upo_59"
-        for="radix-«r0»"
+        for="radix-_r_0_"
       >
         Element Call URL
       </label>
@@ -19,7 +19,7 @@ exports[`<SettingsField /> should render with the default label 1`] = `
       >
         <input
           class="_control_sqdq4_10"
-          id="radix-«r0»"
+          id="radix-_r_0_"
           name="input"
           title=""
           value=""
diff --git a/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index 15b0bb7a9e..24213fb293 100644
--- a/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<LocationShareMenu /> with live location disabled goes to labs flag screen after live options is clicked 1`] = `
 <div
@@ -26,7 +26,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
       class="mx_SettingsFlag_label"
     >
       <div
-        id="mx_LabelledToggleSwitch_«r0»"
+        id="mx_LabelledToggleSwitch__r_0_"
       >
         Enable live location sharing
       </div>
@@ -34,7 +34,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     <div
       aria-checked="false"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_«r0»"
+      aria-labelledby="mx_LabelledToggleSwitch__r_0_"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"
diff --git a/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
index 1d4bbd5f49..1fb235633b 100644
--- a/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     class="mx_ZoomButtons"
   >
     <div
-      aria-describedby="«r6»"
+      aria-describedby="_r_6_"
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
       data-testid="map-zoom-in-button"
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index 6470175c3c..a810d2a79c 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -34,7 +34,7 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
     class="mx_MLocationBody"
   >
     <div
-      aria-labelledby="«ri»"
+      aria-labelledby="_r_i_"
       class="mx_MLocationBody_map"
     >
       <div
@@ -76,7 +76,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
     class="mx_MLocationBody"
   >
     <div
-      aria-labelledby="«ru»"
+      aria-labelledby="_r_u_"
       class="mx_MLocationBody_map"
     >
       <div
diff --git a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
index 10da3b1b27..267f197c35 100644
--- a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<PollHistory /> Poll detail displays poll detail on active poll list item click 1`] = `
 <h2
@@ -91,7 +91,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
             tabindex="0"
           >
             <div
-              aria-labelledby="«ra»"
+              aria-labelledby="_r_a_"
               class="mx_PollListItem_content"
             >
               <span>
@@ -116,7 +116,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
             tabindex="0"
           >
             <div
-              aria-labelledby="«rf»"
+              aria-labelledby="_r_f_"
               class="mx_PollListItem_content"
             >
               <span>
diff --git a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
index 3319ae3856..e2dcc8e286 100644
--- a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
       tabindex="0"
     >
       <div
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="mx_PollListItem_content"
       >
         <span>
diff --git a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
index 1ae7a6b9d7..3c75be80a0 100644
--- a/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
+++ b/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
       tabindex="0"
     >
       <div
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="mx_PollListItemEnded_content"
       >
         <div
diff --git 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
index 425f5942dd..94e105d38c 100644
--- 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
@@ -19,7 +19,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
diff --git 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
index 0b232a5ec7..fc1fd7e081 100644
--- 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
@@ -19,7 +19,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -120,7 +120,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r6»"
+        aria-labelledby="_r_6_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
diff --git 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
index 7d46d21211..1b81425d6e 100644
--- 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
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<PinnedMessagesCard /> should show the empty state when there are no pins 1`] = `
 <DocumentFragment>
@@ -19,7 +19,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
         </p>
       </div>
       <button
-        aria-labelledby="«rf»"
+        aria-labelledby="_r_f_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -101,7 +101,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«rl»"
+        aria-labelledby="_r_l_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -159,13 +159,13 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="«rs»"
+                aria-labelledby="_r_s_"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="«rr»"
+                aria-describedby="_r_r_"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -173,7 +173,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 class="_icon-button_1pz9o_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-«r11»"
+                id="radix-_r_11_"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -199,7 +199,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
             </div>
             <div
               class="mx_MTextBody mx_EventTile_content"
-              id="«rr»"
+              id="_r_r_"
             >
               <div
                 class="mx_EventTile_body translate"
@@ -240,13 +240,13 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="«r14»"
+                aria-labelledby="_r_14_"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="«r13»"
+                aria-describedby="_r_13_"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -254,7 +254,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 class="_icon-button_1pz9o_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-«r19»"
+                id="radix-_r_19_"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -280,7 +280,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
             </div>
             <div
               class="mx_MTextBody mx_EventTile_content"
-              id="«r13»"
+              id="_r_13_"
             >
               <div
                 class="mx_EventTile_body translate"
@@ -329,7 +329,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r10f»"
+        aria-labelledby="_r_10f_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -387,13 +387,13 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="«r10m»"
+                aria-labelledby="_r_10m_"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="«r10l»"
+                aria-describedby="_r_10l_"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -401,7 +401,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 class="_icon-button_1pz9o_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-«r10r»"
+                id="radix-_r_10r_"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -427,7 +427,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
             </div>
             <div
               class="mx_MTextBody mx_EventTile_content"
-              id="«r10l»"
+              id="_r_10l_"
             >
               <div
                 class="mx_EventTile_body translate"
@@ -468,13 +468,13 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="«r10u»"
+                aria-labelledby="_r_10u_"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="«r10t»"
+                aria-describedby="_r_10t_"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -482,7 +482,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 class="_icon-button_1pz9o_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-«r113»"
+                id="radix-_r_113_"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -508,7 +508,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
             </div>
             <div
               class="mx_MTextBody mx_EventTile_content"
-              id="«r10t»"
+              id="_r_10t_"
             >
               <div
                 class="mx_EventTile_body translate"
diff --git 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
index 14c0710999..1c6672e832 100644
--- 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
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
 <div>
@@ -15,7 +15,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="«re»"
+        aria-labelledby="_r_e_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -210,7 +210,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id="«rj»"
+              id="_r_j_"
               role="switch"
               type="checkbox"
             />
@@ -728,7 +728,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -885,7 +885,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id="«r5»"
+              id="_r_5_"
               role="switch"
               type="checkbox"
             />
@@ -1403,7 +1403,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="«r7»"
+        aria-labelledby="_r_7_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -1598,7 +1598,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id="«rc»"
+              id="_r_c_"
               role="switch"
               type="checkbox"
             />
diff --git 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
index 7a8ace1bc3..0ed3d7b130 100644
--- 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
@@ -19,7 +19,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r7c»"
+        aria-labelledby="_r_7c_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -306,7 +306,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         </p>
       </div>
       <button
-        aria-labelledby="«r7m»"
+        aria-labelledby="_r_7m_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
diff --git 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
index 22449950e2..ea58935769 100644
--- 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
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
 <DocumentFragment>
@@ -56,7 +56,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          aria-labelledby="«r14k»"
+          aria-labelledby="_r_14k_"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -72,7 +72,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-disabled="false"
       aria-label="Voice call"
-      aria-labelledby="«r14p»"
+      aria-labelledby="_r_14p_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"
@@ -98,7 +98,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Threads"
-      aria-labelledby="«r14u»"
+      aria-labelledby="_r_14u_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"
@@ -125,7 +125,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Room info"
-      aria-labelledby="«r153»"
+      aria-labelledby="_r_153_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       role="button"
diff --git 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
index a2cef17138..7c1f3a5a9b 100644
--- 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
@@ -3,7 +3,7 @@
 exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
 <button
   aria-label="Chat"
-  aria-labelledby="«r6»"
+  aria-labelledby="_r_6_"
   class="_icon-button_1pz9o_8"
   data-indicator="default"
   data-kind="primary"
diff --git 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
index d571cbe144..3ad2588b74 100644
--- 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
@@ -25,7 +25,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«rk»"
+        id="radix-_r_k_"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -63,11 +63,11 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="«rs»"
+          aria-labelledby="_r_s_"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«rq»"
+          id="radix-_r_q_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -104,7 +104,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r15»"
+          id="radix-_r_15_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -164,7 +164,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r18»"
+        id="radix-_r_18_"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -202,11 +202,11 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="«r1g»"
+          aria-labelledby="_r_1g_"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r1e»"
+          id="radix-_r_1e_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -297,7 +297,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r0»"
+        id="radix-_r_0_"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -335,11 +335,11 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="«r8»"
+          aria-labelledby="_r_8_"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r6»"
+          id="radix-_r_6_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -376,7 +376,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«rh»"
+          id="radix-_r_h_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -436,7 +436,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r3g»"
+        id="radix-_r_3g_"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -474,11 +474,11 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="«r3o»"
+          aria-labelledby="_r_3o_"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r3m»"
+          id="radix-_r_3m_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -515,7 +515,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r41»"
+          id="radix-_r_41_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -581,11 +581,11 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="«r4a»"
+          aria-labelledby="_r_4a_"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r48»"
+          id="radix-_r_48_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -622,7 +622,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r4j»"
+          id="radix-_r_4j_"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
diff --git 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
index 4fae31120b..a32298aa53 100644
--- 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
@@ -11,11 +11,11 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="More Options"
-      aria-labelledby="«r2»"
+      aria-labelledby="_r_2_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       data-state="closed"
-      id="radix-«r0»"
+      id="radix-_r_0_"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"
@@ -44,11 +44,11 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Notification options"
-        aria-labelledby="«r9»"
+        aria-labelledby="_r_9_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r7»"
+        id="radix-_r_7_"
         role="button"
         style="--cpd-icon-button-size: 24px;"
         tabindex="0"
@@ -90,11 +90,11 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="More Options"
-      aria-labelledby="«ri»"
+      aria-labelledby="_r_i_"
       class="_icon-button_1pz9o_8"
       data-kind="primary"
       data-state="closed"
-      id="radix-«rg»"
+      id="radix-_r_g_"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"
@@ -123,11 +123,11 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Notification options"
-        aria-labelledby="«rp»"
+        aria-labelledby="_r_p_"
         class="_icon-button_1pz9o_8"
         data-kind="primary"
         data-state="closed"
-        id="radix-«rn»"
+        id="radix-_r_n_"
         role="button"
         style="--cpd-icon-button-size: 24px;"
         tabindex="0"
diff --git 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
index 26f4df265f..cad8e89c1a 100644
--- 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
@@ -7,11 +7,11 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Room Options"
-    aria-labelledby="«r2»"
+    aria-labelledby="_r_2_"
     class="_icon-button_1pz9o_8"
     data-kind="primary"
     data-state="closed"
-    id="radix-«r0»"
+    id="radix-_r_0_"
     role="button"
     style="--cpd-icon-button-size: 32px;"
     tabindex="0"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
index 2fefd96f43..5865d33b00 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<RoomListPrimaryFilters /> should renders all filters correctly 1`] = `
     <div
       aria-label="Room list filters"
       class="flex mx_RoomListPrimaryFilters_list"
-      id="«r0»"
+      id="_r_0_"
       role="listbox"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
     >
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 0486496986..40c4e487de 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -25,13 +25,13 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          aria-labelledby="«r1»"
+          aria-labelledby="_r_1_"
           class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
         </span>
         <button
-          aria-describedby="«r0»"
+          aria-describedby="_r_0_"
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
@@ -39,7 +39,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r6»"
+          id="radix-_r_6_"
           role="button"
           style="--cpd-icon-button-size: 24px;"
           tabindex="0"
@@ -65,7 +65,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
       </div>
       <div
         class="mx_MTextBody mx_EventTile_content"
-        id="«r0»"
+        id="_r_0_"
       >
         <div
           class="mx_EventTile_body translate"
@@ -104,13 +104,13 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          aria-labelledby="«ra»"
+          aria-labelledby="_r_a_"
           class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
         </span>
         <button
-          aria-describedby="«r9»"
+          aria-describedby="_r_9_"
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
@@ -118,7 +118,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«rf»"
+          id="radix-_r_f_"
           role="button"
           style="--cpd-icon-button-size: 24px;"
           tabindex="0"
@@ -144,7 +144,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
       </div>
       <div
         class="mx_MTextBody mx_EventTile_content"
-        id="«r9»"
+        id="_r_9_"
       >
         <div
           class="mx_EventTile_body translate"
@@ -187,7 +187,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
 exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 <div
   aria-label="Open menu"
-  aria-labelledby="radix-«r14»"
+  aria-labelledby="radix-_r_14_"
   aria-orientation="vertical"
   class="_menu_1glhz_8"
   data-align="start"
@@ -196,7 +196,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-«r15»"
+  id="radix-_r_15_"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -378,7 +378,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
 <div
   aria-label="Open menu"
-  aria-labelledby="radix-«ro»"
+  aria-labelledby="radix-_r_o_"
   aria-orientation="vertical"
   class="_menu_1glhz_8"
   data-align="start"
@@ -387,7 +387,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-«rp»"
+  id="radix-_r_p_"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
index 75f82b5f6d..76732c6c34 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
 <DocumentFragment>
@@ -10,14 +10,14 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«ra»"
+      aria-describedby="_r_a_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«ra»"
+        id="_r_a_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -68,14 +68,14 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
     role="region"
   >
     <button
-      aria-describedby="«r4»"
+      aria-describedby="_r_4_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r4»"
+        id="_r_4_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -150,14 +150,14 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r7»"
+      aria-describedby="_r_7_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r7»"
+        id="_r_7_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -208,14 +208,14 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r6»"
+      aria-describedby="_r_6_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r6»"
+        id="_r_6_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -266,14 +266,14 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r9»"
+      aria-describedby="_r_9_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r9»"
+        id="_r_9_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -324,14 +324,14 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r8»"
+      aria-describedby="_r_8_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r8»"
+        id="_r_8_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -382,14 +382,14 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r2»"
+      aria-describedby="_r_2_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r2»"
+        id="_r_2_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -460,14 +460,14 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r3»"
+      aria-describedby="_r_3_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r3»"
+        id="_r_3_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -542,14 +542,14 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="«r1»"
+      aria-describedby="_r_1_"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="«r1»"
+        id="_r_1_"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
index 1778426866..6540cb658c 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 <div
   class="_tooltip_6ode6_8"
   data-floating-ui-focusable=""
-  id="«r6»"
+  id="_r_6_"
   role="tooltip"
   style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
   tabindex="-1"
@@ -22,7 +22,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
       stroke="none"
     />
     <clippath
-      id="«r9»"
+      id="_r_9_"
     >
       <rect
         height="10"
@@ -33,13 +33,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
     </clippath>
   </svg>
   <span
-    id="«r4»"
+    id="_r_4_"
   >
     Alice
   </span>
   <span
     class="_caption_6ode6_28 cpd-theme-dark"
-    id="«r5»"
+    id="_r_5_"
   >
     @alice:example.org
   </span>
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
index 4ad44d6c57..7ad6bd0fe2 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="«r0»"
+        aria-labelledby="_r_0_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -94,7 +94,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
         </p>
       </div>
       <button
-        aria-labelledby="«r6»"
+        aria-labelledby="_r_6_"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
index fd01c58842..cfc5ca536f 100644
--- a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
@@ -52,7 +52,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
         class="mx_MemberTileView_right"
       >
         <div
-          aria-labelledby="«r6»"
+          aria-labelledby="_r_6_"
           class="mx_E2EIconView"
         >
           <svg
@@ -126,7 +126,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
         class="mx_MemberTileView_right"
       >
         <div
-          aria-labelledby="«r0»"
+          aria-labelledby="_r_0_"
           class="mx_E2EIconView"
         >
           <svg
diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index 6be2307377..28883a52a8 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           <label
             aria-label="Modern"
             class="_label_19upo_59"
-            for="radix-«r0»"
+            for="radix-_r_0_"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -38,7 +38,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 <input
                   checked=""
                   class="_input_1e0uz_18"
-                  id="radix-«r0»"
+                  id="radix-_r_0_"
                   name="layout"
                   title=""
                   type="radio"
@@ -155,7 +155,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           <label
             aria-label="Message bubbles"
             class="_label_19upo_59"
-            for="radix-«r9»"
+            for="radix-_r_9_"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -165,7 +165,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               >
                 <input
                   class="_input_1e0uz_18"
-                  id="radix-«r9»"
+                  id="radix-_r_9_"
                   name="layout"
                   title=""
                   type="radio"
@@ -282,7 +282,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           <label
             aria-label="IRC (experimental)"
             class="_label_19upo_59"
-            for="radix-«ri»"
+            for="radix-_r_i_"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -292,7 +292,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               >
                 <input
                   class="_input_1e0uz_18"
-                  id="radix-«ri»"
+                  id="radix-_r_i_"
                   name="layout"
                   title=""
                   type="radio"
@@ -417,9 +417,9 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="_container_19o42_10"
             >
               <input
-                aria-describedby="radix-«rs»"
+                aria-describedby="radix-_r_s_"
                 class="_input_19o42_24"
-                id="radix-«rr»"
+                id="radix-_r_r_"
                 name="compactLayout"
                 role="switch"
                 title=""
@@ -435,13 +435,13 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-«rr»"
+              for="radix-_r_r_"
             >
               Show compact text and messages
             </label>
             <span
               class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-«rs»"
+              id="radix-_r_s_"
             >
               Modern layout must be selected to use this feature.
             </span>
diff --git a/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index f89ada25cb..f25f1625d4 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Notifications /> main notification switches renders only enable notifications switch when notifications are disabled 1`] = `
 <div>
@@ -10,22 +10,22 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       class="mx_SettingsFlag_label"
     >
       <div
-        id="mx_LabelledToggleSwitch_«r0»"
+        id="mx_LabelledToggleSwitch__r_0_"
       >
         Enable notifications for this account
       </div>
       <span
         class="mx_Caption"
-        id="mx_LabelledToggleSwitch_«r0»_caption"
+        id="mx_LabelledToggleSwitch__r_0__caption"
       >
         Turn off to disable notifications on all your devices and sessions
       </span>
     </span>
     <div
       aria-checked="false"
-      aria-describedby="mx_LabelledToggleSwitch_«r0»_caption"
+      aria-describedby="mx_LabelledToggleSwitch__r_0__caption"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_«r0»"
+      aria-labelledby="mx_LabelledToggleSwitch__r_0_"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"
diff --git a/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
index 3a6dfcd5d6..65305a5df4 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
@@ -30,7 +30,7 @@ exports[`<SetIdServer /> renders expected fields 1`] = `
         >
           <label
             class="_label_19upo_59"
-            for="radix-«r0»"
+            for="radix-_r_0_"
           >
             Enter a new identity server
           </label>
@@ -39,7 +39,7 @@ exports[`<SetIdServer /> renders expected fields 1`] = `
           >
             <input
               class="_control_sqdq4_10"
-              id="radix-«r0»"
+              id="radix-_r_0_"
               name="input"
               placeholder=""
               title=""
diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 01f5b8b097..6290e0ed59 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_19o42_24"
-                id="radix-«r28»"
+                id="radix-_r_28_"
                 name="systemTheme"
                 role="switch"
                 title=""
@@ -48,7 +48,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-«r28»"
+              for="radix-_r_28_"
             >
               Match system theme
             </label>
@@ -70,7 +70,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               <input
                 checked=""
                 class="_input_1e0uz_18"
-                id="radix-«r29»"
+                id="radix-_r_29_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -86,7 +86,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r29»"
+              for="radix-_r_29_"
             >
               Light
             </label>
@@ -103,7 +103,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r2a»"
+                id="radix-_r_2a_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -119,7 +119,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r2a»"
+              for="radix-_r_2a_"
             >
               Dark
             </label>
@@ -136,7 +136,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r2b»"
+                id="radix-_r_2b_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -152,7 +152,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r2b»"
+              for="radix-_r_2b_"
             >
               High contrast
             </label>
@@ -169,7 +169,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r2c»"
+                id="radix-_r_2c_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -185,7 +185,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r2c»"
+              for="radix-_r_2c_"
             >
               Alice theme
             </label>
@@ -203,7 +203,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-«r2d»"
+              for="radix-_r_2d_"
             >
               Add custom theme
             </label>
@@ -211,9 +211,9 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               class="_controls_17lij_8"
             >
               <input
-                aria-describedby="radix-«r2e»"
+                aria-describedby="radix-_r_2e_"
                 class="_control_sqdq4_10"
-                id="radix-«r2d»"
+                id="radix-_r_2d_"
                 name="input"
                 title=""
                 value=""
@@ -221,7 +221,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
             <span
               class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-«r2e»"
+              id="radix-_r_2e_"
             >
               Enter the URL of a custom theme you want to apply.
             </span>
@@ -241,7 +241,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </span>
             <button
               aria-label="Delete"
-              aria-labelledby="«r2f»"
+              aria-labelledby="_r_2f_"
               class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
               data-kind="primary"
               role="button"
@@ -311,7 +311,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_19o42_24"
-                id="radix-«r10»"
+                id="radix-_r_10_"
                 name="systemTheme"
                 role="switch"
                 title=""
@@ -327,7 +327,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59"
-              for="radix-«r10»"
+              for="radix-_r_10_"
             >
               Match system theme
             </label>
@@ -349,7 +349,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               <input
                 checked=""
                 class="_input_1e0uz_18"
-                id="radix-«r11»"
+                id="radix-_r_11_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -365,7 +365,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r11»"
+              for="radix-_r_11_"
             >
               Light
             </label>
@@ -382,7 +382,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r12»"
+                id="radix-_r_12_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -398,7 +398,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r12»"
+              for="radix-_r_12_"
             >
               Dark
             </label>
@@ -415,7 +415,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r13»"
+                id="radix-_r_13_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -431,7 +431,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r13»"
+              for="radix-_r_13_"
             >
               High contrast
             </label>
@@ -448,7 +448,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r14»"
+                id="radix-_r_14_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -464,7 +464,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r14»"
+              for="radix-_r_14_"
             >
               Alice theme
             </label>
@@ -482,7 +482,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59"
-              for="radix-«r15»"
+              for="radix-_r_15_"
             >
               Add custom theme
             </label>
@@ -490,9 +490,9 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               class="_controls_17lij_8"
             >
               <input
-                aria-describedby="radix-«r16»"
+                aria-describedby="radix-_r_16_"
                 class="_control_sqdq4_10"
-                id="radix-«r15»"
+                id="radix-_r_15_"
                 name="input"
                 title=""
                 value=""
@@ -500,7 +500,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
             <span
               class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-«r16»"
+              id="radix-_r_16_"
             >
               Enter the URL of a custom theme you want to apply.
             </span>
@@ -520,7 +520,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </span>
             <button
               aria-label="Delete"
-              aria-labelledby="«r17»"
+              aria-labelledby="_r_17_"
               class="_icon-button_1pz9o_8 _destructive_1pz9o_95"
               data-kind="primary"
               role="button"
@@ -590,7 +590,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             >
               <input
                 class="_input_19o42_24"
-                id="radix-«r0»"
+                id="radix-_r_0_"
                 name="systemTheme"
                 role="switch"
                 title=""
@@ -606,7 +606,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-«r0»"
+              for="radix-_r_0_"
             >
               Match system theme
             </label>
@@ -628,7 +628,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
               <input
                 checked=""
                 class="_input_1e0uz_18"
-                id="radix-«r1»"
+                id="radix-_r_1_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -644,7 +644,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r1»"
+              for="radix-_r_1_"
             >
               Light
             </label>
@@ -661,7 +661,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r2»"
+                id="radix-_r_2_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -677,7 +677,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r2»"
+              for="radix-_r_2_"
             >
               Dark
             </label>
@@ -694,7 +694,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-«r3»"
+                id="radix-_r_3_"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -710,7 +710,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-«r3»"
+              for="radix-_r_3_"
             >
               High contrast
             </label>
diff --git a/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index 5d99112dd5..37e3663eb0 100644
--- a/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
             >
               <input
                 aria-label="Deselect all"
-                aria-labelledby="«r9»"
+                aria-labelledby="_r_9_"
                 checked=""
                 class="_input_1hel1_18"
                 data-testid="device-select-all-checkbox"
@@ -89,7 +89,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
             >
               <input
                 aria-label="Select all"
-                aria-labelledby="«r0»"
+                aria-labelledby="_r_0_"
                 class="_input_1hel1_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
index 712f22f760..60bb86e19f 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
@@ -219,10 +219,10 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
         class="_container_19o42_10"
       >
         <input
-          aria-describedby="radix-«r7»"
+          aria-describedby="radix-_r_7_"
           checked=""
           class="_input_19o42_24"
-          id="radix-«r6»"
+          id="radix-_r_6_"
           name="neverSendEncrypted"
           role="switch"
           title=""
@@ -238,13 +238,13 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
     >
       <label
         class="_label_19upo_59"
-        for="radix-«r6»"
+        for="radix-_r_6_"
       >
         In encrypted rooms, only send messages to verified users
       </label>
       <span
         class="_message_19upo_85 _help-message_19upo_91"
-        id="radix-«r7»"
+        id="radix-_r_7_"
       >
         Warning: users who have not explicitly verified with you (e.g. using emoji) will not receive your encrypted messages. Also, unverified devices of verified users will not receive your encrypted messages.
       </span>
diff --git 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
index f732184548..13b2e86cab 100644
--- 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
@@ -256,25 +256,25 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <label
           class="_label_19upo_59"
-          for="radix-«r0»"
+          for="radix-_r_0_"
         >
           Enter recovery key
         </label>
         <div
           class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
-          id="«r1»"
+          id="_r_1_"
         >
           <input
             class="_control_sqdq4_10 _control_1s836_13"
-            id="radix-«r0»"
+            id="radix-_r_0_"
             name="recoveryKey"
             required=""
             title="Enter recovery key"
             type="password"
           />
           <button
-            aria-controls="«r1»"
-            aria-labelledby="«r2»"
+            aria-controls="_r_1_"
+            aria-labelledby="_r_2_"
             class="_action_1s836_24"
             type="button"
           >
@@ -417,28 +417,28 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
         <label
           class="_label_19upo_59"
           data-invalid="true"
-          for="radix-«r0»"
+          for="radix-_r_0_"
         >
           Enter recovery key
         </label>
         <div
           class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
-          id="«r1»"
+          id="_r_1_"
         >
           <input
-            aria-describedby="radix-«r8»"
+            aria-describedby="radix-_r_8_"
             aria-invalid="true"
             class="_control_sqdq4_10 _control_1s836_13"
             data-invalid="true"
-            id="radix-«r0»"
+            id="radix-_r_0_"
             name="recoveryKey"
             required=""
             title="Enter recovery key"
             type="password"
           />
           <button
-            aria-controls="«r1»"
-            aria-labelledby="«r2»"
+            aria-controls="_r_1_"
+            aria-labelledby="_r_2_"
             class="_action_1s836_24"
             type="button"
           >
@@ -458,7 +458,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
         </div>
         <span
           class="_message_19upo_85 _error-message_19upo_95"
-          id="radix-«r8»"
+          id="radix-_r_8_"
         >
           <svg
             fill="currentColor"
diff --git a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index dd13f0068d..60564c9290 100644
--- a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
 <div>
@@ -21,7 +21,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r17»"
+                id="mx_LabelledToggleSwitch__r_17_"
               >
                 Enable notifications for this account
               </div>
@@ -29,7 +29,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="true"
               aria-disabled="true"
-              aria-labelledby="mx_LabelledToggleSwitch_«r17»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_17_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
               role="switch"
               tabindex="0"
@@ -46,7 +46,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r18»"
+                id="mx_LabelledToggleSwitch__r_18_"
               >
                 Enable desktop notifications for this session
               </div>
@@ -54,7 +54,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r18»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_18_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -71,7 +71,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r19»"
+                id="mx_LabelledToggleSwitch__r_19_"
               >
                 Show message preview in desktop notification
               </div>
@@ -79,7 +79,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r19»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_19_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -96,7 +96,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r1a»"
+                id="mx_LabelledToggleSwitch__r_1a_"
               >
                 Enable audible notifications for this session
               </div>
@@ -104,7 +104,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r1a»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_1a_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -758,7 +758,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«r24»"
+                        aria-describedby="_r_24_"
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
@@ -798,7 +798,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«r24»"
+                      id="_r_24_"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>
@@ -998,7 +998,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r0»"
+                id="mx_LabelledToggleSwitch__r_0_"
               >
                 Enable notifications for this account
               </div>
@@ -1006,7 +1006,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r0»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_0_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1023,7 +1023,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r1»"
+                id="mx_LabelledToggleSwitch__r_1_"
               >
                 Enable desktop notifications for this session
               </div>
@@ -1031,7 +1031,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r1»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_1_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1048,7 +1048,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r2»"
+                id="mx_LabelledToggleSwitch__r_2_"
               >
                 Show message preview in desktop notification
               </div>
@@ -1056,7 +1056,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="false"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r2»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_2_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1073,7 +1073,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_SettingsFlag_label"
             >
               <div
-                id="mx_LabelledToggleSwitch_«r3»"
+                id="mx_LabelledToggleSwitch__r_3_"
               >
                 Enable audible notifications for this session
               </div>
@@ -1081,7 +1081,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             <div
               aria-checked="true"
               aria-disabled="false"
-              aria-labelledby="mx_LabelledToggleSwitch_«r3»"
+              aria-labelledby="mx_LabelledToggleSwitch__r_3_"
               class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
               role="switch"
               tabindex="0"
@@ -1724,7 +1724,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«rt»"
+                        aria-describedby="_r_t_"
                         checked=""
                         class="_input_1hel1_18"
                         id="checkbox_kBerF1ejc4"
@@ -1763,7 +1763,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«rt»"
+                      id="_r_t_"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 3fb77c7205..96984b5565 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -46,7 +46,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1e0uz_18"
                         disabled=""
-                        id="radix-«r0»"
+                        id="radix-_r_0_"
                         name="themeSelector"
                         title=""
                         type="radio"
@@ -62,7 +62,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-«r0»"
+                      for="radix-_r_0_"
                     >
                       Light
                     </label>
@@ -80,7 +80,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1e0uz_18"
                         disabled=""
-                        id="radix-«r1»"
+                        id="radix-_r_1_"
                         name="themeSelector"
                         title=""
                         type="radio"
@@ -96,7 +96,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-«r1»"
+                      for="radix-_r_1_"
                     >
                       Dark
                     </label>
@@ -114,7 +114,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1e0uz_18"
                         disabled=""
-                        id="radix-«r2»"
+                        id="radix-_r_2_"
                         name="themeSelector"
                         title=""
                         type="radio"
@@ -130,7 +130,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-«r2»"
+                      for="radix-_r_2_"
                     >
                       High contrast
                     </label>
@@ -170,7 +170,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   <label
                     aria-label="Modern"
                     class="_label_19upo_59"
-                    for="radix-«r3»"
+                    for="radix-_r_3_"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -181,7 +181,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         <input
                           checked=""
                           class="_input_1e0uz_18"
-                          id="radix-«r3»"
+                          id="radix-_r_3_"
                           name="layout"
                           title=""
                           type="radio"
@@ -298,7 +298,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   <label
                     aria-label="Message bubbles"
                     class="_label_19upo_59"
-                    for="radix-«rc»"
+                    for="radix-_r_c_"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -308,7 +308,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       >
                         <input
                           class="_input_1e0uz_18"
-                          id="radix-«rc»"
+                          id="radix-_r_c_"
                           name="layout"
                           title=""
                           type="radio"
@@ -425,7 +425,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   <label
                     aria-label="IRC (experimental)"
                     class="_label_19upo_59"
-                    for="radix-«rl»"
+                    for="radix-_r_l_"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -435,7 +435,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       >
                         <input
                           class="_input_1e0uz_18"
-                          id="radix-«rl»"
+                          id="radix-_r_l_"
                           name="layout"
                           title=""
                           type="radio"
@@ -560,9 +560,9 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="_container_19o42_10"
                     >
                       <input
-                        aria-describedby="radix-«rv»"
+                        aria-describedby="radix-_r_v_"
                         class="_input_19o42_24"
-                        id="radix-«ru»"
+                        id="radix-_r_u_"
                         name="compactLayout"
                         role="switch"
                         title=""
@@ -578,13 +578,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="radix-«ru»"
+                      for="radix-_r_u_"
                     >
                       Show compact text and messages
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-«rv»"
+                      id="radix-_r_v_"
                     >
                       Modern layout must be selected to use this feature.
                     </span>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 654b04efeb..76693b7154 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -1168,7 +1168,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     class="mx_SettingsFlag_label"
                   >
                     <div
-                      id="mx_LabelledToggleSwitch_«r8»"
+                      id="mx_LabelledToggleSwitch__r_8_"
                     >
                       Hide avatars of room and inviter
                     </div>
@@ -1176,7 +1176,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   <div
                     aria-checked="false"
                     aria-disabled="false"
-                    aria-labelledby="mx_LabelledToggleSwitch_«r8»"
+                    aria-labelledby="mx_LabelledToggleSwitch__r_8_"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
                     role="switch"
                     tabindex="0"
@@ -1194,13 +1194,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 >
                   <label
                     class="_label_19upo_59"
-                    for="radix-«r9»"
+                    for="radix-_r_9_"
                   >
                     Show media in timeline
                   </label>
                   <span
                     class="_message_19upo_85 _help-message_19upo_91 mx_MediaPreviewAccountSetting_RadioHelp"
-                    id="radix-«ra»"
+                    id="radix-_r_a_"
                   >
                     A hidden media can always be shown by tapping on it
                   </span>
@@ -1307,7 +1307,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     class="mx_SettingsFlag_label"
                   >
                     <div
-                      id="mx_LabelledToggleSwitch_«re»"
+                      id="mx_LabelledToggleSwitch__r_e_"
                     >
                       Allow users to invite you to rooms
                     </div>
@@ -1316,7 +1316,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     aria-checked="true"
                     aria-disabled="true"
                     aria-label="Your server does not implement this feature."
-                    aria-labelledby="mx_LabelledToggleSwitch_«re»"
+                    aria-labelledby="mx_LabelledToggleSwitch__r_e_"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
                     role="switch"
                     tabindex="0"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
index 50931681f5..b341d797ca 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
@@ -213,7 +213,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                     >
                       <label
                         class="_label_19upo_59"
-                        for="radix-«r1»"
+                        for="radix-_r_1_"
                       >
                         Enter a new identity server
                       </label>
@@ -222,7 +222,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                       >
                         <input
                           class="_control_sqdq4_10"
-                          id="radix-«r1»"
+                          id="radix-_r_1_"
                           name="input"
                           placeholder=""
                           title=""
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 5fbeb9d2f4..d967e18df7 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SessionManagerTab /> Device verification does not allow device verification on session that do not support encryption 1`] = `
 HTMLCollection [
@@ -397,7 +397,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
           >
             <input
               aria-label="Select all"
-              aria-labelledby="«r4q»"
+              aria-labelledby="_r_4q_"
               class="_input_1hel1_18"
               data-testid="device-select-all-checkbox"
               id="device-select-all-checkbox"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index 0da3d42ccc..a8f15ced40 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«r1»"
+                        aria-describedby="_r_1_"
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
@@ -99,7 +99,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«r1»"
+                      id="_r_1_"
                     >
                       Home is useful for getting an overview of everything.
                     </span>
@@ -119,7 +119,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«r5»"
+                        aria-describedby="_r_5_"
                         class="_input_1hel1_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
@@ -154,7 +154,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«r5»"
+                      id="_r_5_"
                     >
                       Show all your rooms in Home, even if they're in a space.
                     </span>
@@ -174,7 +174,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«r9»"
+                        aria-describedby="_r_9_"
                         class="_input_1hel1_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
@@ -208,7 +208,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«r9»"
+                      id="_r_9_"
                     >
                       Group all your rooms that aren't part of a space in one place.
                     </span>
@@ -228,7 +228,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«rd»"
+                        aria-describedby="_r_d_"
                         class="_input_1hel1_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
@@ -274,7 +274,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«rd»"
+                      id="_r_d_"
                     >
                       Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
                     </span>
@@ -341,7 +341,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«rh»"
+                        aria-describedby="_r_h_"
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
@@ -389,7 +389,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«rh»"
+                      id="_r_h_"
                     >
                       Home is useful for getting an overview of everything.
                     </span>
@@ -409,7 +409,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«rl»"
+                        aria-describedby="_r_l_"
                         class="_input_1hel1_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
@@ -444,7 +444,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«rl»"
+                      id="_r_l_"
                     >
                       Show all your rooms in Home, even if they're in a space.
                     </span>
@@ -464,7 +464,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«rp»"
+                        aria-describedby="_r_p_"
                         class="_input_1hel1_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
@@ -498,7 +498,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«rp»"
+                      id="_r_p_"
                     >
                       Group all your rooms that aren't part of a space in one place.
                     </span>
@@ -518,7 +518,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby="«rt»"
+                        aria-describedby="_r_t_"
                         class="_input_1hel1_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
@@ -564,7 +564,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="«rt»"
+                      id="_r_t_"
                     >
                       Group all private video rooms and conferences.
                     </span>
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index c5260609d8..197472b248 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<SpacePanel /> should show all activated MetaSpaces in the correct order 1`] = `
 <DocumentFragment>
   <nav
-    aria-controls="«r2»"
-    aria-describedby="«r2»"
+    aria-controls="_r_2_"
+    aria-describedby="_r_2_"
     aria-haspopup="dialog"
     aria-label="Spaces"
     class="mx_SpacePanel collapsed newUi"
@@ -237,11 +237,11 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Threads"
-        aria-labelledby="«r16»"
+        aria-labelledby="_r_16_"
         class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r14»"
+        id="radix-_r_14_"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -289,7 +289,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     tabindex="0"
   />
   <span
-    aria-owns="«r1j»"
+    aria-owns="_r_1j_"
     data-floating-ui-inert=""
     style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
   />
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index 9e9ab218bc..006cc91a5d 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
 <div
   aria-checked="true"
   aria-disabled="false"
-  aria-labelledby="mx_LabelledToggleSwitch_«rb»"
+  aria-labelledby="mx_LabelledToggleSwitch__r_b_"
   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
   role="switch"
   tabindex="0"
@@ -122,7 +122,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                     class="mx_SettingsFlag_label"
                   >
                     <div
-                      id="mx_LabelledToggleSwitch_«r0»"
+                      id="mx_LabelledToggleSwitch__r_0_"
                     >
                       Preview Space
                     </div>
@@ -130,7 +130,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                   <div
                     aria-checked="true"
                     aria-disabled="false"
-                    aria-labelledby="mx_LabelledToggleSwitch_«r0»"
+                    aria-labelledby="mx_LabelledToggleSwitch__r_0_"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
                     role="switch"
                     tabindex="0"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index c0a64d5589..c79e960608 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
 <div
-  aria-labelledby="radix-«r1m»"
+  aria-labelledby="radix-_r_1m_"
   aria-orientation="vertical"
   class="_menu_1glhz_8"
   data-align="start"
@@ -11,14 +11,14 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-«r1n»"
+  id="radix-_r_1n_"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
 >
   <h3
     class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
-    id="«r1u»"
+    id="_r_1u_"
   >
     Threads activity
   </h3>
@@ -127,7 +127,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 
 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-«r2a»"
+  aria-labelledby="radix-_r_2a_"
   aria-orientation="vertical"
   class="_menu_1glhz_8"
   data-align="start"
@@ -136,14 +136,14 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-«r2b»"
+  id="radix-_r_2b_"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
 >
   <h3
     class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
-    id="«r2i»"
+    id="_r_2i_"
   >
     Threads activity
   </h3>
@@ -161,7 +161,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 
 exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
 <div
-  aria-labelledby="radix-«r2j»"
+  aria-labelledby="radix-_r_2j_"
   aria-orientation="vertical"
   class="_menu_1glhz_8"
   data-align="start"
@@ -170,14 +170,14 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-«r2k»"
+  id="radix-_r_2k_"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
 >
   <h3
     class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
-    id="«r2r»"
+    id="_r_2r_"
   >
     Threads activity
   </h3>
diff --git a/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap b/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap
index 9abf48919c..ae6b805d8f 100644
--- a/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap
+++ b/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`link-tooltip wraps single anchor 1`] = `
     
                 
     <span
-      aria-labelledby="«r0»"
+      aria-labelledby="_r_0_"
       tabindex="0"
     >
       <a
diff --git a/yarn.lock b/yarn.lock
index 3e7a41a306..aea018e1b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3705,10 +3705,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@19.1.9":
-  version "19.1.9"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b"
-  integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==
+"@types/react-dom@19.2.1":
+  version "19.2.1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.1.tgz#2a16d84466e5cbaab97809f3e6f3bded6b5dbac7"
+  integrity sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==
 
 "@types/react-redux@^7.1.20":
   version "7.1.34"
@@ -3725,10 +3725,10 @@
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
   integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
 
-"@types/react@*", "@types/react@19.1.14":
-  version "19.1.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.14.tgz#154e157c014cb02b90201250b009ecad28fbad9f"
-  integrity sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==
+"@types/react@*", "@types/react@19.2.2":
+  version "19.2.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36"
+  integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==
   dependencies:
     csstype "^3.0.2"
 
@@ -11481,11 +11481,11 @@ react-docgen@^8.0.0:
     strip-indent "^4.0.0"
 
 react-dom@^19.0.0:
-  version "19.1.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.1.tgz#2daa9ff7f3ae384aeb30e76d5ee38c046dc89893"
-  integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==
+  version "19.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
+  integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==
   dependencies:
-    scheduler "^0.26.0"
+    scheduler "^0.27.0"
 
 react-focus-lock@^2.5.1:
   version "2.13.6"
@@ -11499,10 +11499,10 @@ react-focus-lock@^2.5.1:
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.3"
 
-react-is@19.1.1, react-is@^17.0.1, react-is@^18.0.0:
-  version "19.1.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.1.tgz#038ebe313cf18e1fd1235d51c87360eb87f7c36a"
-  integrity sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==
+react-is@19.2.0, react-is@^17.0.1, react-is@^18.0.0:
+  version "19.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.0.tgz#ddc3b4a4e0f3336c3847f18b806506388d7b9973"
+  integrity sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -11584,9 +11584,9 @@ react-virtuoso@^4.14.0:
   integrity sha512-NRUF1ak8lY+Tvc6WN9cce59gU+lilzVtOozP+pm9J7iHshLGGjsiAB4rB2qlBPHjFbcXOQpT+7womNHGDUql8w==
 
 react@^19.0.0:
-  version "19.1.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-19.1.1.tgz#06d9149ec5e083a67f9a1e39ce97b06a03b644af"
-  integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==
+  version "19.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5"
+  integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -12027,10 +12027,10 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.26.0:
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337"
-  integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==
+scheduler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
+  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
 
 schema-utils@^3.0.0:
   version "3.3.0"

From 2598e4ea22fd8af586cec3536c1da302c88fbaf5 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 15 Oct 2025 19:19:12 +0530
Subject: [PATCH 3/5] Move view model code to shared components package
 (#31024)

* Remove vm related code from element-web/src

* Add and export view model code from package

* Update imports

* Rewrite vm tests using vitest

* Add github action to run vm tests

* Fix lint errors

* Mvoe tests over to jest

* Try fixing code coverage

* Second attempt at fixing code coverage
---
 jest.config.ts                                      |  1 +
 packages/shared-components/package.json             |  1 -
 packages/shared-components/src/ViewWrapper.tsx      |  4 ++--
 .../audio/AudioPlayerView/AudioPlayerView.test.tsx  |  2 +-
 .../src/audio/AudioPlayerView/AudioPlayerView.tsx   |  2 +-
 .../TextualEventView/TextualEventView.stories.tsx   |  2 +-
 .../TextualEventView/TextualEventView.tsx           |  2 +-
 packages/shared-components/src/index.ts             |  3 +--
 packages/shared-components/src/useViewModel.ts      |  2 +-
 .../src/viewmodel}/BaseViewModel.ts                 |  2 +-
 .../shared-components/src/viewmodel}/Disposables.ts |  0
 .../src/{ => viewmodel}/MockViewModel.ts            |  0
 .../shared-components/src/viewmodel}/Snapshot.ts    |  0
 .../src/{ => viewmodel}/ViewModel.ts                |  0
 .../src/viewmodel}/ViewModelSubscriptions.ts        |  0
 packages/shared-components/src/viewmodel/index.ts   | 13 +++++++++++++
 .../src/viewmodel/tests/Disposables.test.ts         |  2 +-
 .../src/viewmodel/tests/Snapshot.test.ts            |  2 +-
 sonar-project.properties                            |  2 +-
 src/viewmodels/audio/AudioPlayerViewModel.ts        |  2 +-
 src/viewmodels/event-tiles/TextualEventViewModel.ts |  2 +-
 yarn.lock                                           |  2 +-
 22 files changed, 29 insertions(+), 17 deletions(-)
 rename {src/viewmodels/base => packages/shared-components/src/viewmodel}/BaseViewModel.ts (94%)
 rename {src/viewmodels/base => packages/shared-components/src/viewmodel}/Disposables.ts (100%)
 rename packages/shared-components/src/{ => viewmodel}/MockViewModel.ts (100%)
 rename {src/viewmodels/base => packages/shared-components/src/viewmodel}/Snapshot.ts (100%)
 rename packages/shared-components/src/{ => viewmodel}/ViewModel.ts (100%)
 rename {src/viewmodels/base => packages/shared-components/src/viewmodel}/ViewModelSubscriptions.ts (100%)
 create mode 100644 packages/shared-components/src/viewmodel/index.ts
 rename test/viewmodels/base/Disposables-test.ts => packages/shared-components/src/viewmodel/tests/Disposables.test.ts (95%)
 rename test/viewmodels/base/Snapshot-test.ts => packages/shared-components/src/viewmodel/tests/Snapshot.test.ts (95%)

diff --git a/jest.config.ts b/jest.config.ts
index 82f169b9de..e6c29b792d 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -46,6 +46,7 @@ const config: Config = {
     ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
+        "<rootDir>/packages/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
         // not available in that contest. So, turn off coverage instrumentation for it.
         "!<rootDir>/src/utils/SessionLock.ts",
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
index df770b1491..3d68950299 100644
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -54,7 +54,6 @@
         "@storybook/test-runner": "^0.23.0",
         "concurrently": "^9.2.1",
         "eslint": "8",
-        "jest-image-snapshot": "^6.5.1",
         "eslint-plugin-storybook": "^9.1.10",
         "jest-image-snapshot": "^6.5.1",
         "patch-package": "^8.0.1",
diff --git a/packages/shared-components/src/ViewWrapper.tsx b/packages/shared-components/src/ViewWrapper.tsx
index 57b81bd5b9..d0d445ea5c 100644
--- a/packages/shared-components/src/ViewWrapper.tsx
+++ b/packages/shared-components/src/ViewWrapper.tsx
@@ -8,8 +8,8 @@
 import React, { type JSX, useMemo, type ComponentType } from "react";
 import { omitBy, pickBy } from "lodash";
 
-import { MockViewModel } from "./MockViewModel";
-import { type ViewModel } from "./ViewModel";
+import { MockViewModel } from "./viewmodel/MockViewModel";
+import { type ViewModel } from "./viewmodel/ViewModel";
 
 interface ViewWrapperProps<V> {
     /**
diff --git a/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx b/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx
index 3f08eec28c..018b388f6b 100644
--- a/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx
+++ b/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx
@@ -13,7 +13,7 @@ import { fireEvent } from "@testing-library/dom";
 
 import * as stories from "./AudioPlayerView.stories.tsx";
 import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
-import { MockViewModel } from "../../MockViewModel";
+import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
 
 const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
 
diff --git a/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx b/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx
index f963c8b2cf..29fb02ba34 100644
--- a/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx
+++ b/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.tsx
@@ -7,7 +7,7 @@
 
 import React, { type ChangeEventHandler, type JSX, type KeyboardEventHandler, type MouseEventHandler } from "react";
 
-import { type ViewModel } from "../../ViewModel";
+import { type ViewModel } from "../../viewmodel/ViewModel";
 import { useViewModel } from "../../useViewModel";
 import { MediaBody } from "../../message-body/MediaBody";
 import { Flex } from "../../utils/Flex";
diff --git a/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx b/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx
index 836641a84c..0c89ce24d6 100644
--- a/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx
+++ b/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.stories.tsx
@@ -9,7 +9,7 @@ import React from "react";
 import { type Meta, type StoryFn } from "@storybook/react-vite";
 
 import { TextualEventView as TextualEventComponent } from "./TextualEventView";
-import { MockViewModel } from "../../MockViewModel";
+import { MockViewModel } from "../../viewmodel/MockViewModel";
 
 export default {
     title: "Event/TextualEvent",
diff --git a/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.tsx b/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.tsx
index fa18a4c599..3d9e4ac109 100644
--- a/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.tsx
+++ b/packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode, type JSX } from "react";
 
-import { type ViewModel } from "../../ViewModel";
+import { type ViewModel } from "../../viewmodel/ViewModel";
 import { useViewModel } from "../../useViewModel";
 
 export type TextualEventViewSnapshot = {
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index 91bf777cf3..01fb99040b 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -27,7 +27,6 @@ export * from "./utils/DateUtils";
 export * from "./utils/numbers";
 
 // MVVM
+export * from "./viewmodel";
 export * from "./ViewWrapper";
-export type * from "./ViewModel";
 export * from "./useViewModel";
-export * from "./MockViewModel";
diff --git a/packages/shared-components/src/useViewModel.ts b/packages/shared-components/src/useViewModel.ts
index ef7b8ec0da..20c7070bff 100644
--- a/packages/shared-components/src/useViewModel.ts
+++ b/packages/shared-components/src/useViewModel.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { useSyncExternalStore } from "react";
 
-import { type ViewModel } from "./ViewModel";
+import { type ViewModel } from "./viewmodel/ViewModel";
 
 /**
  * A small wrapper around useSyncExternalStore to use a view model in a shared component view
diff --git a/src/viewmodels/base/BaseViewModel.ts b/packages/shared-components/src/viewmodel/BaseViewModel.ts
similarity index 94%
rename from src/viewmodels/base/BaseViewModel.ts
rename to packages/shared-components/src/viewmodel/BaseViewModel.ts
index 1bd58b9196..ffb961d8e0 100644
--- a/src/viewmodels/base/BaseViewModel.ts
+++ b/packages/shared-components/src/viewmodel/BaseViewModel.ts
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type ViewModel } from "../../../packages/shared-components/src/ViewModel";
+import { type ViewModel } from "./ViewModel";
 import { Disposables } from "./Disposables";
 import { Snapshot } from "./Snapshot";
 import { ViewModelSubscriptions } from "./ViewModelSubscriptions";
diff --git a/src/viewmodels/base/Disposables.ts b/packages/shared-components/src/viewmodel/Disposables.ts
similarity index 100%
rename from src/viewmodels/base/Disposables.ts
rename to packages/shared-components/src/viewmodel/Disposables.ts
diff --git a/packages/shared-components/src/MockViewModel.ts b/packages/shared-components/src/viewmodel/MockViewModel.ts
similarity index 100%
rename from packages/shared-components/src/MockViewModel.ts
rename to packages/shared-components/src/viewmodel/MockViewModel.ts
diff --git a/src/viewmodels/base/Snapshot.ts b/packages/shared-components/src/viewmodel/Snapshot.ts
similarity index 100%
rename from src/viewmodels/base/Snapshot.ts
rename to packages/shared-components/src/viewmodel/Snapshot.ts
diff --git a/packages/shared-components/src/ViewModel.ts b/packages/shared-components/src/viewmodel/ViewModel.ts
similarity index 100%
rename from packages/shared-components/src/ViewModel.ts
rename to packages/shared-components/src/viewmodel/ViewModel.ts
diff --git a/src/viewmodels/base/ViewModelSubscriptions.ts b/packages/shared-components/src/viewmodel/ViewModelSubscriptions.ts
similarity index 100%
rename from src/viewmodels/base/ViewModelSubscriptions.ts
rename to packages/shared-components/src/viewmodel/ViewModelSubscriptions.ts
diff --git a/packages/shared-components/src/viewmodel/index.ts b/packages/shared-components/src/viewmodel/index.ts
new file mode 100644
index 0000000000..3699f8dc3f
--- /dev/null
+++ b/packages/shared-components/src/viewmodel/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export * from "./BaseViewModel";
+export * from "./Disposables";
+export * from "./Snapshot";
+export * from "./ViewModelSubscriptions";
+export type * from "./ViewModel";
+export * from "./MockViewModel";
diff --git a/test/viewmodels/base/Disposables-test.ts b/packages/shared-components/src/viewmodel/tests/Disposables.test.ts
similarity index 95%
rename from test/viewmodels/base/Disposables-test.ts
rename to packages/shared-components/src/viewmodel/tests/Disposables.test.ts
index 577374a644..5b71f1871d 100644
--- a/test/viewmodels/base/Disposables-test.ts
+++ b/packages/shared-components/src/viewmodel/tests/Disposables.test.ts
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { EventEmitter } from "events";
 
-import { Disposables } from "../../../src/viewmodels/base/Disposables";
+import { Disposables } from "..";
 
 describe("Disposable", () => {
     it("isDisposed is true after dispose() is called", () => {
diff --git a/test/viewmodels/base/Snapshot-test.ts b/packages/shared-components/src/viewmodel/tests/Snapshot.test.ts
similarity index 95%
rename from test/viewmodels/base/Snapshot-test.ts
rename to packages/shared-components/src/viewmodel/tests/Snapshot.test.ts
index 796caa65ab..82cacfc02e 100644
--- a/test/viewmodels/base/Snapshot-test.ts
+++ b/packages/shared-components/src/viewmodel/tests/Snapshot.test.ts
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { Snapshot } from "../../../src/viewmodels/base/Snapshot";
+import { Snapshot } from "..";
 
 interface TestSnapshot {
     key1: string;
diff --git a/sonar-project.properties b/sonar-project.properties
index e4ce1ea56f..205d82fe6c 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -5,7 +5,7 @@ sonar.organization=element-hq
 #sonar.sourceEncoding=UTF-8
 
 sonar.sources=src,res,packages/shared-components/src
-sonar.tests=test,playwright,src
+sonar.tests=test,playwright,src,packages
 sonar.test.inclusions=test/*,playwright/*,src/**/*.test.*,packages/*/src/**/*.test.*
 sonar.exclusions=__mocks__,docs,element.io,nginx
 
diff --git a/src/viewmodels/audio/AudioPlayerViewModel.ts b/src/viewmodels/audio/AudioPlayerViewModel.ts
index 025265b250..9c8d4c4822 100644
--- a/src/viewmodels/audio/AudioPlayerViewModel.ts
+++ b/src/viewmodels/audio/AudioPlayerViewModel.ts
@@ -17,7 +17,7 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import { percentageOf } from "../../../packages/shared-components/src/utils/numbers";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
-import { BaseViewModel } from "../base/BaseViewModel";
+import { BaseViewModel } from "../../../packages/shared-components/src/viewmodel";
 
 /**
  * The number of seconds to skip when the user presses the left or right arrow keys.
diff --git a/src/viewmodels/event-tiles/TextualEventViewModel.ts b/src/viewmodels/event-tiles/TextualEventViewModel.ts
index e887da82b0..a561dfa90d 100644
--- a/src/viewmodels/event-tiles/TextualEventViewModel.ts
+++ b/src/viewmodels/event-tiles/TextualEventViewModel.ts
@@ -11,7 +11,7 @@ import { type EventTileTypeProps } from "../../events/EventTileFactory";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { textForEvent } from "../../TextForEvent";
 import { type TextualEventViewSnapshot } from "../../../packages/shared-components/src/event-tiles/TextualEventView/TextualEventView";
-import { BaseViewModel } from "../base/BaseViewModel";
+import { BaseViewModel } from "../../../packages/shared-components/src/viewmodel";
 
 export class TextualEventViewModel extends BaseViewModel<TextualEventViewSnapshot, EventTileTypeProps> {
     public constructor(props: EventTileTypeProps) {
diff --git a/yarn.lock b/yarn.lock
index aea018e1b7..11f7d27fdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3999,7 +3999,7 @@
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.40.0.tgz#53c9ca5ea907d91e4515da64f20a82e5586b882c"
   integrity sha512-8LRFLs5PEKYs4lOL7aJ4lL/hGCrvEvOYkCR3JggXYXDVMtX4LmfdlKYucSAe98pCmqAAbLRvlRcR1bTOYvM8ug==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm"
+    "@vector-im/matrix-wysiwyg-wasm" "link:../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm"
 
 "@vitest/expect@3.2.4":
   version "3.2.4"

From c8f1c19517d3c016a0f21831401316c42c5b32a3 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 15 Oct 2025 22:15:49 +0530
Subject: [PATCH 4/5] Add missing dependency (#31034)

---
 packages/shared-components/package.json |  3 +-
 packages/shared-components/yarn.lock    | 43 +++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
index 3d68950299..4fabf2d83c 100644
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -43,7 +43,8 @@
     },
     "dependencies": {
         "matrix-web-i18n": "^3.4.0",
-        "patch-package": "^8.0.1"
+        "patch-package": "^8.0.1",
+        "counterpart": "^0.18.6"
     },
     "devDependencies": {
         "@storybook/addon-a11y": "^9.1.10",
diff --git a/packages/shared-components/yarn.lock b/packages/shared-components/yarn.lock
index b86fbc9ab4..2d5deba73c 100644
--- a/packages/shared-components/yarn.lock
+++ b/packages/shared-components/yarn.lock
@@ -2333,6 +2333,17 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+counterpart@^0.18.6:
+  version "0.18.6"
+  resolved "https://registry.yarnpkg.com/counterpart/-/counterpart-0.18.6.tgz#cf6b60d8ef99a4b44b8bf6445fa99b4bd1b2f9dd"
+  integrity sha512-cAIDAYbC3x8S2DDbvFEJ4TzPtPYXma25/kfAkfmprNLlkPWeX4SdUp1c2xklfphqCU3HnDaivR4R3BrAYf5OMA==
+  dependencies:
+    date-names "^0.1.11"
+    except "^0.1.3"
+    extend "^3.0.0"
+    pluralizers "^0.1.7"
+    sprintf-js "^1.0.3"
+
 create-ecdh@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -2422,6 +2433,11 @@ cwd@^0.10.0:
     find-pkg "^0.1.2"
     fs-exists-sync "^0.1.0"
 
+date-names@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/date-names/-/date-names-0.1.13.tgz#c4358f6f77c8056e2f5ea68fdbb05f0bf1e53bd0"
+  integrity sha512-IxxoeD9tdx8pXVcmqaRlPvrXIsSrSrIZzfzlOkm9u+hyzKp5Wk/odt9O/gd7Ockzy8n/WHeEpTVJ2bF3mMV4LA==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -2870,6 +2886,13 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
+except@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/except/-/except-0.1.3.tgz#98261c91958551536b44482238e9783fb73d292a"
+  integrity sha512-ouwgJavvMOTOfy0RE8NGQFAIoWh8ehJhkuxDyXxngMVTxTq7HGE7gZopZhqKFnu5lZLI+qQdtvJ8n03ehp7RJg==
+  dependencies:
+    indexof "0.0.1"
+
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -2918,6 +2941,11 @@ exsolve@^1.0.7:
   resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.7.tgz#3b74e4c7ca5c5f9a19c3626ca857309fa99f9e9e"
   integrity sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==
 
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -3449,6 +3477,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -4994,6 +5027,11 @@ playwright@^1.14.0:
   optionalDependencies:
     fsevents "2.3.2"
 
+pluralizers@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/pluralizers/-/pluralizers-0.1.7.tgz#8d38dd0a1b660e739b10ab2eab10b684c9d50142"
+  integrity sha512-mw6AejUiCaMQ6uPN9ObjJDTnR5AnBSmnHHy3uVTbxrSFSxO5scfwpTs8Dxyb6T2v7GSulhvOq+pm9y+hXUvtOA==
+
 pngjs@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
@@ -5535,6 +5573,11 @@ spawnd@^5.0.0:
     tree-kill "^1.2.2"
     wait-port "^0.2.9"
 
+sprintf-js@^1.0.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
+  integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"

From 0468876aa0fc0df4206e75681f29c76bb70a1079 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 16 Oct 2025 09:17:46 +0100
Subject: [PATCH 5/5] Move some message utils out to their own file (#31035)

* Move some message utils out to their own file

In another attempt at import cycle breaking

* Also add the file

* Move tests
---
 src/ContentMessages.ts                        |   2 +-
 .../views/rooms/EditMessageComposer.tsx       |   2 +-
 .../views/rooms/SendMessageComposer.tsx       | 103 +---------
 .../views/rooms/VoiceRecordComposerTile.tsx   |   2 +-
 .../rooms/wysiwyg_composer/utils/message.ts   |   2 +-
 src/utils/messages.ts                         | 109 ++++++++++
 .../views/rooms/SendMessageComposer-test.tsx  | 183 +----------------
 test/unit-tests/utils/messages-test.ts        | 194 ++++++++++++++++++
 8 files changed, 310 insertions(+), 287 deletions(-)
 create mode 100644 src/utils/messages.ts
 create mode 100644 test/unit-tests/utils/messages-test.ts

diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts
index c22a6bab33..bf39d9ea1f 100644
--- a/src/ContentMessages.ts
+++ b/src/ContentMessages.ts
@@ -53,7 +53,7 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import UploadFailureDialog from "./components/views/dialogs/UploadFailureDialog";
 import UploadConfirmDialog from "./components/views/dialogs/UploadConfirmDialog";
 import { createThumbnail } from "./utils/image-media";
-import { attachMentions, attachRelation } from "./components/views/rooms/SendMessageComposer";
+import { attachMentions, attachRelation } from "./utils/messages.ts";
 import { doMaybeLocalRoomAction } from "./utils/local-room";
 import { SdkContextClass } from "./contexts/SDKContext";
 import { blobIsAnimated } from "./utils/Image.ts";
diff --git a/src/components/views/rooms/EditMessageComposer.tsx b/src/components/views/rooms/EditMessageComposer.tsx
index 92d60b7571..f6677286b8 100644
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@@ -43,7 +43,7 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
 import { editorRoomKey, editorStateKey } from "../../../Editing";
 import type DocumentOffset from "../../../editor/offset";
-import { attachMentions, attachRelation } from "./SendMessageComposer";
+import { attachMentions, attachRelation } from "../../../utils/messages";
 import { filterBoolean } from "../../../utils/arrays";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx
index aae9cfd0d0..51b14168df 100644
--- a/src/components/views/rooms/SendMessageComposer.tsx
+++ b/src/components/views/rooms/SendMessageComposer.tsx
@@ -8,10 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { createRef, type KeyboardEvent, type SyntheticEvent } from "react";
 import {
-    type IContent,
     type MatrixEvent,
     type IEventRelation,
-    type IMentions,
     type Room,
     EventType,
     MsgType,
@@ -35,7 +33,7 @@ import {
     unescapeMessage,
 } from "../../../editor/serialize";
 import BasicMessageComposer, { REGEX_EMOTICON } from "./BasicMessageComposer";
-import { CommandPartCreator, type Part, type PartCreator, type SerializedPart, Type } from "../../../editor/parts";
+import { CommandPartCreator, type Part, type PartCreator, type SerializedPart } from "../../../editor/parts";
 import { findEditableEvent } from "../../../utils/EventUtils";
 import SendHistoryManager from "../../../SendHistoryManager";
 import { CommandCategories } from "../../../SlashCommands";
@@ -61,108 +59,11 @@ import { type Caret } from "../../../editor/caret";
 import { type IDiff } from "../../../editor/diff";
 import { getBlobSafeMimeType } from "../../../utils/blobs";
 import { EMOJI_REGEX } from "../../../HtmlUtils";
+import { attachMentions, attachRelation } from "../../../utils/messages";
 
 // The prefix used when persisting editor drafts to localstorage.
 export const EDITOR_STATE_STORAGE_PREFIX = "mx_cider_state_";
 
-/**
- * Build the mentions information based on the editor model (and any related events):
- *
- * 1. Search the model parts for room or user pills and fill in the mentions object.
- * 2. If this is a reply to another event, include any user mentions from that
- *    (but do not include a room mention).
- *
- * @param sender - The Matrix ID of the user sending the event.
- * @param content - The event content.
- * @param model - The editor model to search for mentions, null if there is no editor.
- * @param replyToEvent - The event being replied to or undefined if it is not a reply.
- * @param editedContent - The content of the parent event being edited.
- */
-export function attachMentions(
-    sender: string,
-    content: IContent,
-    model: EditorModel | null,
-    replyToEvent: MatrixEvent | undefined,
-    editedContent: IContent | null = null,
-): void {
-    // We always attach the mentions even if the home server doesn't yet support
-    // intentional mentions. This is safe because m.mentions is an additive change
-    // that should simply be ignored by incapable home servers.
-
-    // The mentions property *always* gets included to disable legacy push rules.
-    const mentions: IMentions = (content["m.mentions"] = {});
-
-    const userMentions = new Set<string>();
-    let roomMention = false;
-
-    // If there's a reply, initialize the mentioned users as the sender of that event.
-    if (replyToEvent) {
-        userMentions.add(replyToEvent.sender!.userId);
-    }
-
-    // If user provided content is available, check to see if any users are mentioned.
-    if (model) {
-        // Add any mentioned users in the current content.
-        for (const part of model.parts) {
-            if (part.type === Type.UserPill) {
-                userMentions.add(part.resourceId);
-            } else if (part.type === Type.AtRoomPill) {
-                roomMention = true;
-            }
-        }
-    }
-
-    // Ensure the *current* user isn't listed in the mentioned users.
-    userMentions.delete(sender);
-
-    // Finally, if this event is editing a previous event, only include users who
-    // were not previously mentioned and a room mention if the previous event was
-    // not a room mention.
-    if (editedContent) {
-        // First, the new event content gets the *full* set of users.
-        const newContent = content["m.new_content"];
-        const newMentions: IMentions = (newContent["m.mentions"] = {});
-
-        // Only include the users/room if there is any content.
-        if (userMentions.size) {
-            newMentions.user_ids = [...userMentions];
-        }
-        if (roomMention) {
-            newMentions.room = true;
-        }
-
-        // Fetch the mentions from the original event and remove any previously
-        // mentioned users.
-        const prevMentions = editedContent["m.mentions"];
-        if (Array.isArray(prevMentions?.user_ids)) {
-            prevMentions!.user_ids.forEach((userId) => userMentions.delete(userId));
-        }
-
-        // If the original event mentioned the room, nothing to do here.
-        if (prevMentions?.room) {
-            roomMention = false;
-        }
-    }
-
-    // Only include the users/room if there is any content.
-    if (userMentions.size) {
-        mentions.user_ids = [...userMentions];
-    }
-    if (roomMention) {
-        mentions.room = true;
-    }
-}
-
-// Merges favouring the given relation
-export function attachRelation(content: IContent, relation?: IEventRelation): void {
-    if (relation) {
-        content["m.relates_to"] = {
-            ...(content["m.relates_to"] || {}),
-            ...relation,
-        };
-    }
-}
-
 // exported for tests
 export function createMessageContent(
     sender: string,
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index b329cd84ea..9c13f1c872 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -29,7 +29,7 @@ import InlineSpinner from "../elements/InlineSpinner";
 import { PlaybackManager } from "../../../audio/PlaybackManager";
 import { doMaybeLocalRoomAction } from "../../../utils/local-room";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { attachMentions, attachRelation } from "./SendMessageComposer";
+import { attachMentions, attachRelation } from "../../../utils/messages";
 import { addReplyToMessageContent } from "../../../utils/Reply";
 import RoomContext from "../../../contexts/RoomContext";
 import { type IUpload, type VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
diff --git a/src/components/views/rooms/wysiwyg_composer/utils/message.ts b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
index b794ba6fe4..8b9791d4ff 100644
--- a/src/components/views/rooms/wysiwyg_composer/utils/message.ts
+++ b/src/components/views/rooms/wysiwyg_composer/utils/message.ts
@@ -33,7 +33,7 @@ import { CommandCategories, getCommand } from "../../../../../SlashCommands";
 import { runSlashCommand, shouldSendAnyway } from "../../../../../editor/commands";
 import { Action } from "../../../../../dispatcher/actions";
 import { addReplyToMessageContent } from "../../../../../utils/Reply";
-import { attachRelation } from "../../SendMessageComposer";
+import { attachRelation } from "../../../../../utils/messages";
 
 export interface SendMessageParams {
     mxClient: MatrixClient;
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
new file mode 100644
index 0000000000..b6040b536b
--- /dev/null
+++ b/src/utils/messages.ts
@@ -0,0 +1,109 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MatrixEvent, type IContent, type IMentions, type IEventRelation } from "matrix-js-sdk/src/matrix";
+
+import type EditorModel from "../editor/model";
+import { Type } from "../editor/parts";
+
+/**
+ * Build the mentions information based on the editor model (and any related events):
+ *
+ * 1. Search the model parts for room or user pills and fill in the mentions object.
+ * 2. If this is a reply to another event, include any user mentions from that
+ *    (but do not include a room mention).
+ *
+ * @param sender - The Matrix ID of the user sending the event.
+ * @param content - The event content.
+ * @param model - The editor model to search for mentions, null if there is no editor.
+ * @param replyToEvent - The event being replied to or undefined if it is not a reply.
+ * @param editedContent - The content of the parent event being edited.
+ */
+export function attachMentions(
+    sender: string,
+    content: IContent,
+    model: EditorModel | null,
+    replyToEvent: MatrixEvent | undefined,
+    editedContent: IContent | null = null,
+): void {
+    // We always attach the mentions even if the home server doesn't yet support
+    // intentional mentions. This is safe because m.mentions is an additive change
+    // that should simply be ignored by incapable home servers.
+
+    // The mentions property *always* gets included to disable legacy push rules.
+    const mentions: IMentions = (content["m.mentions"] = {});
+
+    const userMentions = new Set<string>();
+    let roomMention = false;
+
+    // If there's a reply, initialize the mentioned users as the sender of that event.
+    if (replyToEvent) {
+        userMentions.add(replyToEvent.sender!.userId);
+    }
+
+    // If user provided content is available, check to see if any users are mentioned.
+    if (model) {
+        // Add any mentioned users in the current content.
+        for (const part of model.parts) {
+            if (part.type === Type.UserPill) {
+                userMentions.add(part.resourceId);
+            } else if (part.type === Type.AtRoomPill) {
+                roomMention = true;
+            }
+        }
+    }
+
+    // Ensure the *current* user isn't listed in the mentioned users.
+    userMentions.delete(sender);
+
+    // Finally, if this event is editing a previous event, only include users who
+    // were not previously mentioned and a room mention if the previous event was
+    // not a room mention.
+    if (editedContent) {
+        // First, the new event content gets the *full* set of users.
+        const newContent = content["m.new_content"];
+        const newMentions: IMentions = (newContent["m.mentions"] = {});
+
+        // Only include the users/room if there is any content.
+        if (userMentions.size) {
+            newMentions.user_ids = [...userMentions];
+        }
+        if (roomMention) {
+            newMentions.room = true;
+        }
+
+        // Fetch the mentions from the original event and remove any previously
+        // mentioned users.
+        const prevMentions = editedContent["m.mentions"];
+        if (Array.isArray(prevMentions?.user_ids)) {
+            prevMentions!.user_ids.forEach((userId) => userMentions.delete(userId));
+        }
+
+        // If the original event mentioned the room, nothing to do here.
+        if (prevMentions?.room) {
+            roomMention = false;
+        }
+    }
+
+    // Only include the users/room if there is any content.
+    if (userMentions.size) {
+        mentions.user_ids = [...userMentions];
+    }
+    if (roomMention) {
+        mentions.room = true;
+    }
+}
+
+// Merges favouring the given relation
+export function attachRelation(content: IContent, relation?: IEventRelation): void {
+    if (relation) {
+        content["m.relates_to"] = {
+            ...(content["m.relates_to"] || {}),
+            ...relation,
+        };
+    }
+}
diff --git a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
index 412065353d..685d4f5b5c 100644
--- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@@ -8,12 +8,11 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { fireEvent, render, waitFor } from "jest-matrix-react";
-import { type IContent, type MatrixClient, MsgType } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, MsgType } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 
 import SendMessageComposer, {
-    attachMentions,
     createMessageContent,
     isQuickReaction,
 } from "../../../../../src/components/views/rooms/SendMessageComposer";
@@ -157,186 +156,6 @@ describe("<SendMessageComposer/>", () => {
         });
     });
 
-    describe("attachMentions", () => {
-        const partsCreator = createPartCreator();
-
-        it("no mentions", () => {
-            const model = new EditorModel([], partsCreator);
-            const content: IContent = {};
-            attachMentions("@alice:test", content, model, undefined);
-            expect(content).toEqual({
-                "m.mentions": {},
-            });
-        });
-
-        it("test user mentions", () => {
-            const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
-            const content: IContent = {};
-            attachMentions("@alice:test", content, model, undefined);
-            expect(content).toEqual({
-                "m.mentions": { user_ids: ["@bob:test"] },
-            });
-        });
-
-        it("test reply", () => {
-            // Replying to an event adds the sender to the list of mentioned users.
-            const model = new EditorModel([], partsCreator);
-            let replyToEvent = mkEvent({
-                type: "m.room.message",
-                user: "@bob:test",
-                room: "!abc:test",
-                content: { "m.mentions": {} },
-                event: true,
-            });
-            let content: IContent = {};
-            attachMentions("@alice:test", content, model, replyToEvent);
-            expect(content).toEqual({
-                "m.mentions": { user_ids: ["@bob:test"] },
-            });
-
-            // It no longer adds any other mentioned users
-            replyToEvent = mkEvent({
-                type: "m.room.message",
-                user: "@bob:test",
-                room: "!abc:test",
-                content: { "m.mentions": { user_ids: ["@alice:test", "@charlie:test"] } },
-                event: true,
-            });
-            content = {};
-            attachMentions("@alice:test", content, model, replyToEvent);
-            expect(content).toEqual({
-                "m.mentions": { user_ids: ["@bob:test"] },
-            });
-        });
-
-        it("test room mention", () => {
-            const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
-            const content: IContent = {};
-            attachMentions("@alice:test", content, model, undefined);
-            expect(content).toEqual({
-                "m.mentions": { room: true },
-            });
-        });
-
-        it("test reply to room mention", () => {
-            // Replying to a room mention shouldn't automatically be a room mention.
-            const model = new EditorModel([], partsCreator);
-            const replyToEvent = mkEvent({
-                type: "m.room.message",
-                user: "@alice:test",
-                room: "!abc:test",
-                content: { "m.mentions": { room: true } },
-                event: true,
-            });
-            const content: IContent = {};
-            attachMentions("@alice:test", content, model, replyToEvent);
-            expect(content).toEqual({
-                "m.mentions": {},
-            });
-        });
-
-        it("test broken mentions", () => {
-            // Replying to a room mention shouldn't automatically be a room mention.
-            const model = new EditorModel([], partsCreator);
-            const replyToEvent = mkEvent({
-                type: "m.room.message",
-                user: "@alice:test",
-                room: "!abc:test",
-                // @ts-ignore - Purposefully testing invalid data.
-                content: { "m.mentions": { user_ids: "@bob:test" } },
-                event: true,
-            });
-            const content: IContent = {};
-            attachMentions("@alice:test", content, model, replyToEvent);
-            expect(content).toEqual({
-                "m.mentions": {},
-            });
-        });
-
-        describe("attachMentions with edit", () => {
-            it("no mentions", () => {
-                const model = new EditorModel([], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                const prevContent: IContent = {};
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": {},
-                    "m.new_content": { "m.mentions": {} },
-                });
-            });
-
-            it("mentions do not propagate", () => {
-                const model = new EditorModel([], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                const prevContent: IContent = {
-                    "m.mentions": { user_ids: ["@bob:test"], room: true },
-                };
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": {},
-                    "m.new_content": { "m.mentions": {} },
-                });
-            });
-
-            it("test user mentions", () => {
-                const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                const prevContent: IContent = {};
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": { user_ids: ["@bob:test"] },
-                    "m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
-                });
-            });
-
-            it("test prev user mentions", () => {
-                const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                const prevContent: IContent = { "m.mentions": { user_ids: ["@bob:test"] } };
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": {},
-                    "m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
-                });
-            });
-
-            it("test room mention", () => {
-                const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                const prevContent: IContent = {};
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": { room: true },
-                    "m.new_content": { "m.mentions": { room: true } },
-                });
-            });
-
-            it("test prev room mention", () => {
-                const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                const prevContent: IContent = { "m.mentions": { room: true } };
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": {},
-                    "m.new_content": { "m.mentions": { room: true } },
-                });
-            });
-
-            it("test broken mentions", () => {
-                // Replying to a room mention shouldn't automatically be a room mention.
-                const model = new EditorModel([], partsCreator);
-                const content: IContent = { "m.new_content": {} };
-                // @ts-ignore - Purposefully testing invalid data.
-                const prevContent: IContent = { "m.mentions": { user_ids: "@bob:test" } };
-                attachMentions("@alice:test", content, model, undefined, prevContent);
-                expect(content).toEqual({
-                    "m.mentions": {},
-                    "m.new_content": { "m.mentions": {} },
-                });
-            });
-        });
-    });
-
     describe("functions correctly mounted", () => {
         const mockClient = createTestClient();
         jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
diff --git a/test/unit-tests/utils/messages-test.ts b/test/unit-tests/utils/messages-test.ts
new file mode 100644
index 0000000000..12d0242e3c
--- /dev/null
+++ b/test/unit-tests/utils/messages-test.ts
@@ -0,0 +1,194 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type IContent } from "matrix-js-sdk/src/matrix";
+
+import { attachMentions } from "../../../src/utils/messages";
+import EditorModel from "../../../src/editor/model";
+import { mkEvent } from "../../test-utils";
+import { createPartCreator } from "../editor/mock";
+
+describe("attachMentions", () => {
+    const partsCreator = createPartCreator();
+
+    it("no mentions", () => {
+        const model = new EditorModel([], partsCreator);
+        const content: IContent = {};
+        attachMentions("@alice:test", content, model, undefined);
+        expect(content).toEqual({
+            "m.mentions": {},
+        });
+    });
+
+    it("test user mentions", () => {
+        const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
+        const content: IContent = {};
+        attachMentions("@alice:test", content, model, undefined);
+        expect(content).toEqual({
+            "m.mentions": { user_ids: ["@bob:test"] },
+        });
+    });
+
+    it("test reply", () => {
+        // Replying to an event adds the sender to the list of mentioned users.
+        const model = new EditorModel([], partsCreator);
+        let replyToEvent = mkEvent({
+            type: "m.room.message",
+            user: "@bob:test",
+            room: "!abc:test",
+            content: { "m.mentions": {} },
+            event: true,
+        });
+        let content: IContent = {};
+        attachMentions("@alice:test", content, model, replyToEvent);
+        expect(content).toEqual({
+            "m.mentions": { user_ids: ["@bob:test"] },
+        });
+
+        // It no longer adds any other mentioned users
+        replyToEvent = mkEvent({
+            type: "m.room.message",
+            user: "@bob:test",
+            room: "!abc:test",
+            content: { "m.mentions": { user_ids: ["@alice:test", "@charlie:test"] } },
+            event: true,
+        });
+        content = {};
+        attachMentions("@alice:test", content, model, replyToEvent);
+        expect(content).toEqual({
+            "m.mentions": { user_ids: ["@bob:test"] },
+        });
+    });
+
+    it("test room mention", () => {
+        const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
+        const content: IContent = {};
+        attachMentions("@alice:test", content, model, undefined);
+        expect(content).toEqual({
+            "m.mentions": { room: true },
+        });
+    });
+
+    it("test reply to room mention", () => {
+        // Replying to a room mention shouldn't automatically be a room mention.
+        const model = new EditorModel([], partsCreator);
+        const replyToEvent = mkEvent({
+            type: "m.room.message",
+            user: "@alice:test",
+            room: "!abc:test",
+            content: { "m.mentions": { room: true } },
+            event: true,
+        });
+        const content: IContent = {};
+        attachMentions("@alice:test", content, model, replyToEvent);
+        expect(content).toEqual({
+            "m.mentions": {},
+        });
+    });
+
+    it("test broken mentions", () => {
+        // Replying to a room mention shouldn't automatically be a room mention.
+        const model = new EditorModel([], partsCreator);
+        const replyToEvent = mkEvent({
+            type: "m.room.message",
+            user: "@alice:test",
+            room: "!abc:test",
+            // @ts-ignore - Purposefully testing invalid data.
+            content: { "m.mentions": { user_ids: "@bob:test" } },
+            event: true,
+        });
+        const content: IContent = {};
+        attachMentions("@alice:test", content, model, replyToEvent);
+        expect(content).toEqual({
+            "m.mentions": {},
+        });
+    });
+
+    describe("attachMentions with edit", () => {
+        it("no mentions", () => {
+            const model = new EditorModel([], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            const prevContent: IContent = {};
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": {},
+                "m.new_content": { "m.mentions": {} },
+            });
+        });
+
+        it("mentions do not propagate", () => {
+            const model = new EditorModel([], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            const prevContent: IContent = {
+                "m.mentions": { user_ids: ["@bob:test"], room: true },
+            };
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": {},
+                "m.new_content": { "m.mentions": {} },
+            });
+        });
+
+        it("test user mentions", () => {
+            const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            const prevContent: IContent = {};
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": { user_ids: ["@bob:test"] },
+                "m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
+            });
+        });
+
+        it("test prev user mentions", () => {
+            const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            const prevContent: IContent = { "m.mentions": { user_ids: ["@bob:test"] } };
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": {},
+                "m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
+            });
+        });
+
+        it("test room mention", () => {
+            const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            const prevContent: IContent = {};
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": { room: true },
+                "m.new_content": { "m.mentions": { room: true } },
+            });
+        });
+
+        it("test prev room mention", () => {
+            const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            const prevContent: IContent = { "m.mentions": { room: true } };
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": {},
+                "m.new_content": { "m.mentions": { room: true } },
+            });
+        });
+
+        it("test broken mentions", () => {
+            // Replying to a room mention shouldn't automatically be a room mention.
+            const model = new EditorModel([], partsCreator);
+            const content: IContent = { "m.new_content": {} };
+            // @ts-ignore - Purposefully testing invalid data.
+            const prevContent: IContent = { "m.mentions": { user_ids: "@bob:test" } };
+            attachMentions("@alice:test", content, model, undefined, prevContent);
+            expect(content).toEqual({
+                "m.mentions": {},
+                "m.new_content": { "m.mentions": {} },
+            });
+        });
+    });
+});