Merge pull request #4099 from element-hq/stable-class-names

Use vitest's default for scoped class names

locales/en/app.json

@@ -205,6 +205,7 @@
     "blur_not_supported_by_browser": "(Background blur is not supported by this device.)",
     "developer_tab_title": "Developer",
     "devices": {
+      "activating": "Activating…",
       "camera": "Camera",
       "camera_numbered": "Camera {{n}}",
       "change_device_button": "Change audio device",

src/__snapshots__/AppBar.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`AppBar > renders 1`] = `
 <div>
   <div
-    class="bar"
+    class="_bar_221541"
   >
     <header>
       <button
         aria-labelledby="_r_0_"
-        class="_icon-button_1215g_8 primaryButton"
+        class="_icon-button_1215g_8 _primaryButton_221541"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -33,7 +33,7 @@ exports[`AppBar > renders 1`] = `
         </div>
       </button>
       <div
-        class="secondaryButton"
+        class="_secondaryButton_221541"
       />
     </header>
   </div>
@@ -46,12 +46,12 @@ exports[`AppBar > renders 1`] = `
 exports[`AppBar > renders with title and subtitle 1`] = `
 <div>
   <div
-    class="bar"
+    class="_bar_221541"
   >
     <header>
       <button
         aria-labelledby="_r_6_"
-        class="_icon-button_1215g_8 primaryButton"
+        class="_icon-button_1215g_8 _primaryButton_221541"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -76,17 +76,17 @@ exports[`AppBar > renders with title and subtitle 1`] = `
         </div>
       </button>
       <h1
-        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 title"
+        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 _title_221541"
       >
         Title
       </h1>
       <span
-        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 subtitle"
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 _subtitle_221541"
       >
         Subtitle
       </span>
       <div
-        class="secondaryButton"
+        class="_secondaryButton_221541"
       />
     </header>
   </div>

src/__snapshots__/Modal.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`the content is rendered when the modal is open 1`] = `
 <div
   aria-labelledby="radix-_r_4_"
-  class="overlay animate modal dialog _glass_sepwu_8"
+  class="_overlay_2f5303 _animate_2f5303 _modal_dbeffe _dialog_dbeffe _glass_sepwu_8"
   data-state="open"
   id="radix-_r_3_"
   role="dialog"
@@ -11,10 +11,10 @@ exports[`the content is rendered when the modal is open 1`] = `
   tabindex="-1"
 >
   <div
-    class="content"
+    class="_content_dbeffe"
   >
     <div
-      class="header"
+      class="_header_dbeffe"
     >
       <h2
         class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -24,7 +24,7 @@ exports[`the content is rendered when the modal is open 1`] = `
       </h2>
     </div>
     <div
-      class="body"
+      class="_body_dbeffe"
     >
       <p>
         This is the content.
@@ -37,7 +37,7 @@ exports[`the content is rendered when the modal is open 1`] = `
 exports[`the modal renders as a drawer in mobile viewports 1`] = `
 <div
   aria-labelledby="radix-_r_a_"
-  class="overlay modal drawer"
+  class="_overlay_2f5303 _modal_dbeffe _drawer_dbeffe"
   data-state="open"
   data-vaul-animate="true"
   data-vaul-custom-container="false"
@@ -51,13 +51,13 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
   tabindex="-1"
 >
   <div
-    class="content"
+    class="_content_dbeffe"
   >
     <div
-      class="header"
+      class="_header_dbeffe"
     >
       <div
-        class="handle"
+        class="_handle_dbeffe"
       />
       <h2
         id="radix-_r_a_"
@@ -67,7 +67,7 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
       </h2>
     </div>
     <div
-      class="body"
+      class="_body_dbeffe"
     >
       <p>
         This is the content.

