Update react monorepo (#29765)

* Update react monorepo

* Update snapshots

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

* Iterate

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

@@ -68,10 +68,10 @@
         "postinstall": "patch-package"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.0.0",
+        "**/pretty-format/react-is": "19.1.0",
         "@playwright/test": "1.51.1",
-        "@types/react": "19.0.10",
+        "@types/react": "19.1.1",
-        "@types/react-dom": "19.0.4",
+        "@types/react-dom": "19.1.2",
         "oidc-client-ts": "3.2.0",
         "jwt-decode": "4.0.0",
         "caniuse-lite": "1.0.30001713",
@@ -211,9 +211,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.0.10",
+        "@types/react": "19.1.1",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.0.4",
+        "@types/react-dom": "19.1.2",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.15.0",
         "@types/semver": "^7.5.8",

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="«r0»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -58,7 +58,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
-            aria-labelledby=":rg4:"
+            aria-labelledby="«rg4»"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -74,7 +74,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       <button
         aria-disabled="false"
         aria-label="Voice call"
-        aria-labelledby=":rg9:"
+        aria-labelledby="«rg9»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -99,7 +99,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby=":rge:"
+        aria-labelledby="«rge»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -125,7 +125,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby=":rgj:"
+        aria-labelledby="«rgj»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -154,7 +154,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
       >
         <div
           aria-label="2 members"
-          aria-labelledby=":rgo:"
+          aria-labelledby="«rgo»"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -273,7 +273,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
-            aria-labelledby=":rh2:"
+            aria-labelledby="«rh2»"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -289,7 +289,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       <button
         aria-disabled="false"
         aria-label="Voice call"
-        aria-labelledby=":rh7:"
+        aria-labelledby="«rh7»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -314,7 +314,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby=":rhc:"
+        aria-labelledby="«rhc»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -340,7 +340,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby=":rhh:"
+        aria-labelledby="«rhh»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -369,7 +369,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       >
         <div
           aria-label="2 members"
-          aria-labelledby=":rhm:"
+          aria-labelledby="«rhm»"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -573,7 +573,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
-            aria-labelledby=":rbo:"
+            aria-labelledby="«rbo»"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -589,7 +589,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       <button
         aria-disabled="false"
         aria-label="Voice call"
-        aria-labelledby=":rbt:"
+        aria-labelledby="«rbt»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -614,7 +614,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby=":rc2:"
+        aria-labelledby="«rc2»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -640,7 +640,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby=":rc7:"
+        aria-labelledby="«rc7»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -669,7 +669,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       >
         <div
           aria-label="2 members"
-          aria-labelledby=":rcc:"
+          aria-labelledby="«rcc»"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -950,7 +950,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
-            aria-labelledby=":rdu:"
+            aria-labelledby="«rdu»"
             fill="currentColor"
             height="1em"
             viewBox="0 0 24 24"
@@ -966,7 +966,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       <button
         aria-disabled="false"
         aria-label="Voice call"
-        aria-labelledby=":re3:"
+        aria-labelledby="«re3»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -991,7 +991,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       </button>
       <button
         aria-label="Threads"
-        aria-labelledby=":re8:"
+        aria-labelledby="«re8»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -1017,7 +1017,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       </button>
       <button
         aria-label="Room info"
-        aria-labelledby=":red:"
+        aria-labelledby="«red»"
         class="_icon-button_m2erp_8"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -1046,7 +1046,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       >
         <div
           aria-label="2 members"
-          aria-labelledby=":rei:"
+          aria-labelledby="«rei»"
           class="mx_AccessibleButton mx_FacePile"
           role="button"
           tabindex="0"
@@ -1408,7 +1408,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
             >
               <svg
-                aria-labelledby=":r2c:"
+                aria-labelledby="«r2c»"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1424,7 +1424,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-disabled="true"
             aria-label="There's no one here to call"
-            aria-labelledby=":r2h:"
+            aria-labelledby="«r2h»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -1449,7 +1449,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby=":r2m:"
+            aria-labelledby="«r2m»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -1475,7 +1475,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby=":r2r:"
+            aria-labelledby="«r2r»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -1504,7 +1504,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           >
             <div
               aria-label="0 members"
-              aria-labelledby=":r30:"
+              aria-labelledby="«r30»"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1616,7 +1616,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
             >
               <svg
-                aria-labelledby=":r2c:"
+                aria-labelledby="«r2c»"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1632,7 +1632,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-disabled="true"
             aria-label="There's no one here to call"
-            aria-labelledby=":r2h:"
+            aria-labelledby="«r2h»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -1657,7 +1657,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby=":r2m:"
+            aria-labelledby="«r2m»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -1683,7 +1683,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby=":r2r:"
+            aria-labelledby="«r2r»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -1712,7 +1712,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           >
             <div
               aria-label="0 members"
-              aria-labelledby=":r30:"
+              aria-labelledby="«r30»"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1780,7 +1780,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                   tabindex="0"
                 >
                   <div
-                    aria-labelledby=":r3e:"
+                    aria-labelledby="«r3e»"
                     class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
                   />
                 </span>
@@ -1986,7 +1986,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Chat"
-            aria-labelledby=":r7c:"
+            aria-labelledby="«r7c»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -2012,7 +2012,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby=":r7h:"
+            aria-labelledby="«r7h»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -2038,7 +2038,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby=":r7m:"
+            aria-labelledby="«r7m»"
             class="_icon-button_m2erp_8"
             role="button"
             style="--cpd-icon-button-size: 32px;"
@@ -2067,7 +2067,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           >
             <div
               aria-label="0 members"
-              aria-labelledby=":r7r:"
+              aria-labelledby="«r7r»"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -2140,7 +2140,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 </p>
               </div>
               <button
-                aria-labelledby=":r84:"
+                aria-labelledby="«r84»"
                 class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
                 data-testid="base-card-close-button"
                 role="button"

test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -58,7 +58,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
     role="tree"
   >
     <li
-      aria-labelledby=":r8:"
+      aria-labelledby="«r8»"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -88,7 +88,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id=":r8:"
+              id="«r8»"
             >
               Unnamed Room
             </span>
@@ -122,7 +122,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby=":r8:"
+                    aria-labelledby="«r8»"
                     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="«rc»"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -186,7 +186,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id=":rc:"
+              id="«rc»"
             >
               Unnamed Room
             </span>
@@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby=":rc:"
+                    aria-labelledby="«rc»"
                     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="«rg»"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -284,7 +284,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id=":rg:"
+              id="«rg»"
             >
               Knock room
             </span>
@@ -318,7 +318,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby=":rg:"
+                    aria-labelledby="«rg»"
                     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="«rk»"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -383,7 +383,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id=":rk:"
+              id="«rk»"
             >
               Nested space
             </span>
@@ -417,7 +417,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-labelledby=":rk:"
+                    aria-labelledby="«rk»"
                     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="«ro»"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -488,7 +488,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id=":ro:"
+              id="«ro»"
             >
               Nested room
             </span>
@@ -510,7 +510,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <span
-            aria-labelledby=":rp:"
+            aria-labelledby="«rp»"
             tabindex="0"
           >
             <form
@@ -526,7 +526,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                     class="_container_1hel1_10"
                   >
                     <input
-                      aria-labelledby=":ro:"
+                      aria-labelledby="«ro»"
                       class="_input_1hel1_18"
                       disabled=""
                       id="checkbox_jWVJIPauy1"

test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap

@@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
     class="mx_ThreadPanelHeader"
   >
     <button
-      aria-labelledby=":r0:"
+      aria-labelledby="«r0»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 28px;"
@@ -44,7 +44,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
     class="mx_ThreadPanelHeader"
   >
     <button
-      aria-labelledby=":r6:"
+      aria-labelledby="«r6»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 28px;"

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="«r0»"
       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="«r6»"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
       tabindex="0"
     />

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="«r0»"
       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="«r6»"
       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="«rc»"
       class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
       style="width: 32px; height: 32px;"
       tabindex="0"

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="«r0»"
             data-testid="open-location-in-osm"
             href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
             rel="noreferrer noopener"

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="«r8»"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"

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="«r0»"
     data-testid="open-location-in-osm"
     href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
     rel="noreferrer noopener"

test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap

@@ -37,22 +37,22 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_:r7:"
+            id="mx_LabelledToggleSwitch_«r7»"
           >
             Ignore user
           </div>
           <span
             class="mx_Caption"
-            id="mx_LabelledToggleSwitch_:r7:_caption"
+            id="mx_LabelledToggleSwitch_«r7»_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_«r7»_caption"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_:r7:"
+          aria-labelledby="mx_LabelledToggleSwitch_«r7»"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"
@@ -69,22 +69,22 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_:r8:"
+            id="mx_LabelledToggleSwitch_«r8»"
           >
             Report room
           </div>
           <span
             class="mx_Caption"
-            id="mx_LabelledToggleSwitch_:r8:_caption"
+            id="mx_LabelledToggleSwitch_«r8»_caption"
           >
             Report this room to your account provider.
           </span>
         </span>
         <div
           aria-checked="true"
-          aria-describedby="mx_LabelledToggleSwitch_:r8:_caption"
+          aria-describedby="mx_LabelledToggleSwitch_«r8»_caption"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_:r8:"
+          aria-labelledby="mx_LabelledToggleSwitch_«r8»"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"

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

@@ -198,7 +198,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-:r4:"
+              for="radix-«r4»"
             >
               Element Call URL
             </label>
@@ -207,7 +207,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             >
               <input
                 class="_control_sqdq4_10"
-                id="radix-:r4:"
+                id="radix-«r4»"
                 name="input"
                 title=""
                 value=""

test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -75,7 +75,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                   class="_container_1hel1_10"
                 >
                   <input
-                    aria-describedby=":r5:"
+                    aria-describedby="«r5»"
                     class="_input_1hel1_18"
                     id="checkbox_vY7Q4uEh9K"
                     type="checkbox"
@@ -125,7 +125,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 </label>
                 <span
                   class="_message_19upo_85 _help-message_19upo_91"
-                  id=":r5:"
+                  id="«r5»"
                 >
                   0 members
                 </span>

test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap

@@ -43,7 +43,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         />
         <span
           class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-:r8:"
+          id="radix-«r8»"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
         </span>
@@ -71,7 +71,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           class="mx_SettingsFlag_label"
         >
           <div
-            id="mx_LabelledToggleSwitch_:r9:"
+            id="mx_LabelledToggleSwitch_«r9»"
           >
             Leave room
           </div>
@@ -79,7 +79,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
         <div
           aria-checked="false"
           aria-disabled="false"
-          aria-labelledby="mx_LabelledToggleSwitch_:r9:"
+          aria-labelledby="mx_LabelledToggleSwitch_«r9»"
           class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
           role="switch"
           tabindex="0"

test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -50,7 +50,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
           class="mx_StyledRadioButton_content"
         >
           <span
-            aria-labelledby=":r0:"
+            aria-labelledby="«r0»"
             class="mx_Login_underlinedServerName"
             tabindex="0"
           >

test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -30,7 +30,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           />
         </div>
         <button
-          aria-labelledby=":r0:"
+          aria-labelledby="«r0»"
           class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
           data-testid="base-card-close-button"
           role="button"
@@ -336,8 +336,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby=":r2j:"
+                aria-describedby="«r2j»"
-                aria-labelledby=":r2i:"
+                aria-labelledby="«r2i»"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <svg

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="«r0»"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"

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="«r2»"
     class="mx_InfoTooltip"
     tabindex="0"
   >

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="«r4»"
               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="«r4»"
           >
             this is a byline
           </span>

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-describedby="«r1»"
-    aria-labelledby=":r0:"
+    aria-labelledby="«r0»"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"

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-«r0»"
       >
         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-«r0»"
           name="input"
           title=""
           value=""

test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -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_«r0»"
       >
         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_«r0»"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"

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="«ri»"
       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="«ru»"
       class="mx_MLocationBody_map"
     >
       <div

test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -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="«ra»"
               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="«rf»"
               class="mx_PollListItem_content"
             >
               <span>

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="«r0»"
         class="mx_PollListItem_content"
       >
         <span>

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="«r0»"
         class="mx_PollListItemEnded_content"
       >
         <div

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="«r0»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"

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="«r0»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -119,7 +119,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby=":r6:"
+        aria-labelledby="«r6»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"

test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

@@ -19,7 +19,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
         </p>
       </div>
       <button
-        aria-labelledby=":re:"
+        aria-labelledby="«re»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -100,7 +100,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby=":rk:"
+        aria-labelledby="«rk»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -157,7 +157,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby=":rq:"
+                aria-labelledby="«rq»"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
@@ -169,7 +169,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 aria-label="Open menu"
                 class="_icon-button_m2erp_8"
                 data-state="closed"
-                id="radix-:rv:"
+                id="radix-«rv»"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -235,7 +235,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby=":r11:"
+                aria-labelledby="«r11»"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
@@ -247,7 +247,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 aria-label="Open menu"
                 class="_icon-button_m2erp_8"
                 data-state="closed"
-                id="radix-:r16:"
+                id="radix-«r16»"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -321,7 +321,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby=":rt2:"
+        aria-labelledby="«rt2»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -378,7 +378,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby=":rt8:"
+                aria-labelledby="«rt8»"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
@@ -390,7 +390,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 aria-label="Open menu"
                 class="_icon-button_m2erp_8"
                 data-state="closed"
-                id="radix-:rtd:"
+                id="radix-«rtd»"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -456,7 +456,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby=":rtf:"
+                aria-labelledby="«rtf»"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
@@ -468,7 +468,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 aria-label="Open menu"
                 class="_icon-button_m2erp_8"
                 data-state="closed"
-                id="radix-:rtk:"
+                id="radix-«rtk»"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby=":rm:"
+        aria-labelledby="«rm»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -189,7 +189,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id=":rr:"
+              id="«rr»"
               type="checkbox"
             />
             <div
@@ -711,7 +711,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby=":r0:"
+        aria-labelledby="«r0»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -848,7 +848,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id=":r5:"
+              id="«r5»"
               type="checkbox"
             />
             <div
@@ -1370,7 +1370,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby=":rb:"
+        aria-labelledby="«rb»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -1544,7 +1544,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id=":rg:"
+              id="«rg»"
               type="checkbox"
             />
             <div

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=":r6i:"
+        aria-labelledby="«r6i»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -305,7 +305,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         </p>
       </div>
       <button
-        aria-labelledby=":r6s:"
+        aria-labelledby="«r6s»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"

test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap

@@ -55,7 +55,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
         style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
       >
         <svg
-          aria-labelledby=":r1c8:"
+          aria-labelledby="«r1c8»"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -71,7 +71,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-disabled="true"
       aria-label="There's no one here to call"
-      aria-labelledby=":r1cd:"
+      aria-labelledby="«r1cd»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"
@@ -96,7 +96,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Threads"
-      aria-labelledby=":r1ci:"
+      aria-labelledby="«r1ci»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"
@@ -122,7 +122,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Room info"
-      aria-labelledby=":r1cn:"
+      aria-labelledby="«r1cn»"
       class="_icon-button_m2erp_8"
       role="button"
       style="--cpd-icon-button-size: 32px;"

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="«r6»"
   class="_icon-button_m2erp_8"
   data-indicator="default"
   role="button"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap

@@ -24,7 +24,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         aria-label="Open space menu"
         class="_icon-button_m2erp_8 mx_SpaceMenu_button"
         data-state="closed"
-        id="radix-:r0:"
+        id="radix-«r0»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -56,7 +56,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
       aria-label="Add"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:r2:"
+      id="radix-«r2»"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
@@ -113,7 +113,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         aria-label="Open space menu"
         class="_icon-button_m2erp_8 mx_SpaceMenu_button"
         data-state="closed"
-        id="radix-:r4:"
+        id="radix-«r4»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -196,7 +196,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         aria-label="Open space menu"
         class="_icon-button_m2erp_8 mx_SpaceMenu_button"
         data-state="closed"
-        id="radix-:rs:"
+        id="radix-«rs»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -228,7 +228,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
       aria-label="Add"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:ru:"
+      id="radix-«ru»"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
@@ -286,7 +286,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
       aria-label="Add"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:r10:"
+      id="radix-«r10»"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap

@@ -11,10 +11,10 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="More Options"
-      aria-labelledby=":r2:"
+      aria-labelledby="«r2»"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:r0:"
+      id="radix-«r0»"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"
@@ -42,10 +42,10 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Notification options"
-      aria-labelledby=":r9:"
+      aria-labelledby="«r9»"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:r7:"
+      id="radix-«r7»"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"
@@ -86,10 +86,10 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="More Options"
-      aria-labelledby=":ri:"
+      aria-labelledby="«ri»"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:rg:"
+      id="radix-«rg»"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"
@@ -117,10 +117,10 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Notification options"
-      aria-labelledby=":rp:"
+      aria-labelledby="«rp»"
       class="_icon-button_m2erp_8"
       data-state="closed"
-      id="radix-:rn:"
+      id="radix-«rn»"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPanel-test.tsx.snap

@@ -245,7 +245,7 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
         aria-label="Add"
         class="_icon-button_m2erp_8"
         data-state="closed"
-        id="radix-:r0:"
+        id="radix-«r0»"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"

test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

@@ -25,7 +25,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          aria-labelledby=":r0:"
+          aria-labelledby="«r0»"
           class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
@@ -37,7 +37,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
           aria-label="Open menu"
           class="_icon-button_m2erp_8"
           data-state="closed"
-          id="radix-:r5:"
+          id="radix-«r5»"
           role="button"
           style="--cpd-icon-button-size: 24px;"
           tabindex="0"
@@ -101,7 +101,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          aria-labelledby=":r8:"
+          aria-labelledby="«r8»"
           class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
@@ -113,7 +113,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
           aria-label="Open menu"
           class="_icon-button_m2erp_8"
           data-state="closed"
-          id="radix-:rd:"
+          id="radix-«rd»"
           role="button"
           style="--cpd-icon-button-size: 24px;"
           tabindex="0"
@@ -181,7 +181,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-:r10:"
+  aria-labelledby="radix-«r10»"
   aria-orientation="vertical"
   class="_menu_19sse_8"
   data-align="start"
@@ -190,7 +190,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-:r11:"
+  id="radix-«r11»"
   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"
@@ -372,7 +372,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-:rl:"
+  aria-labelledby="radix-«rl»"
   aria-orientation="vertical"
   class="_menu_19sse_8"
   data-align="start"
@@ -381,7 +381,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-:rm:"
+  id="radix-«rm»"
   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"

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="«r6»"
   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="«r9»"
     >
       <rect
         height="10"
@@ -33,13 +33,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
     </clippath>
   </svg>
   <span
-    id=":r4:"
+    id="«r4»"
   >
     Alice
   </span>
   <span
     class="_caption_6ode6_28 cpd-theme-dark"
-    id=":r5:"
+    id="«r5»"
   >
     @alice:example.org
   </span>

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="«r0»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"
@@ -93,7 +93,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
         </p>
       </div>
       <button
-        aria-labelledby=":r6:"
+        aria-labelledby="«r6»"
         class="_icon-button_m2erp_8 _subtle-bg_m2erp_29"
         data-testid="base-card-close-button"
         role="button"

test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

@@ -47,7 +47,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
         class="mx_MemberTileView_right"
       >
         <div
-          aria-labelledby=":ri:"
+          aria-labelledby="«ri»"
           class="mx_E2EIconView"
         >
           <svg
@@ -116,7 +116,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
         class="mx_MemberTileView_right"
       >
         <div
-          aria-labelledby=":r8:"
+          aria-labelledby="«r8»"
           class="mx_E2EIconView"
         >
           <svg

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-«r0»"
           >
             <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-«r0»"
                   name="layout"
                   title=""
                   type="radio"
@@ -154,7 +154,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           <label
             aria-label="Message bubbles"
             class="_label_19upo_59"
-            for="radix-:r9:"
+            for="radix-«r9»"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -164,7 +164,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               >
                 <input
                   class="_input_1e0uz_18"
-                  id="radix-:r9:"
+                  id="radix-«r9»"
                   name="layout"
                   title=""
                   type="radio"
@@ -280,7 +280,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           <label
             aria-label="IRC (experimental)"
             class="_label_19upo_59"
-            for="radix-:ri:"
+            for="radix-«ri»"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -290,7 +290,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               >
                 <input
                   class="_input_1e0uz_18"
-                  id="radix-:ri:"
+                  id="radix-«ri»"
                   name="layout"
                   title=""
                   type="radio"
@@ -414,9 +414,9 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="_container_19o42_10"
             >
               <input
-                aria-describedby="radix-:rs:"
+                aria-describedby="radix-«rs»"
                 class="_input_19o42_24"
-                id="radix-:rr:"
+                id="radix-«rr»"
                 name="compactLayout"
                 title=""
                 type="checkbox"
@@ -431,13 +431,13 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-:rr:"
+              for="radix-«rr»"
             >
               Show compact text and messages
             </label>
             <span
               class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-:rs:"
+              id="radix-«rs»"
             >
               Modern layout must be selected to use this feature.
             </span>

test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap

@@ -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_«r0»"
       >
         Enable notifications for this account
       </div>
       <span
         class="mx_Caption"
-        id="mx_LabelledToggleSwitch_:r0:_caption"
+        id="mx_LabelledToggleSwitch_«r0»_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_«r0»_caption"
       aria-disabled="false"
-      aria-labelledby="mx_LabelledToggleSwitch_:r0:"
+      aria-labelledby="mx_LabelledToggleSwitch_«r0»"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"

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-«r0»"
           >
             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-«r0»"
               name="input"
               placeholder=""
               title=""

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-«r28»"
                 name="systemTheme"
                 title=""
                 type="checkbox"
@@ -47,7 +47,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-:r28:"
+              for="radix-«r28»"
             >
               Match system theme
             </label>
@@ -69,7 +69,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               <input
                 checked=""
                 class="_input_1e0uz_18"
-                id="radix-:r29:"
+                id="radix-«r29»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -85,7 +85,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r29:"
+              for="radix-«r29»"
             >
               Light
             </label>
@@ -102,7 +102,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r2a:"
+                id="radix-«r2a»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -118,7 +118,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r2a:"
+              for="radix-«r2a»"
             >
               Dark
             </label>
@@ -135,7 +135,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r2b:"
+                id="radix-«r2b»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -151,7 +151,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r2b:"
+              for="radix-«r2b»"
             >
               High contrast
             </label>
@@ -168,7 +168,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r2c:"
+                id="radix-«r2c»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -184,7 +184,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r2c:"
+              for="radix-«r2c»"
             >
               Alice theme
             </label>
@@ -202,7 +202,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-:r2d:"
+              for="radix-«r2d»"
             >
               Add custom theme
             </label>
@@ -210,9 +210,9 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               class="_controls_17lij_8"
             >
               <input
-                aria-describedby="radix-:r2e:"
+                aria-describedby="radix-«r2e»"
                 class="_control_sqdq4_10"
-                id="radix-:r2d:"
+                id="radix-«r2d»"
                 name="input"
                 title=""
                 value=""
@@ -220,7 +220,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-«r2e»"
             >
               Enter the URL of a custom theme you want to apply.
             </span>
@@ -240,7 +240,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </span>
             <button
               aria-label="Delete"
-              aria-labelledby=":r2f:"
+              aria-labelledby="«r2f»"
               class="_icon-button_m2erp_8 _destructive_m2erp_74"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -309,7 +309,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_19o42_24"
-                id="radix-:r10:"
+                id="radix-«r10»"
                 name="systemTheme"
                 title=""
                 type="checkbox"
@@ -324,7 +324,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59"
-              for="radix-:r10:"
+              for="radix-«r10»"
             >
               Match system theme
             </label>
@@ -346,7 +346,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               <input
                 checked=""
                 class="_input_1e0uz_18"
-                id="radix-:r11:"
+                id="radix-«r11»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -362,7 +362,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-«r11»"
             >
               Light
             </label>
@@ -379,7 +379,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r12:"
+                id="radix-«r12»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -395,7 +395,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-«r12»"
             >
               Dark
             </label>
@@ -412,7 +412,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r13:"
+                id="radix-«r13»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -428,7 +428,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-«r13»"
             >
               High contrast
             </label>
@@ -445,7 +445,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r14:"
+                id="radix-«r14»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -461,7 +461,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-«r14»"
             >
               Alice theme
             </label>
@@ -479,7 +479,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           >
             <label
               class="_label_19upo_59"
-              for="radix-:r15:"
+              for="radix-«r15»"
             >
               Add custom theme
             </label>
@@ -487,9 +487,9 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               class="_controls_17lij_8"
             >
               <input
-                aria-describedby="radix-:r16:"
+                aria-describedby="radix-«r16»"
                 class="_control_sqdq4_10"
-                id="radix-:r15:"
+                id="radix-«r15»"
                 name="input"
                 title=""
                 value=""
@@ -497,7 +497,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-«r16»"
             >
               Enter the URL of a custom theme you want to apply.
             </span>
@@ -517,7 +517,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </span>
             <button
               aria-label="Delete"
-              aria-labelledby=":r17:"
+              aria-labelledby="«r17»"
               class="_icon-button_m2erp_8 _destructive_m2erp_74"
               role="button"
               style="--cpd-icon-button-size: 32px;"
@@ -586,7 +586,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             >
               <input
                 class="_input_19o42_24"
-                id="radix-:r0:"
+                id="radix-«r0»"
                 name="systemTheme"
                 title=""
                 type="checkbox"
@@ -601,7 +601,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59"
-              for="radix-:r0:"
+              for="radix-«r0»"
             >
               Match system theme
             </label>
@@ -623,7 +623,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
               <input
                 checked=""
                 class="_input_1e0uz_18"
-                id="radix-:r1:"
+                id="radix-«r1»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -639,7 +639,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r1:"
+              for="radix-«r1»"
             >
               Light
             </label>
@@ -656,7 +656,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r2:"
+                id="radix-«r2»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -672,7 +672,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r2:"
+              for="radix-«r2»"
             >
               Dark
             </label>
@@ -689,7 +689,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             >
               <input
                 class="_input_1e0uz_18"
-                id="radix-:r3:"
+                id="radix-«r3»"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -705,7 +705,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           >
             <label
               class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-:r3:"
+              for="radix-«r3»"
             >
               High contrast
             </label>

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="«r9»"
                 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="«r0»"
                 class="_input_1hel1_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"

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-«r7»"
           checked=""
           class="_input_19o42_24"
-          id="radix-:r6:"
+          id="radix-«r6»"
           name="neverSendEncrypted"
           title=""
           type="checkbox"
@@ -237,13 +237,13 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
     >
       <label
         class="_label_19upo_59"
-        for="radix-:r6:"
+        for="radix-«r6»"
       >
         In encrypted rooms, only send messages to verified users
       </label>
       <span
         class="_message_19upo_85 _help-message_19upo_91"
-        id="radix-:r7:"
+        id="radix-«r7»"
       >
         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>

test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap

@@ -253,13 +253,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <label
           class="_label_19upo_59"
-          for="radix-:r0:"
+          for="radix-«r0»"
         >
           Enter recovery key
         </label>
         <input
           class="_control_sqdq4_10"
-          id="radix-:r0:"
+          id="radix-«r0»"
           name="recoveryKey"
           required=""
           title=""
@@ -388,23 +388,23 @@ 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-«r0»"
         >
           Enter recovery key
         </label>
         <input
-          aria-describedby="radix-:r1:"
+          aria-describedby="radix-«r1»"
           aria-invalid="true"
           class="_control_sqdq4_10"
           data-invalid="true"
-          id="radix-:r0:"
+          id="radix-«r0»"
           name="recoveryKey"
           required=""
           title=""
         />
         <span
           class="_message_19upo_85 _error-message_19upo_95"
-          id="radix-:r1:"
+          id="radix-«r1»"
         >
           <svg
             fill="currentColor"

test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap

@@ -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_«r17»"
               >
                 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_«r17»"
               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_«r18»"
               >
                 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_«r18»"
               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_«r19»"
               >
                 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_«r19»"
               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_«r1a»"
               >
                 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_«r1a»"
               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="«r24»"
                         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="«r24»"
                     >
                       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_«r0»"
               >
                 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_«r0»"
               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_«r1»"
               >
                 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_«r1»"
               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_«r2»"
               >
                 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_«r2»"
               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_«r3»"
               >
                 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_«r3»"
               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="«rt»"
                         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="«rt»"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>

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-«r0»"
                         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-«r0»"
                     >
                       Light
                     </label>
@@ -80,7 +80,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1e0uz_18"
                         disabled=""
-                        id="radix-:r1:"
+                        id="radix-«r1»"
                         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-«r1»"
                     >
                       Dark
                     </label>
@@ -114,7 +114,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1e0uz_18"
                         disabled=""
-                        id="radix-:r2:"
+                        id="radix-«r2»"
                         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-«r2»"
                     >
                       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-«r3»"
                   >
                     <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-«r3»"
                           name="layout"
                           title=""
                           type="radio"
@@ -297,7 +297,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   <label
                     aria-label="Message bubbles"
                     class="_label_19upo_59"
-                    for="radix-:rc:"
+                    for="radix-«rc»"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -307,7 +307,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       >
                         <input
                           class="_input_1e0uz_18"
-                          id="radix-:rc:"
+                          id="radix-«rc»"
                           name="layout"
                           title=""
                           type="radio"
@@ -423,7 +423,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   <label
                     aria-label="IRC (experimental)"
                     class="_label_19upo_59"
-                    for="radix-:rl:"
+                    for="radix-«rl»"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -433,7 +433,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       >
                         <input
                           class="_input_1e0uz_18"
-                          id="radix-:rl:"
+                          id="radix-«rl»"
                           name="layout"
                           title=""
                           type="radio"
@@ -557,9 +557,9 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="_container_19o42_10"
                     >
                       <input
-                        aria-describedby="radix-:rv:"
+                        aria-describedby="radix-«rv»"
                         class="_input_19o42_24"
-                        id="radix-:ru:"
+                        id="radix-«ru»"
                         name="compactLayout"
                         title=""
                         type="checkbox"
@@ -574,13 +574,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   >
                     <label
                       class="_label_19upo_59"
-                      for="radix-:ru:"
+                      for="radix-«ru»"
                     >
                       Show compact text and messages
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-:rv:"
+                      id="radix-«rv»"
                     >
                       Modern layout must be selected to use this feature.
                     </span>

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-«r1»"
                       >
                         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-«r1»"
                           name="input"
                           placeholder=""
                           title=""

test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -397,7 +397,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
           >
             <input
               aria-label="Select all"
-              aria-labelledby=":r4q:"
+              aria-labelledby="«r4q»"
               class="_input_1hel1_18"
               data-testid="device-select-all-checkbox"
               id="device-select-all-checkbox"

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="«r1»"
                         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="«r1»"
                     >
                       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="«r5»"
                         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="«r5»"
                     >
                       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="«r9»"
                         class="_input_1hel1_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
@@ -220,7 +220,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":r9:"
+                      id="«r9»"
                     >
                       Group all your favourite rooms and people in one place.
                     </span>
@@ -240,7 +240,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":rd:"
+                        aria-describedby="«rd»"
                         class="_input_1hel1_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
@@ -289,7 +289,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":rd:"
+                      id="«rd»"
                     >
                       Group all your people in one place.
                     </span>
@@ -309,7 +309,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":rh:"
+                        aria-describedby="«rh»"
                         class="_input_1hel1_18"
                         id="checkbox_eEefiPqpMR"
                         type="checkbox"
@@ -343,7 +343,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":rh:"
+                      id="«rh»"
                     >
                       Group all your rooms that aren't part of a space in one place.
                     </span>
@@ -363,7 +363,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":rl:"
+                        aria-describedby="«rl»"
                         class="_input_1hel1_18"
                         id="checkbox_MwbPDmfGtm"
                         type="checkbox"
@@ -409,7 +409,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":rl:"
+                      id="«rl»"
                     >
                       Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
                     </span>
@@ -476,7 +476,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":rp:"
+                        aria-describedby="«rp»"
                         checked=""
                         class="_input_1hel1_18"
                         disabled=""
@@ -524,7 +524,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":rp:"
+                      id="«rp»"
                     >
                       Home is useful for getting an overview of everything.
                     </span>
@@ -544,7 +544,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":rt:"
+                        aria-describedby="«rt»"
                         class="_input_1hel1_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
@@ -579,7 +579,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":rt:"
+                      id="«rt»"
                     >
                       Show all your rooms in Home, even if they're in a space.
                     </span>
@@ -599,7 +599,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":r11:"
+                        aria-describedby="«r11»"
                         class="_input_1hel1_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
@@ -645,7 +645,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":r11:"
+                      id="«r11»"
                     >
                       Group all your favourite rooms and people in one place.
                     </span>
@@ -665,7 +665,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":r15:"
+                        aria-describedby="«r15»"
                         class="_input_1hel1_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
@@ -714,7 +714,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":r15:"
+                      id="«r15»"
                     >
                       Group all your people in one place.
                     </span>
@@ -734,7 +734,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":r19:"
+                        aria-describedby="«r19»"
                         class="_input_1hel1_18"
                         id="checkbox_eEefiPqpMR"
                         type="checkbox"
@@ -768,7 +768,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":r19:"
+                      id="«r19»"
                     >
                       Group all your rooms that aren't part of a space in one place.
                     </span>
@@ -788,7 +788,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       class="_container_1hel1_10"
                     >
                       <input
-                        aria-describedby=":r1d:"
+                        aria-describedby="«r1d»"
                         class="_input_1hel1_18"
                         id="checkbox_MwbPDmfGtm"
                         type="checkbox"
@@ -834,7 +834,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </label>
                     <span
                       class="_message_19upo_85 _help-message_19upo_91"
-                      id=":r1d:"
+                      id="«r1d»"
                     >
                       Group all private video rooms and conferences.
                     </span>

test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -231,12 +231,12 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       class="mx_ThreadsActivityCentre_container"
     >
       <button
-        aria-controls=":r12:"
+        aria-controls="«r12»"
-        aria-describedby=":r12:"
+        aria-describedby="«r12»"
         aria-expanded="true"
         aria-haspopup="dialog"
         aria-label="Threads"
-        aria-labelledby=":r14:"
+        aria-labelledby="«r14»"
         class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
         data-floating-ui-inert=""
         role="button"
@@ -275,7 +275,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         tabindex="0"
       />
       <span
-        aria-owns=":r19:"
+        aria-owns="«r19»"
         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;"
       />

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_«rb»"
   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_«r0»"
                     >
                       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_«r0»"
                     class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
                     role="switch"
                     tabindex="0"

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-:r33:"
+  aria-labelledby="radix-«r33»"
   aria-orientation="vertical"
   class="_menu_19sse_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-:r34:"
+  id="radix-«r34»"
   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_19sse_74"
-    id=":r3b:"
+    id="«r3b»"
   >
     Threads activity
   </h3>
@@ -145,15 +145,15 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
       class="mx_ThreadsActivityCentre_container"
     >
       <button
-        aria-controls="radix-:r1d:"
+        aria-controls="radix-«r1d»"
         aria-disabled="false"
         aria-expanded="true"
         aria-haspopup="menu"
         aria-label="Threads"
-        aria-labelledby=":r1e:"
+        aria-labelledby="«r1e»"
         class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
         data-state="open"
-        id="radix-:r1c:"
+        id="radix-«r1c»"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -183,7 +183,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
     aria-hidden="true"
     data-aria-hidden="true"
     data-floating-ui-portal=""
-    id=":r1i:"
+    id="«r1i»"
   >
     <div
       class="_tooltip_6ode6_8 _invisible_6ode6_21"
@@ -204,7 +204,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
           stroke="none"
         />
         <clippath
-          id=":r1j:"
+          id="«r1j»"
         >
           <rect
             height="10"
@@ -215,7 +215,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
         </clippath>
       </svg>
       <span
-        id=":r1e:"
+        id="«r1e»"
       >
         Threads
       </span>
@@ -227,7 +227,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
     style="position: fixed; left: 0px; top: 0px; transform: translate(0px, -8px); min-width: max-content; --radix-popper-transform-origin: 0% 0px; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px;"
   >
     <div
-      aria-labelledby="radix-:r1c:"
+      aria-labelledby="radix-«r1c»"
       aria-orientation="vertical"
       class="_menu_19sse_8"
       data-align="start"
@@ -236,14 +236,14 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
       data-side="top"
       data-state="open"
       dir="ltr"
-      id="radix-:r1d:"
+      id="radix-«r1d»"
       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_19sse_74"
-        id=":r1k:"
+        id="«r1k»"
       >
         Threads activity
       </h3>
@@ -270,7 +270,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
 
 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-:r3n:"
+  aria-labelledby="radix-«r3n»"
   aria-orientation="vertical"
   class="_menu_19sse_8"
   data-align="start"
@@ -279,14 +279,14 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-:r3o:"
+  id="radix-«r3o»"
   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_19sse_74"
-    id=":r3v:"
+    id="«r3v»"
   >
     Threads activity
   </h3>
@@ -304,7 +304,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-:r40:"
+  aria-labelledby="radix-«r40»"
   aria-orientation="vertical"
   class="_menu_19sse_8"
   data-align="start"
@@ -313,14 +313,14 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-:r41:"
+  id="radix-«r41»"
   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_19sse_74"
-    id=":r48:"
+    id="«r48»"
   >
     Threads activity
   </h3>
@@ -482,12 +482,12 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       class="mx_ThreadsActivityCentre_container"
     >
       <button
-        aria-controls=":ra:"
+        aria-controls="«ra»"
-        aria-describedby=":ra:"
+        aria-describedby="«ra»"
         aria-expanded="true"
         aria-haspopup="dialog"
         aria-label="Threads"
-        aria-labelledby=":rc:"
+        aria-labelledby="«rc»"
         class="_icon-button_m2erp_8 mx_ThreadsActivityCentreButton"
         data-floating-ui-inert=""
         role="button"
@@ -526,7 +526,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
         tabindex="0"
       />
       <span
-        aria-owns=":rh:"
+        aria-owns="«rh»"
         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;"
       />
@@ -542,7 +542,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
   <div
     data-floating-ui-inert=""
     data-floating-ui-portal=""
-    id=":rg:"
+    id="«rg»"
   >
     <div
       class="_tooltip_6ode6_8 _invisible_6ode6_21"
@@ -563,7 +563,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
           stroke="none"
         />
         <clippath
-          id=":ri:"
+          id="«ri»"
         >
           <rect
             height="10"
@@ -574,7 +574,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
         </clippath>
       </svg>
       <span
-        id=":rc:"
+        id="«rc»"
       >
         Threads
       </span>
@@ -582,7 +582,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
   </div>
   <div
     data-floating-ui-portal=""
-    id=":rh:"
+    id="«rh»"
   >
     <span
       data-floating-ui-focus-guard=""
@@ -592,11 +592,11 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       tabindex="0"
     />
     <div
-      aria-describedby=":r9:"
+      aria-describedby="«r9»"
-      aria-labelledby=":r8:"
+      aria-labelledby="«r8»"
       class="_content_3xq91_8"
       data-floating-ui-focusable=""
-      id=":ra:"
+      id="«ra»"
       role="dialog"
       style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
       tabindex="-1"
@@ -614,7 +614,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
           stroke="none"
         />
         <clippath
-          id=":rj:"
+          id="«rj»"
         >
           <rect
             height="20"
@@ -626,13 +626,13 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
       </svg>
       <h3
         class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 _header_3xq91_37"
-        id=":r8:"
+        id="«r8»"
       >
         Threads Activity Centre
       </h3>
       <span
         class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 _description_3xq91_43"
-        id=":r9:"
+        id="«r9»"
       >
         Threads notifications have moved, find them here from now on.
       </span>

test/unit-tests/hooks/useProfileInfo-test.tsx

@@ -40,9 +40,10 @@ describe("useProfileInfo", () => {
             result.current.search({ query });
         });
 
-        await waitFor(() => expect(result.current.ready).toBe(true));
+        await waitFor(() => {
-
+            expect(result.current.ready).toBe(true);
-        expect(result.current.profile?.display_name).toBe(query);
+            expect(result.current.profile?.display_name).toBe(query);
+        });
     });
 
     it("should work with empty queries", async () => {

test/unit-tests/hooks/usePublicRoomDirectory-test.tsx

@@ -77,9 +77,8 @@ describe("usePublicRoomDirectory", () => {
 
         await waitFor(() => {
             expect(result.current.ready).toBe(true);
+            expect(result.current.publicRooms[0].name).toEqual(query);
         });
-
-        expect(result.current.publicRooms[0].name).toEqual(query);
     });
 
     it("should recover from a server exception", async () => {

test/unit-tests/hooks/useUserDirectory-test.tsx

@@ -45,9 +45,11 @@ describe("useUserDirectory", () => {
         act(() => {
             result.current.search({ limit: 1, query });
         });
-        await waitFor(() => expect(result.current.ready).toBe(true));
+        await waitFor(() => {
+            expect(result.current.ready).toBe(true);
+            expect(result.current.loading).toBe(false);
+        });
 
-        expect(result.current.loading).toBe(false);
         expect(result.current.users[0].name).toBe(query);
     });
 

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="«r0»"
       tabindex="0"
     >
       <a

yarn.lock

@@ -3346,10 +3346,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@19.0.4":
+"@types/react-dom@19.1.2":
-  version "19.0.4"
+  version "19.1.2"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.4.tgz#bedba97f9346bd4c0fe5d39e689713804ec9ac89"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.2.tgz#bd1fe3b8c28a3a2e942f85314dcfb71f531a242f"
-  integrity sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==
+  integrity sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==
 
 "@types/react-redux@^7.1.20":
   version "7.1.34"
@@ -3374,10 +3374,10 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@19.0.10":
+"@types/react@*", "@types/react@19.1.1":
-  version "19.0.10"
+  version "19.1.1"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.10.tgz#d0c66dafd862474190fe95ce11a68de69ed2b0eb"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.1.tgz#f7f2bb4a0a8d22b9ee4b8f6e27f0c78d76eb7f9b"
-  integrity sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==
+  integrity sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ==
   dependencies:
     csstype "^3.0.2"
 
@@ -10887,11 +10887,11 @@ react-clientside-effect@^1.2.7:
     "@babel/runtime" "^7.12.13"
 
 react-dom@^19.0.0:
-  version "19.0.0"
+  version "19.1.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.0.tgz#133558deca37fa1d682708df8904b25186793623"
-  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  integrity sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==
   dependencies:
-    scheduler "^0.25.0"
+    scheduler "^0.26.0"
 
 react-focus-lock@^2.5.1:
   version "2.13.6"
@@ -10905,10 +10905,10 @@ react-focus-lock@^2.5.1:
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.3"
 
-react-is@19.0.0, react-is@^17.0.1, react-is@^18.0.0:
+react-is@19.1.0, react-is@^17.0.1, react-is@^18.0.0:
-  version "19.0.0"
+  version "19.1.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.0.0.tgz#d6669fd389ff022a9684f708cf6fa4962d1fea7a"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.1.0.tgz#805bce321546b7e14c084989c77022351bbdd11b"
-  integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
+  integrity sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
@@ -10998,9 +10998,9 @@ react-virtualized@^9.22.5:
     react-lifecycles-compat "^3.0.4"
 
 react@^19.0.0:
-  version "19.0.0"
+  version "19.1.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.1.0.tgz#926864b6c48da7627f004795d6cce50e90793b75"
-  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+  integrity sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -11449,10 +11449,10 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.25.0:
+scheduler@^0.26.0:
-  version "0.25.0"
+  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337"
-  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+  integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==
 
 schema-utils@^3.0.0:
   version "3.3.0"