Update compound and use subtleBackground

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

package.json

@@ -81,7 +81,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^5.2.3",
+        "@vector-im/compound-web": "^5.4.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/crypto/crypto.spec.ts

@@ -227,7 +227,7 @@ test.describe("Cryptography", function () {
         await verify(page, bob);
 
         // Assert that verified icon is rendered
-        await page.getByRole("button", { name: "Room members" }).click();
+        await page.getByTestId("base-card-back-button").click();
         await page.locator(".mx_RightPanelTabs").getByText("Info").click();
         await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
 

playwright/e2e/crypto/event-shields.spec.ts

@@ -132,7 +132,7 @@ test.describe("Cryptography", function () {
             // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info.
             async function awaitOneDevice(iterations = 1) {
                 const rightPanel = page.locator(".mx_RightPanel");
-                await rightPanel.getByRole("button", { name: "Room members" }).click();
+                await rightPanel.getByTestId("base-card-back-button").click();
                 await rightPanel.getByText("Bob").click();
                 const sessionCountText = await rightPanel
                     .locator(".mx_UserInfo_devices")

playwright/e2e/read-receipts/index.ts

@@ -538,7 +538,7 @@ class Helpers {
         const threadPanel = this.page.locator(".mx_ThreadPanel");
         await expect(threadPanel).toBeVisible();
         await threadPanel.evaluate(($panel) => {
-            const $button = $panel.querySelector<HTMLElement>('.mx_BaseCard_back[aria-label="Threads"]');
+            const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');
             // If the Threads back button is present then click it - the
             // threads button can open either threads list or thread panel
             if ($button) {

playwright/e2e/right-panel/right-panel.spec.ts

@@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_FilePanel")).toBeVisible();
             await expect(page.locator(".mx_FilePanel_empty")).toBeVisible();
 
-            await page.getByRole("button", { name: "Room information" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await checkRoomSummaryCard(page, ROOM_NAME);
         });
 
@@ -120,7 +120,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
-            await page.getByRole("button", { name: "Room members" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
 
             await page.locator(".mx_RightPanelTabs").getByText("Info").click();
@@ -145,7 +145,7 @@ test.describe("RightPanel", () => {
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
             await expect(page.locator(".mx_SpaceScopeHeader").getByText(SPACE_NAME)).toBeVisible();
 
-            await page.getByRole("button", { name: "Back" }).click();
+            await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
         });
     });

playwright/e2e/threads/threads.spec.ts

@@ -433,7 +433,7 @@ test.describe("Threads", () => {
         await textbox.press("Enter");
         await expect(locator.locator(".mx_EventTile_last").getByText("Hello Mr. User")).toBeAttached();
         // Close thread
-        await locator.getByRole("button", { name: "Close" }).click();
+        await locator.getByTestId("base-card-close-button").click();
 
         // Open existing thread
         locator = page
@@ -486,7 +486,7 @@ test.describe("Threads", () => {
             await textbox.press("Enter");
             await expect(threadPanel.locator(".mx_EventTile_last").getByText(threadMessage)).toBeVisible();
             // Close thread
-            await threadPanel.getByRole("button", { name: "Close" }).click();
+            await threadPanel.getByTestId("base-card-close-button").click();
         };
 
         await sendMessage("Hello Mr. Bot");