src/__snapshots__/QrCode.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`QrCode > renders 1`] = `
 <div
-  class="qrCode bar"
+  class="_qrCode_458264 bar"
 >
   <img
     alt="QR Code"

src/__snapshots__/Toast.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Toast > renders 1`] = `
 <button
   aria-labelledby="radix-_r_4_"
-  class="overlay animate toast"
+  class="_overlay_2f5303 _animate_2f5303 _toast_15a045"
   data-state="open"
   id="radix-_r_3_"
   role="dialog"

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -140,7 +140,7 @@ exports[`Can raise hand 1`] = `
     aria-expanded="false"
     aria-haspopup="true"
     aria-labelledby="_r_1j_"
-    class="_button_1nw83_8 raisedButton _has-icon_1nw83_60 _icon-only_1nw83_53"
+    class="_button_1nw83_8 _raisedButton_fb25ab _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"
     role="button"

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -180,12 +180,12 @@ describe("MediaMuteAndSwitchButton", () => {
     );
 
     await user.click(screen.getByRole("button", { name: "Microphone" }));
-    screen.getByRole("menuitem", { name: "Microphone 1" });
+    screen.getByRole("menuitemradio", { name: "Microphone 1" });
-    screen.getByRole("menuitem", { name: "Microphone 2" });
+    screen.getByRole("menuitemradio", { name: "Microphone 2" });
     await user.keyboard("[Escape]");
     await user.click(screen.getByRole("button", { name: "Camera" }));
-    screen.getByRole("menuitem", { name: "Camera 1" });
+    screen.getByRole("menuitemradio", { name: "Camera 1" });
-    screen.getByRole("menuitem", { name: "Camera 2" });
+    screen.getByRole("menuitemradio", { name: "Camera 2" });
   });
 
   test("calls select callback on menu click", async () => {
@@ -206,7 +206,9 @@ describe("MediaMuteAndSwitchButton", () => {
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
 
     expect(onSelect).toHaveBeenCalledWith("mic2");
   });
@@ -228,7 +230,9 @@ describe("MediaMuteAndSwitchButton", () => {
     );
 
     await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitem", { name: "Microphone 1" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 1" }),
+    );
 
     expect(onSelect).not.toHaveBeenCalled();
   });
