Update vector-im (compound-web to 8.2.1, design tokens is already at 6.0.0 on develop)

playwright/e2e/crypto/toasts.spec.ts

@@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => {
         await toast.getByRole("button", { name: "Continue" }).click();
 
         // Then we see the Encryption settings dialog with an option to turn on key storage
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that
         await page.getByRole("button", { name: "Close dialog" }).click();
@@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByRole("button", { name: "Go to Settings" }).click();
 
         // Then we see Encryption settings again
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
         await page.getByRole("button", { name: "Close dialog" }).click();

playwright/e2e/crypto/utils.ts

@@ -192,7 +192,7 @@
     // The key backup version is as expected
     expect(backupInfo.version).toBe(expectedBackupVersion);
     // The active backup version is as expected
     expect(activeBackupVersion).toBe(expectedBackupVersion);
     // The backup key is stored in 4S
     if (checkBackupKeyIn4S) expect(backupKeyIn4S).toBe(true);
 
@@ -300,9 +300,9 @@
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
     }
 
     await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -323,11 +323,11 @@
 export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
         await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
 
         // Wait for the update to account data to stick
         await new Promise((resolve) => setTimeout(resolve, 2000));

playwright/e2e/settings/appearance-user-settings-tab/index.ts

@@ -85,7 +85,7 @@ class Helpers {
      * Return the system theme toggle
      */
     getMatchSystemThemeCheckbox() {
-        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
+        return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
     }
 
     /**
@@ -219,7 +219,7 @@ class Helpers {
      * Return the compact layout checkbox
      */
     getCompactLayoutCheckbox() {
-        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
+        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
     }
 
     /**

playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts

@@ -117,7 +117,7 @@ test.describe("Encryption tab", () => {
             await verifySession(app, recoveryKey.encodedPrivateKey);
             await util.openEncryptionTab();
 
-            await page.getByRole("checkbox", { name: "Allow key storage" }).click();
+            await page.getByRole("switch", { name: "Allow key storage" }).click();
 
             await expect(
                 page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
@@ -136,7 +136,7 @@ test.describe("Encryption tab", () => {
 
             await page.getByRole("button", { name: "Delete key storage" }).click();
 
-            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
 
             for (const prom of deleteRequestPromises) {
                 const request = await prom;

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

@@ -34,6 +34,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <div
+        aria-describedby="«r2»"
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
         role="button"

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

@@ -74,6 +74,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is a backup on the
       </details>
     </div>
     <div
+      aria-describedby="«rq»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -162,6 +163,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is no backup on th
       </details>
     </div>
     <div
+      aria-describedby="«r10»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"

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

@@ -103,6 +103,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
       </div>
     </div>
     <div
+      aria-describedby="«r2»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -317,6 +318,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
       </div>
     </div>
     <div
+      aria-describedby="«r8»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"

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

@@ -286,6 +286,7 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
       </div>
     </div>
     <div
+      aria-describedby="«r2»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -484,6 +485,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is ca
       </div>
     </div>
     <div
+      aria-describedby="«rk»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -550,6 +552,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in
       </div>
     </div>
     <div
+      aria-describedby="«rq»"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"

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

@@ -340,8 +340,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby="«r2j»"
-                aria-labelledby="«r2i»"
+                aria-describedby="«r2n»"
+                aria-labelledby="«r2m»"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <svg

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

@@ -21,6 +21,7 @@ exports[`<ImageView /> renders correctly 1`] = `
         class="mx_ImageView_toolbar"
       >
         <div
+          aria-describedby="«r2»"
           aria-label="Zoom out"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
           role="button"

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

@@ -32,6 +32,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     class="mx_ZoomButtons"
   >
     <div
+      aria-describedby="«r6»"
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
       data-testid="map-zoom-in-button"

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

@@ -215,6 +215,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               aria-hidden="true"
               class="_input_19o42_24"
               id="«rv»"
+              role="switch"
               type="checkbox"
             />
             <div
@@ -939,6 +940,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               aria-hidden="true"
               class="_input_19o42_24"
               id="«r5»"
+              role="switch"
               type="checkbox"
             />
             <div
@@ -1701,6 +1703,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               aria-hidden="true"
               class="_input_19o42_24"
               id="«ri»"
+              role="switch"
               type="checkbox"
             />
             <div

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

@@ -185,7 +185,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   aria-label="Open menu"
   aria-labelledby="radix-«r10»"
   aria-orientation="vertical"
-  class="_menu_19sse_8"
+  class="_menu_1glhz_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -376,7 +376,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   aria-label="Open menu"
   aria-labelledby="radix-«rl»"
   aria-orientation="vertical"
-  class="_menu_19sse_8"
+  class="_menu_1glhz_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""

test/unit-tests/components/views/settings/LayoutSwitcher-test.tsx

@@ -70,20 +70,20 @@ describe("<LayoutSwitcher />", () => {
             await SettingsStore.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
             await renderLayoutSwitcher();
 
-            expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeChecked();
+            expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeChecked();
         });
 
         it("should change the setting when toggled", async () => {
             await renderLayoutSwitcher();
-            act(() => screen.getByRole("checkbox", { name: "Show compact text and messages" }).click());
+            act(() => screen.getByRole("switch", { name: "Show compact text and messages" }).click());
 
             await waitFor(() => expect(SettingsStore.getValue("useCompactLayout")).toBe(true));
         });
 
         it("should be disabled when the modern layout is not enabled", async () => {
             await SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
             await renderLayoutSwitcher();
-            expect(screen.getByRole("checkbox", { name: "Show compact text and messages" })).toBeDisabled();
+            expect(screen.getByRole("switch", { name: "Show compact text and messages" })).toBeDisabled();
         });
     });
 });

test/unit-tests/components/views/settings/ThemeChoicePanel-test.tsx

@@ -56,24 +56,24 @@ describe("<ThemeChoicePanel />", () => {
         describe("system theme", () => {
             it("should disable Match system theme", async () => {
                 render(<ThemeChoicePanel />);
-                expect(screen.getByRole("checkbox", { name: "Match system theme" })).not.toBeChecked();
+                expect(screen.getByRole("switch", { name: "Match system theme" })).not.toBeChecked();
             });
 
             it("should enable Match system theme", async () => {
                 await enableSystemTheme(true);
 
                 render(<ThemeChoicePanel />);
-                expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
+                expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked();
             });
 
             it("should change the system theme when clicked", async () => {
                 jest.spyOn(SettingsStore, "setValue");
 
                 render(<ThemeChoicePanel />);
-                act(() => screen.getByRole("checkbox", { name: "Match system theme" }).click());
+                act(() => screen.getByRole("switch", { name: "Match system theme" }).click());
 
                 // The system theme should be enabled
-                expect(screen.getByRole("checkbox", { name: "Match system theme" })).toBeChecked();
+                expect(screen.getByRole("switch", { name: "Match system theme" })).toBeChecked();
                 expect(SettingsStore.setValue).toHaveBeenCalledWith("use_system_theme", null, "device", true);
             });
         });

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

@@ -418,6 +418,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 class="_input_19o42_24"
                 id="radix-«rr»"
                 name="compactLayout"
+                role="switch"
                 title=""
                 type="checkbox"
               />

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

@@ -34,6 +34,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 class="_input_19o42_24"
                 id="radix-«r28»"
                 name="systemTheme"
+                role="switch"
                 title=""
                 type="checkbox"
               />
@@ -312,6 +313,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 class="_input_19o42_24"
                 id="radix-«r10»"
                 name="systemTheme"
+                role="switch"
                 title=""
                 type="checkbox"
               />
@@ -590,6 +592,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 class="_input_19o42_24"
                 id="radix-«r0»"
                 name="systemTheme"
+                role="switch"
                 title=""
                 type="checkbox"
               />

test/unit-tests/components/views/settings/encryption/AdvancedPanel-test.tsx

@@ -74,7 +74,7 @@ describe("<AdvancedPanel />", () => {
             await renderAdvancedPanel();
 
             expect(screen.getByTestId("otherSettings")).toMatchSnapshot();
-            const checkbox = screen.getByRole("checkbox", {
+            const checkbox = screen.getByRole("switch", {
                 name: "In encrypted rooms, only send messages to verified users",
             });
             expect(checkbox).toBeChecked();

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

@@ -224,6 +224,7 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
           class="_input_19o42_24"
           id="radix-«r6»"
           name="neverSendEncrypted"
+          role="switch"
           title=""
           type="checkbox"
         />

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

@@ -561,6 +561,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         class="_input_19o42_24"
                         id="radix-«ru»"
                         name="compactLayout"
+                        role="switch"
                         title=""
                         type="checkbox"
                       />

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

@@ -4,7 +4,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 <div
   aria-labelledby="radix-«r2f»"
   aria-orientation="vertical"
-  class="_menu_19sse_8"
+  class="_menu_1glhz_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -17,7 +17,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_19sse_74"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
     id="«r2n»"
   >
     Threads activity
@@ -230,7 +230,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
     <div
       aria-labelledby="radix-«ro»"
       aria-orientation="vertical"
-      class="_menu_19sse_8"
+      class="_menu_1glhz_8"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -243,7 +243,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
       tabindex="-1"
     >
       <h3
-        class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_19sse_74"
+        class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
         id="«r10»"
       >
         Threads activity
@@ -273,7 +273,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
   aria-labelledby="radix-«r33»"
   aria-orientation="vertical"
-  class="_menu_19sse_8"
+  class="_menu_1glhz_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -286,7 +286,7 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_19sse_74"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
     id="«r3b»"
   >
     Threads activity
@@ -307,7 +307,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
 <div
   aria-labelledby="radix-«r3c»"
   aria-orientation="vertical"
-  class="_menu_19sse_8"
+  class="_menu_1glhz_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -320,7 +320,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_19sse_74"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1glhz_74"
     id="«r3k»"
   >
     Threads activity