Update the way we render icons for accessibility (#31731)

* Switch to Compound icons to replace old icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Apply same treatment to missed icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove duplicated icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in ImageView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in ExtensionsCard Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LegacyRoomListHeader Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in ImageSizePanel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LegacyRoomList Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove icon from CreateSecretStorageDialog title Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LiveContentSummary Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in RoomCallBanner Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in NonUrgentEchoFailureToast Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in LegacyCallViewHeader Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch from css masks to rendering svg in CallEvent Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace dark-light-mode.svg with Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Draw stop icon using svg rather than square mask Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace masks in RoomSublist with SVG icons Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace masks with SVG icons in LegacyCall views Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace masks with SVG icons in EventTile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace masks with SVG icons in ForwardDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove redundant css style The `::before` has no content so is never rendered Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update playwright tests & screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove snapshot as it causes issues Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * More tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-16 11:21:57 +00:00
parent 28464b4d12
commit 466f60ead5
31 changed files with 347 additions and 281 deletions
@@ -36,7 +36,9 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {

        // Wait until the file is sent
        await expect(page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();
-        await expect(page.locator(".mx_EventTile.mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();
+        await expect(page.locator(".mx_EventTile.mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
+            "Your message was sent",
+        );
        // wait for the tile to finish loading
        await expect(
            page
@@ -106,8 +106,8 @@ test.describe("Key backup reset from elsewhere", () => {
        // Should be the message we sent plus the room creation event
        await expect(page.locator(".mx_EventTile")).toHaveCount(2);
        await expect(
-            page.locator(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent"),
-        ).toBeVisible();
+            page.locator(".mx_RoomView_MessageList > .mx_EventTile_last").getByRole("status"),
+        ).toHaveAccessibleName("Your message was sent");

        // Wait for it to try uploading the key
        await page.clock.fastForward(20000);
@@ -12,12 +12,16 @@ import { type Locator, type Page } from "@playwright/test";

 import { test, expect } from "../../element-web-test";

+async function waitForMessageSentStatus(msgTile: Locator): Promise<void> {
+    await expect(msgTile.getByRole("status")).toHaveAccessibleName("Your message was sent");
+}
+
 async function sendMessage(page: Page, message: string): Promise<Locator> {
    await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill(message);
    await page.getByRole("button", { name: "Send message" }).click();

    const msgTile = page.locator(".mx_EventTile_last");
-    await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
+    await waitForMessageSentStatus(msgTile);
    return msgTile;
 }

@@ -31,7 +35,7 @@ async function sendMultilineMessages(page: Page, messages: string[]) {
    await page.getByRole("button", { name: "Send message" }).click();

    const msgTile = page.locator(".mx_EventTile_last");
-    await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
+    await waitForMessageSentStatus(msgTile);
    return msgTile;
 }

@@ -44,7 +48,7 @@ async function replyMessage(page: Page, message: Locator, replyMessage: string):
    await page.getByRole("button", { name: "Send message" }).click();

    const msgTile = page.locator(".mx_EventTile_last");
-    await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
+    await waitForMessageSentStatus(msgTile);
    return msgTile;
 }

@@ -23,7 +23,9 @@ async function uploadFile(page: Page, file: string) {

    // Wait until the file is sent
    await expect(page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();
-    await expect(page.locator(".mx_EventTile.mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();
+    await expect(page.locator(".mx_EventTile.mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
+        "Your message was sent",
+    );
 }

 test.describe("FilePanel", () => {
@@ -410,7 +410,9 @@ test.describe("Threads", () => {
            await textbox.fill("Please come here");
            await textbox.press("Enter");
            // Wait until the reply is sent
-            await expect(locator.locator(".mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();
+            await expect(locator.locator(".mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
+                "Your message was sent",
+            );

            // Take a snapshot of reply to the shared location
            await page.addStyleTag({ content: css });
@@ -385,8 +385,8 @@ test.describe("Timeline", () => {

                // Make sure the second message was sent
                await expect(
-                    page.locator(".mx_RoomView_MessageList > .mx_EventTile_last .mx_EventTile_receiptSent"),
-                ).toBeVisible();
+                    page.locator(".mx_RoomView_MessageList > .mx_EventTile_last").getByRole("status"),
+                ).toHaveAccessibleName("Your message was sent");

                // 1. Alignment of collapsed GELS (generic event list summary) and messages
                // Check inline start spacing of collapsed GELS
@@ -468,8 +468,8 @@ test.describe("Timeline", () => {
                    page.locator(".mx_GenericEventListSummary .mx_EventTile_last .mx_RedactedBody"),
                ).toBeVisible();
                await expect(
-                    page.locator(".mx_GenericEventListSummary .mx_EventTile_last .mx_EventTile_receiptSent"),
-                ).toBeVisible();
+                    page.locator(".mx_GenericEventListSummary .mx_EventTile_last").getByRole("status"),
+                ).toHaveAccessibleName("Your message was sent");
                // Record alignment of expanded GELS and placeholder of deleted message on messagePanel
                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
                    "expanded-gels-redaction-placeholder.png",
@@ -502,8 +502,8 @@ test.describe("Timeline", () => {
                await expect(page.locator(".mx_EventTile_emote .mx_EventTile_avatar")).toHaveCSS("margin-left", "99px");
                // Make sure emote was sent
                await expect(
-                    page.locator(".mx_EventTile_last.mx_EventTile_emote .mx_EventTile_receiptSent"),
-                ).toBeVisible();
+                    page.locator(".mx_EventTile_last.mx_EventTile_emote").getByRole("status"),
+                ).toHaveAccessibleName("Your message was sent");
                // Record alignment of expanded GELS, placeholder of deleted message, and emote
                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", {
                    // Exclude timestamp from snapshot of mx_MainSplit
@@ -772,7 +772,9 @@ test.describe("Timeline", () => {

            // Wait until the file is sent
            await expect(page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();
-            await expect(page.locator(".mx_EventTile.mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();
+            await expect(page.locator(".mx_EventTile.mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
+                "Your message was sent",
+            );

            // Assert that the file size is displayed in kibibytes (1024 bytes), not kilobytes (1000 bytes)
            // See: https://github.com/vector-im/element-web/issues/24866
@@ -1151,7 +1153,9 @@ test.describe("Timeline", () => {
            // Assert that 'reply2' was sent
            await expect(page.locator(".mx_RoomView_body .mx_EventTile_last").getByText(reply2)).toBeVisible();

-            await expect(page.locator(".mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last").getByRole("status")).toHaveAccessibleName(
+                "Your message was sent",
+            );

            // Exclude timestamp and read marker from snapshot
            const screenshotOptions = {
@@ -1301,7 +1305,7 @@ test.describe("Timeline", () => {
                await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
                const lastEventTileIrc = page.locator(".mx_EventTile_last[data-layout='irc']");
                await expect(lastEventTileIrc.locator(".mx_MTextBody").first()).toBeVisible();
-                await expect(lastEventTileIrc.locator(".mx_EventTile_receiptSent")).toBeVisible(); // rendered at the bottom of EventTile
+                await expect(lastEventTileIrc.getByRole("status")).toHaveAccessibleName("Your message was sent"); // rendered at the bottom of EventTile
                // Take a snapshot in IRC layout
                await expect(page.locator(".mx_ScrollPanel")).toMatchScreenshot(
                    "long-strings-with-reply-irc-layout.png",
@@ -1314,7 +1318,7 @@ test.describe("Timeline", () => {
                await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
                const lastEventTileGroup = page.locator(".mx_EventTile_last[data-layout='group']");
                await expect(lastEventTileGroup.locator(".mx_MTextBody").first()).toBeVisible();
-                await expect(lastEventTileGroup.locator(".mx_EventTile_receiptSent")).toBeVisible();
+                await expect(lastEventTileGroup.getByRole("status")).toHaveAccessibleName("Your message was sent");
                await expect(page.locator(".mx_ScrollPanel")).toMatchScreenshot(
                    "long-strings-with-reply-modern-layout.png",
                    screenshotOptions,
@@ -1326,7 +1330,7 @@ test.describe("Timeline", () => {
                await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
                const lastEventTileBubble = page.locator(".mx_EventTile_last[data-layout='bubble']");
                await expect(lastEventTileBubble.locator(".mx_MTextBody").first()).toBeVisible();
-                await expect(lastEventTileBubble.locator(".mx_EventTile_receiptSent")).toBeVisible();
+                await expect(lastEventTileBubble.getByRole("status")).toHaveAccessibleName("Your message was sent");
                await expect(page.locator(".mx_ScrollPanel")).toMatchScreenshot(
                    "long-strings-with-reply-bubble-layout.png",
                    screenshotOptions,