@@ -264,18 +268,24 @@ describe("MediaMuteAndSwitchButton", () => {
     const { getByRole } = renderComponent(<Wrapper />);
 
     await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
 
     expect(onSelectPressed).toHaveBeenCalled();
     expect(onOptionUpdated).not.toHaveBeenCalled();
     // After clicking, plannedSelection="mic2" but selectedOption is still "mic1",
-    // so a spinner should appear on the mic2 item
+    // so mic2 should be in an activating state
-    const mic2Item = screen.getByRole("menuitem", { name: "Microphone 2" });
+    screen.getByRole("menuitemradio", {
-    expect(mic2Item.querySelector(".rotate")).toBeTruthy();
+      name: "Microphone 2 Activating…",
+      checked: false,
+    });
 
-    // The currently-selected mic1 item should not have a spinner
+    // The currently-selected mic1 item should not be activating
-    const mic1Item = screen.getByRole("menuitem", { name: "Microphone 1" });
+    screen.getByRole("menuitemradio", {
-    expect(mic1Item.querySelector(".rotate")).toBeNull();
+      name: "Microphone 1",
+      checked: true,
+    });
     await act(async () => {
       // resolve the promise that acutally updates the select option.
       resolve();
@@ -284,7 +294,7 @@ describe("MediaMuteAndSwitchButton", () => {
 
     expect(onOptionUpdated).toHaveBeenCalled();
     // Spinner should now be gone since the selection has caught up
-    const mic2ItemAfter = screen.getByRole("menuitem", {
+    const mic2ItemAfter = screen.getByRole("menuitemradio", {
       name: "Microphone 2",
     });
     expect(mic2ItemAfter.querySelector(".rotate")).toBeNull();
@@ -336,11 +346,15 @@ describe("MediaMuteAndSwitchButton", () => {
     await user.click(getByRole("button", { name: "Microphone" }));
 
     // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
-    const mic1Item = screen.getByRole("menuitem", { name: "Microphone 2" });
+    const mic1Item = screen.getByRole("menuitemradio", {
+      name: "Microphone 2",
+    });
     expect(mic1Item.querySelectorAll("svg").length).toBe(2);
 
     // The unselected item (mic1) only renders its IconOptions SVG
-    const mic2Item = screen.getByRole("menuitem", { name: "Microphone 1" });
+    const mic2Item = screen.getByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
     expect(mic2Item.querySelectorAll("svg").length).toBe(1);
   });
 });

src/components/MediaMuteAndSwitchButton.tsx

@@ -191,6 +191,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                     width={24}
                     height={24}
                     className={styles.itemIcon}
+                    aria-hidden
                   />
                 )
               }
@@ -201,10 +202,23 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                 onSelect?.(id);
               }}
               key={id}
+              role="menuitemradio"
+              aria-checked={selectedOption === id}
             >
-              {selectedOption === id && <CheckIcon width={24} height={24} />}
+              {selectedOption === id && (
+                <CheckIcon
+                  width={24}
+                  height={24}
+                  aria-hidden // A label would be redundant to aria-checked above
+                />
+              )}
               {selectedOption !== id && plannedSelection === id && (
-                <SpinnerIcon width={24} height={24} className={styles.rotate} />
+                <SpinnerIcon
+                  width={24}
+                  height={24}
+                  className={styles.rotate}
+                  aria-label={t("settings.devices.activating")}
+                />
               )}
             </MenuItem>
           );

src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MediaMuteAndSwitchButton > renders 1`] = `
 <div>
   <div
-    class="container"
+    class="_container_e649de"
   >
     <button
       aria-busy="false"
@@ -35,7 +35,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="Microphone"
-      class="_button_1nw83_8 menuButton _has-icon_1nw83_60 _icon-only_1nw83_53"
+      class="_button_1nw83_8 _menuButton_e649de _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="tertiary"
       data-size="lg"
       data-state="closed"

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
 <div
-  class="reactionIndicatorWidget"
+  class="_reactionIndicatorWidget_abd277"
 >
   <div
-    class="reaction"
+    class="_reaction_abd277"
   >
     <span
       aria-label="Reaction"
@@ -22,10 +22,10 @@ exports[`RaisedHandIndicator > renders a smaller indicator when miniature is spe
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
 <div
-  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
+  class="_reactionIndicatorWidget_abd277 _reactionIndicatorWidgetLarge_abd277"
 >
   <div
-    class="reaction reactionLarge"
+    class="_reaction_abd277 _reactionLarge_abd277"
   >
     <span
       aria-label="Reaction"
@@ -42,10 +42,10 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
 <div
-  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
+  class="_reactionIndicatorWidget_abd277 _reactionIndicatorWidgetLarge_abd277"
 >
   <div
-    class="reaction reactionLarge"
+    class="_reaction_abd277 _reactionLarge_abd277"
   >
     <span
       aria-label="Reaction"

src/room/LobbyView.test.tsx

@@ -145,8 +145,7 @@ describe("LobbyView", () => {
       .querySelector("path")!
       .getAttribute("d");
     const primaryButtonSvgPath = container
-      .querySelector(".primaryButton")
+      .querySelector("path")
-      ?.querySelector("path")
       ?.getAttribute("d");
     expect(primaryButtonSvgPath).toBe(expectedSvgPath);
     expect(container).toMatchSnapshot();
@@ -169,8 +168,7 @@ describe("LobbyView", () => {
       .querySelector("path")!
       .getAttribute("d");
     const primaryButtonSvgPath = container
-      .querySelector(".primaryButton")
+      .querySelector("path")
-      ?.querySelector("path")
       ?.getAttribute("d");
     expect(primaryButtonSvgPath).toBe(expectedSvgPath);
     expect(container).toMatchSnapshot();

src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap

@@ -3,17 +3,17 @@
 exports[`ConnectionLostError: Action handling should reset error state 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -95,20 +95,20 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -161,17 +161,17 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
 exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -253,20 +253,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -318,17 +318,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
 exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -410,20 +410,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -475,17 +475,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
 exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreachable' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -567,20 +567,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -632,17 +632,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
 exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFound' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -724,20 +724,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -789,17 +789,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
 exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' error correctly 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -881,20 +881,20 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -946,17 +946,17 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
 exports[`LiveKit ConnectionError variants > should link to troubleshoot guide when timeout error 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1038,20 +1038,20 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -1103,17 +1103,17 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
 exports[`should have a close button in widget mode 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1195,20 +1195,20 @@ exports[`should have a close button in widget mode 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -1257,17 +1257,17 @@ exports[`should have a close button in widget mode 1`] = `
 exports[`should render the error page with link back to home 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1349,20 +1349,20 @@ exports[`should render the error page with link back to home 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -1411,17 +1411,17 @@ exports[`should render the error page with link back to home 1`] = `
 exports[`should report correct error for 'Call is not supported' 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1503,20 +1503,20 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -1565,17 +1565,17 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
 exports[`should report correct error for 'Connection lost' 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1657,20 +1657,20 @@ exports[`should report correct error for 'Connection lost' 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -1723,17 +1723,17 @@ exports[`should report correct error for 'Connection lost' 1`] = `
 exports[`should report correct error for 'Homeserver does not support Matrix 2.…' 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1815,20 +1815,20 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -1877,17 +1877,17 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
 exports[`should report correct error for 'Incompatible browser' 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -1969,20 +1969,20 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >
@@ -2026,17 +2026,17 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
 exports[`should report correct error for 'Insufficient capacity' 1`] = `
 <DocumentFragment>
   <div
-    class="page"
+    class="_page_4be5c0"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <a
           aria-label="Element Call Home"
-          class="headerLogo"
+          class="_headerLogo_e4b327"
           data-discover="true"
           href="/"
         >
@@ -2118,20 +2118,20 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
         </a>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="container"
+      class="_container_4be5c0"
     >
       <div
-        class="content"
+        class="_content_4be5c0"
       >
         <div
-          class="error"
+          class="_error_a69dc5"
         >
           <div
-            class="_big-icon_1ssbv_8 icon"
+            class="_big-icon_1ssbv_8 _icon_a69dc5"
             data-kind="primary"
             data-size="lg"
           >

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -3,28 +3,28 @@
 exports[`InCallView > rendering > renders 1`] = `
 <div>
   <div
-    class="inRoom"
+    class="_inRoom_4e7ff8"
   >
     <header
-      class="header header"
+      class="_header_e4b327 _header_4e7ff8"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <div
-          class="roomHeaderInfo"
+          class="_roomHeaderInfo_e4b327"
           data-size="lg"
         >
           <span
             aria-label=""
-            class="_avatar_va14e_8 roomAvatar _avatar-imageless_va14e_55"
+            class="_avatar_va14e_8 _roomAvatar_e4b327 _avatar-imageless_va14e_55"
             data-color="1"
             data-type="round"
             role="img"
             style="--cpd-avatar-size: 56px;"
           />
           <div
-            class="nameLine"
+            class="_nameLine_e4b327"
           >
             <h1
               class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -35,7 +35,7 @@ exports[`InCallView > rendering > renders 1`] = `
             >
               <svg
                 aria-labelledby="_r_0_"
-                class="lock"
+                class="_lock_edc97d"
                 data-encrypted="false"
                 fill="currentColor"
                 height="16"
@@ -50,7 +50,7 @@ exports[`InCallView > rendering > renders 1`] = `
             </span>
           </div>
           <div
-            class="participantsLine"
+            class="_participantsLine_e4b327"
           >
             <svg
               aria-label="Participants"
@@ -80,21 +80,21 @@ exports[`InCallView > rendering > renders 1`] = `
         </div>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="scrollingGrid grid"
+      class="_scrollingGrid_4e7ff8 _grid_b0d1cd"
     >
       <div
-        class="layer"
+        class="_layer_b00c5f"
       >
         <div
-          class="container slot"
+          class="_container_b00c5f _slot_b0d1cd"
           data-id="1"
         >
           <div
-            class="slot local slot"
+            class="_slot_b00c5f _local_b00c5f _slot_b0d1cd"
             data-block-alignment="start"
             data-id="0"
             data-inline-alignment="end"
@@ -103,22 +103,22 @@ exports[`InCallView > rendering > renders 1`] = `
       </div>
     </div>
     <div
-      class="fixedGrid grid"
+      class="_fixedGrid_4e7ff8 _grid_b0d1cd"
       style="inset-block-start: NaNpx;"
     >
       <div />
     </div>
     <div
-      class="bg animate"
+      class="_bg_2f5303 _animate_2f5303"
       data-state="closed"
     />
     <div
       aria-hidden="true"
-      class="overlay"
+      class="_overlay_eb6724"
       data-show="false"
     >
       <div
-        class="_big-icon_1ssbv_8 icon"
+        class="_big-icon_1ssbv_8 _icon_eb6724"
         data-kind="primary"
         data-size="lg"
       >
@@ -157,22 +157,22 @@ exports[`InCallView > rendering > renders 1`] = `
         Back to Speaker Mode
       </button>
       <div
-        class="spacer"
+        class="_spacer_eb6724"
       />
     </div>
     <div
-      class="container"
+      class="_container_8084b5"
     />
     <div
-      class="footer"
+      class="_footer_20b7b4"
       data-testid="footer-container"
     >
       <div
-        class="settingsLogoContainer"
+        class="_settingsLogoContainer_20b7b4"
       >
         <button
           aria-labelledby="_r_8_"
-          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -198,7 +198,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </div>
         </button>
         <div
-          class="logo"
+          class="_logo_20b7b4"
         >
           <svg
             aria-hidden="true"
@@ -303,11 +303,11 @@ exports[`InCallView > rendering > renders 1`] = `
         </div>
       </div>
       <div
-        class="buttons"
+        class="_buttons_20b7b4"
       >
         <button
           aria-labelledby="_r_d_"
-          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -382,7 +382,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-expanded="false"
           aria-haspopup="true"
           aria-labelledby="_r_s_"
-          class="_button_1nw83_8 raiseHand _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 _raiseHand_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           role="button"
@@ -405,7 +405,7 @@ exports[`InCallView > rendering > renders 1`] = `
         </button>
         <button
           aria-labelledby="_r_14_"
-          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -428,7 +428,7 @@ exports[`InCallView > rendering > renders 1`] = `
       </div>
       <fieldset
         aria-label="Layout"
-        class="_toggle_13rnk_9 layout"
+        class="_toggle_13rnk_9 _layout_20b7b4"
         data-size="lg"
       >
         <input

src/room/__snapshots__/LobbyView.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`LobbyView > renders with AppBar android 1`] = `
 <div>
   <div
-    class="bar"
+    class="_bar_221541"
   >
     <header>
       <button
         aria-labelledby="_r_36_"
-        class="_icon-button_1215g_8 primaryButton"
+        class="_icon-button_1215g_8 _primaryButton_221541"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -33,18 +33,18 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </div>
       </button>
       <div
-        class="secondaryButton"
+        class="_secondaryButton_221541"
       />
     </header>
   </div>
   <div
-    class="inRoom"
+    class="_inRoom_4e7ff8"
   >
     <div
-      class="content"
+      class="_content_f9ee84"
     >
       <div
-        class="preview"
+        class="_preview_dd2178"
       >
         <video
           disablepictureinpicture=""
@@ -52,7 +52,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
           tabindex="-1"
         />
         <div
-          class="avatarContainer"
+          class="_avatarContainer_dd2178"
         >
           <div>
             <span
@@ -68,11 +68,11 @@ exports[`LobbyView > renders with AppBar android 1`] = `
           </div>
         </div>
         <div
-          class="buttonBar"
+          class="_buttonBar_dd2178"
         >
           <button
             aria-disabled="true"
-            class="_button_1nw83_8 join wait"
+            class="_button_1nw83_8 _join_f9ee84 _wait_f9ee84"
             data-kind="primary"
             data-size="md"
             data-testid="lobby_joinCall"
@@ -94,15 +94,15 @@ exports[`LobbyView > renders with AppBar android 1`] = `
       </a>
     </div>
     <div
-      class="footer"
+      class="_footer_20b7b4"
       data-testid="footer-container"
     >
       <div
-        class="settingsLogoContainer"
+        class="_settingsLogoContainer_20b7b4"
       >
         <button
           aria-labelledby="_r_3c_"
-          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -129,11 +129,11 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </button>
       </div>
       <div
-        class="buttons"
+        class="_buttons_20b7b4"
       >
         <button
           aria-labelledby="_r_3h_"
-          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -205,7 +205,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         </button>
         <button
           aria-labelledby="_r_40_"
-          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -234,12 +234,12 @@ exports[`LobbyView > renders with AppBar android 1`] = `
 exports[`LobbyView > renders with AppBar ios 1`] = `
 <div>
   <div
-    class="bar"
+    class="_bar_221541"
   >
     <header>
       <button
         aria-labelledby="_r_4a_"
-        class="_icon-button_1215g_8 primaryButton"
+        class="_icon-button_1215g_8 _primaryButton_221541"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -264,18 +264,18 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </div>
       </button>
       <div
-        class="secondaryButton"
+        class="_secondaryButton_221541"
       />
     </header>
   </div>
   <div
-    class="inRoom"
+    class="_inRoom_4e7ff8"
   >
     <div
-      class="content"
+      class="_content_f9ee84"
     >
       <div
-        class="preview"
+        class="_preview_dd2178"
       >
         <video
           disablepictureinpicture=""
@@ -283,7 +283,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
           tabindex="-1"
         />
         <div
-          class="avatarContainer"
+          class="_avatarContainer_dd2178"
         >
           <div>
             <span
@@ -299,11 +299,11 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
           </div>
         </div>
         <div
-          class="buttonBar"
+          class="_buttonBar_dd2178"
         >
           <button
             aria-disabled="true"
-            class="_button_1nw83_8 join wait"
+            class="_button_1nw83_8 _join_f9ee84 _wait_f9ee84"
             data-kind="primary"
             data-size="md"
             data-testid="lobby_joinCall"
@@ -325,15 +325,15 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
       </a>
     </div>
     <div
-      class="footer"
+      class="_footer_20b7b4"
       data-testid="footer-container"
     >
       <div
-        class="settingsLogoContainer"
+        class="_settingsLogoContainer_20b7b4"
       >
         <button
           aria-labelledby="_r_4g_"
-          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -360,11 +360,11 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </button>
       </div>
       <div
-        class="buttons"
+        class="_buttons_20b7b4"
       >
         <button
           aria-labelledby="_r_4l_"
-          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -436,7 +436,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         </button>
         <button
           aria-labelledby="_r_54_"
-          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"
@@ -465,21 +465,21 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
 exports[`LobbyView > renders with header and participant count 1`] = `
 <div>
   <div
-    class="inRoom"
+    class="_inRoom_4e7ff8"
   >
     <header
-      class="header"
+      class="_header_e4b327"
     >
       <div
-        class="nav leftNav"
+        class="_nav_e4b327 _leftNav_e4b327"
       >
         <div
-          class="roomHeaderInfo"
+          class="_roomHeaderInfo_e4b327"
           data-size="lg"
         >
           <span
             aria-label="!room:example.org"
-            class="_avatar_va14e_8 roomAvatar _avatar-imageless_va14e_55"
+            class="_avatar_va14e_8 _roomAvatar_e4b327 _avatar-imageless_va14e_55"
             data-color="3"
             data-type="round"
             role="img"
@@ -488,7 +488,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             T
           </span>
           <div
-            class="nameLine"
+            class="_nameLine_e4b327"
           >
             <h1
               class="_typography_6v6n8_153 _font-heading-md-semibold_6v6n8_112"
@@ -501,7 +501,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             >
               <svg
                 aria-labelledby="_r_0_"
-                class="lock"
+                class="_lock_edc97d"
                 data-encrypted="false"
                 fill="currentColor"
                 height="16"
@@ -516,7 +516,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             </span>
           </div>
           <div
-            class="participantsLine"
+            class="_participantsLine_e4b327"
           >
             <svg
               aria-label="Participants"
@@ -546,14 +546,14 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </div>
       </div>
       <div
-        class="nav rightNav"
+        class="_nav_e4b327 _rightNav_e4b327"
       />
     </header>
     <div
-      class="content"
+      class="_content_f9ee84"
     >
       <div
-        class="preview"
+        class="_preview_dd2178"
       >
         <video
           disablepictureinpicture=""
@@ -561,7 +561,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
           tabindex="-1"
         />
         <div
-          class="avatarContainer"
+          class="_avatarContainer_dd2178"
         >
           <div>
             <span
@@ -577,10 +577,10 @@ exports[`LobbyView > renders with header and participant count 1`] = `
           </div>
         </div>
         <div
-          class="buttonBar"
+          class="_buttonBar_dd2178"
         >
           <button
-            class="_button_1nw83_8 join"
+            class="_button_1nw83_8 _join_f9ee84"
             data-kind="primary"
             data-size="lg"
             data-testid="lobby_joinCall"
@@ -602,15 +602,15 @@ exports[`LobbyView > renders with header and participant count 1`] = `
       </a>
     </div>
     <div
-      class="footer"
+      class="_footer_20b7b4"
       data-testid="footer-container"
     >
       <div
-        class="settingsLogoContainer"
+        class="_settingsLogoContainer_20b7b4"
       >
         <button
           aria-labelledby="_r_6_"
-          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
           data-kind="secondary"
           data-testid="settings-bottom-left"
           role="button"
@@ -636,7 +636,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
           </div>
         </button>
         <div
-          class="logo"
+          class="_logo_20b7b4"
         >
           <svg
             aria-hidden="true"
@@ -741,11 +741,11 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </div>
       </div>
       <div
-        class="buttons"
+        class="_buttons_20b7b4"
       >
         <button
           aria-labelledby="_r_b_"
-          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="settings-bottom-center"
@@ -817,7 +817,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         </button>
         <button
           aria-labelledby="_r_q_"
-          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
           data-testid="incall_leave"

src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap

@@ -18,10 +18,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     Device ID: DEVICE123
   </p>
   <div
-    class="fieldRow"
+    class="_fieldRow_1bd8c0"
   >
     <div
-      class="field inputField"
+      class="_field_1bd8c0 _inputField_1bd8c0"
     >
       <input
         aria-describedby="_r_1_"
@@ -38,10 +38,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="fieldRow"
+    class="_fieldRow_1bd8c0"
   >
     <div
-      class="field checkboxField"
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
     >
       <input
         aria-describedby="_r_2_"
@@ -52,7 +52,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="debugTileLayout"
       >
         <div
-          class="checkbox"
+          class="_checkbox_1bd8c0"
         >
           <svg
             fill="none"
@@ -75,10 +75,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="fieldRow"
+    class="_fieldRow_1bd8c0"
   >
     <div
-      class="field checkboxField"
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
     >
       <input
         aria-describedby="_r_3_"
@@ -89,7 +89,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="showConnectionStats"
       >
         <div
-          class="checkbox"
+          class="_checkbox_1bd8c0"
         >
           <svg
             fill="none"
@@ -112,10 +112,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="fieldRow"
+    class="_fieldRow_1bd8c0"
   >
     <div
-      class="field checkboxField"
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
     >
       <input
         aria-describedby="_r_4_"
@@ -126,7 +126,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="muteAllAudio"
       >
         <div
-          class="checkbox"
+          class="_checkbox_1bd8c0"
         >
           <svg
             fill="none"
@@ -150,10 +150,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   </div>
    
   <div
-    class="fieldRow"
+    class="_fieldRow_1bd8c0"
   >
     <div
-      class="field checkboxField"
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
     >
       <input
         aria-describedby="_r_5_"
@@ -164,7 +164,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="alwaysShowIphoneEarpiece"
       >
         <div
-          class="checkbox"
+          class="_checkbox_1bd8c0"
         >
           <svg
             fill="none"
@@ -187,10 +187,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </div>
   <div
-    class="fieldRow"
+    class="_fieldRow_1bd8c0"
   >
     <div
-      class="field checkboxField"
+      class="_field_1bd8c0 _checkboxField_1bd8c0"
     >
       <input
         aria-describedby="_r_6_"
@@ -201,7 +201,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
         for="enableLivekitExtendedLogs"
       >
         <div
-          class="checkbox"
+          class="_checkbox_1bd8c0"
         >
           <svg
             fill="none"
@@ -386,7 +386,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     </div>
   </form>
   <div
-    class="livekit_room_box"
+    class="_livekit_room_box_2ddec4"
   >
     <h4>
       LiveKit SFU: wss://local-sfu.example.org
@@ -427,7 +427,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     <ul />
   </div>
   <div
-    class="livekit_room_box"
+    class="_livekit_room_box_2ddec4"
   >
     <h4>
       LiveKit SFU: wss://remote-sfu.example.org

src/tile/TileAvatar.test.tsx

@@ -6,22 +6,22 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { expect, describe, it } from "vitest";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
 import { TileAvatar } from "./TileAvatar";
 
 describe("TileAvatar", () => {
   it("should show loading spinner when loading", () => {
-    const { container } = render(
+    render(
       <TileAvatar id="@a:example.org" name="Alice" size={96} loading={true} />,
     );
-    expect(container.querySelector(".loading")).toBeInTheDocument();
+    screen.getByLabelText("Loading…");
   });
 
   it("should not show loading spinner when not loading", () => {
-    const { container } = render(
+    render(
       <TileAvatar id="@a:example.org" name="Alice" size={96} loading={false} />,
     );
-    expect(container.querySelector(".loading")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Loading…")).toBe(null);
   });
 });

src/tile/TileAvatar.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC } from "react";
 import { InlineSpinner } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
 
 import styles from "./TileAvatar.module.css";
 import { Avatar, type Props as AvatarProps } from "../Avatar";
@@ -17,11 +18,12 @@ interface Props extends AvatarProps {
 }
 
 export const TileAvatar: FC<Props> = ({ size, loading, ...props }) => {
+  const { t } = useTranslation();
   return (
     <div>
       {loading && (
         <div className={styles.loading}>
-          <InlineSpinner size={size / 3} />
+          <InlineSpinner size={size / 3} aria-label={t("common.loading")} />
         </div>
       )}
       <Avatar size={size} {...props} />

vitest.config.ts

@@ -18,12 +18,7 @@ export default defineConfig((configEnv) =>
             extends: true,
             test: {
               name: "unit",
-              css: {
+              css: { include: /.+/ },
-                include: /.+/,
-                modules: {
-                  classNameStrategy: "non-scoped",
-                },
-              },
               setupFiles: ["src/vitest.setup.ts"],
               environment: "jsdom",
               include: ["src/**/*.test.ts", "src/**/*.test.tsx"],