From 466f60ead5c6de4f263188aff95f62f33ca64545 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 16 Jan 2026 11:21:57 +0000 Subject: [PATCH] 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> --- package.json | 2 +- .../e2e/audio-player/audio-player.spec.ts | 4 +- playwright/e2e/crypto/backups-mas.spec.ts | 4 +- playwright/e2e/messages/messages.spec.ts | 10 +- playwright/e2e/right-panel/file-panel.spec.ts | 4 +- playwright/e2e/threads/threads.spec.ts | 4 +- playwright/e2e/timeline/timeline.spec.ts | 26 ++-- .../user-menu.spec.ts/user-menu-linux.png | Bin 15024 -> 14917 bytes res/css/views/dialogs/_ForwardDialog.pcss | 26 +--- .../views/dialogs/_RoomSettingsDialog.pcss | 8 -- res/css/views/messages/_LegacyCallEvent.pcss | 17 +-- res/css/views/rooms/_EventTile.pcss | 27 +--- res/css/views/rooms/_RoomSublist.pcss | 14 +- .../views/rooms/_VoiceRecordComposerTile.pcss | 21 ++- .../toasts/_IncomingLegacyCallToast.pcss | 17 +-- .../_LegacyCallViewButtons.pcss | 84 +++-------- .../roomlist/dark-light-mode.svg | 3 - src/components/structures/UserMenu.tsx | 4 +- .../views/dialogs/ForwardDialog.tsx | 5 +- .../views/messages/LegacyCallEvent.tsx | 13 +- src/components/views/rooms/EventTile.tsx | 35 ++--- src/components/views/rooms/RoomSublist.tsx | 9 +- .../views/rooms/VoiceRecordComposerTile.tsx | 6 +- .../views/settings/AvatarSetting.tsx | 2 +- .../LegacyCallView/LegacyCallViewButtons.tsx | 53 +++++-- src/toasts/IncomingLegacyCallToast.tsx | 11 +- .../structures/MessagePanel-test.tsx | 10 +- .../components/views/rooms/EventTile-test.tsx | 17 +++ .../LegacyCallViewButtons-test.tsx.snap | 133 ++++++++++++++++-- .../IncomingLegacyCallToast-test.tsx.snap | 51 ++++++- yarn.lock | 8 +- 31 files changed, 347 insertions(+), 281 deletions(-) delete mode 100644 res/img/element-icons/roomlist/dark-light-mode.svg diff --git a/package.json b/package.json index 29ef96753c..ba656afa87 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "@matrix-org/spec": "^1.7.0", "@sentry/browser": "^10.0.0", "@types/png-chunks-extract": "^1.0.2", - "@vector-im/compound-design-tokens": "6.6.0", + "@vector-im/compound-design-tokens": "6.8.0", "@vector-im/compound-web": "^8.3.4", "@vector-im/matrix-wysiwyg": "2.40.0", "@zxcvbn-ts/core": "^3.0.4", diff --git a/playwright/e2e/audio-player/audio-player.spec.ts b/playwright/e2e/audio-player/audio-player.spec.ts index 01b0f23bb4..d6f730b23b 100644 --- a/playwright/e2e/audio-player/audio-player.spec.ts +++ b/playwright/e2e/audio-player/audio-player.spec.ts @@ -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 diff --git a/playwright/e2e/crypto/backups-mas.spec.ts b/playwright/e2e/crypto/backups-mas.spec.ts index f048bc6a2b..521ec109d9 100644 --- a/playwright/e2e/crypto/backups-mas.spec.ts +++ b/playwright/e2e/crypto/backups-mas.spec.ts @@ -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); diff --git a/playwright/e2e/messages/messages.spec.ts b/playwright/e2e/messages/messages.spec.ts index a5ea38482c..04763e1079 100644 --- a/playwright/e2e/messages/messages.spec.ts +++ b/playwright/e2e/messages/messages.spec.ts @@ -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 { + await expect(msgTile.getByRole("status")).toHaveAccessibleName("Your message was sent"); +} + async function sendMessage(page: Page, message: string): Promise { 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; } diff --git a/playwright/e2e/right-panel/file-panel.spec.ts b/playwright/e2e/right-panel/file-panel.spec.ts index 5549b2d315..69e17eeef1 100644 --- a/playwright/e2e/right-panel/file-panel.spec.ts +++ b/playwright/e2e/right-panel/file-panel.spec.ts @@ -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", () => { diff --git a/playwright/e2e/threads/threads.spec.ts b/playwright/e2e/threads/threads.spec.ts index 5ffc2003b8..e9e40dc4b4 100644 --- a/playwright/e2e/threads/threads.spec.ts +++ b/playwright/e2e/threads/threads.spec.ts @@ -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 }); diff --git a/playwright/e2e/timeline/timeline.spec.ts b/playwright/e2e/timeline/timeline.spec.ts index 806e7e9038..b9df009df9 100644 --- a/playwright/e2e/timeline/timeline.spec.ts +++ b/playwright/e2e/timeline/timeline.spec.ts @@ -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, diff --git a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png index 94efd93b7e3324d4b7abc6c2769911edb77fcd3f..a911341579b91b931a050d1394d05e5a9b9966f0 100644 GIT binary patch literal 14917 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 JREin;|2NrV27Lek diff --git a/res/css/views/dialogs/_ForwardDialog.pcss b/res/css/views/dialogs/_ForwardDialog.pcss index 2e5b190487..b155bd1f4a 100644 --- a/res/css/views/dialogs/_ForwardDialog.pcss +++ b/res/css/views/dialogs/_ForwardDialog.pcss @@ -134,35 +134,17 @@ Please see LICENSE files in the repository root for full details. visibility: hidden; } - .mx_ForwardList_sendIcon, - .mx_NotificationBadge { + & > svg { position: absolute; + width: 14px; + height: 14px; + color: $accent; } .mx_NotificationBadge { /* Match the failed to send indicator's color with the disabled button */ background-color: $button-danger-disabled-fg-color; } - - &.mx_ForwardList_sending .mx_ForwardList_sendIcon { - background-color: $accent; - mask-image: url("@vector-im/compound-design-tokens/icons/circle.svg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: 14px; - width: 14px; - height: 14px; - } - - &.mx_ForwardList_sent .mx_ForwardList_sendIcon { - background-color: $accent; - mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg"); - mask-position: center; - mask-repeat: no-repeat; - mask-size: 14px; - width: 14px; - height: 14px; - } } } } diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss index bc64e9543b..9967adca50 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss @@ -13,11 +13,3 @@ Please see LICENSE files in the repository root for full details. margin: 0 auto; padding-right: 80px; } - -/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */ -.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before { - mask: url("@vector-im/compound-design-tokens/icons/image.svg"); - mask-repeat: no-repeat; - mask-size: 36px; - mask-position: center; -} diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/res/css/views/messages/_LegacyCallEvent.pcss index 48fb197575..b7a69d1f34 100644 --- a/res/css/views/messages/_LegacyCallEvent.pcss +++ b/res/css/views/messages/_LegacyCallEvent.pcss @@ -30,26 +30,13 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyCallEvent_iconButton { display: inline-flex; - &::before { - content: ""; - + svg { height: 16px; width: 16px; - background-color: $secondary-content; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; + color: $secondary-content; } } - .mx_LegacyCallEvent_silence::before { - mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg"); - } - - .mx_LegacyCallEvent_unSilence::before { - mask-image: url("@vector-im/compound-design-tokens/icons/volume-off-solid.svg"); - } - &.mx_LegacyCallEvent_voice { .mx_LegacyCallEvent_type_icon::before, .mx_LegacyCallEvent_content_button_callBack span::before, diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 155d520edf..6ec7a87fb9 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -38,34 +38,11 @@ $left-gutter: 64px; text-align: start; } - .mx_EventTile_receiptSent, - .mx_EventTile_receiptSending { - position: relative; + .mx_ReadReceiptGroup_container svg { display: inline-block; width: 16px; height: 16px; - - &::before { - background-color: var(--cpd-color-icon-tertiary); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 16px; - width: 16px; - height: 16px; - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - } - } - - .mx_EventTile_receiptSent::before { - mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg"); - } - - .mx_EventTile_receiptSending::before { - mask-image: url("@vector-im/compound-design-tokens/icons/circle.svg"); + color: var(--cpd-color-icon-tertiary); } .mx_EventTile_content { diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss index b6aa7e8ecd..aca8109f50 100644 --- a/res/css/views/rooms/_RoomSublist.pcss +++ b/res/css/views/rooms/_RoomSublist.pcss @@ -246,21 +246,9 @@ Please see LICENSE files in the repository root for full details. height: 18px; margin-left: 12px; margin-right: 16px; - mask-position: center; - mask-size: contain; - mask-repeat: no-repeat; - background: $tertiary-content; + color: $tertiary-content; left: -1px; /* adjust for image position */ } - - .mx_RoomSublist_showMoreButtonChevron, - .mx_RoomSublist_showLessButtonChevron { - mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg"); - } - - .mx_RoomSublist_showLessButtonChevron { - transform: rotate(180deg); - } } &.mx_RoomSublist_hasMenuOpen, diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.pcss b/res/css/views/rooms/_VoiceRecordComposerTile.pcss index 1715a8efe5..9c54538673 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.pcss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.pcss @@ -7,23 +7,18 @@ Please see LICENSE files in the repository root for full details. */ .mx_VoiceRecordComposerTile_stop { - /* 28px plus a 2px border makes this a 32px square (as intended) */ - width: 28px; - height: 28px; + /* 20px + 4px padding + 2px border makes this a 32px square (as intended) */ + width: 20px; + height: 20px; + padding: var(--cpd-space-1x); border: 2px solid $voice-record-stop-border-color; border-radius: 32px; margin-right: 2px; /* between us and the waveform component */ - position: relative; - &::after { - content: ""; - width: 14px; - height: 14px; - position: absolute; - top: 7px; - left: 7px; - border-radius: 2px; - background-color: $voice-record-stop-symbol-color; + svg { + width: inherit; + height: inherit; + color: $voice-record-stop-symbol-color; } } diff --git a/res/css/views/toasts/_IncomingLegacyCallToast.pcss b/res/css/views/toasts/_IncomingLegacyCallToast.pcss index 667dd110d1..2d0dae1888 100644 --- a/res/css/views/toasts/_IncomingLegacyCallToast.pcss +++ b/res/css/views/toasts/_IncomingLegacyCallToast.pcss @@ -114,23 +114,10 @@ Please see LICENSE files in the repository root for full details. height: 20px; width: 20px; - &::before { - content: ""; - + svg { height: inherit; width: inherit; - background-color: $tertiary-content; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; + color: $tertiary-content; } } - - .mx_IncomingLegacyCallToast_silence::before { - mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg"); - } - - .mx_IncomingLegacyCallToast_unSilence::before { - mask-image: url("@vector-im/compound-design-tokens/icons/volume-off-solid.svg"); - } } diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index 023f941e71..c4ad182fea 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -44,15 +44,10 @@ Please see LICENSE files in the repository root for full details. box-shadow: 0px 4px 4px 0px #00000026; /* Same on both themes */ - &::before { - content: ""; + svg { display: inline-block; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - - background-color: $call-view-button-on-foreground; + color: $call-view-button-on-foreground; height: 24px; width: 24px; @@ -66,103 +61,60 @@ Please see LICENSE files in the repository root for full details. right: 0; bottom: 0; - &::before { + svg { width: 16px; height: 16px; - mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg"); } + } - &.mx_LegacyCallViewButtons_dropdownButton_collapsed::before { - transform: rotate(180deg); - } + &.mx_LegacyCallViewButtons_button_mic svg { + height: 20px; + width: 20px; } /* State buttons */ &.mx_LegacyCallViewButtons_button_on { background-color: $call-view-button-on-background; - &::before { - background-color: $call-view-button-on-foreground; - } - - &.mx_LegacyCallViewButtons_button_mic::before { - height: 20px; - mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); - width: 20px; - } - - &.mx_LegacyCallViewButtons_button_vid::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); + svg { + color: $call-view-button-on-foreground; } &.mx_LegacyCallViewButtons_button_screensharing { background-color: $accent; - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg"); - background-color: white; /* Same on both themes */ + svg { + color: white; /* Same on both themes */ } } - - &.mx_LegacyCallViewButtons_button_sidebar::before { - mask-image: url("@vector-im/compound-design-tokens/icons/list-view.svg"); - } } &.mx_LegacyCallViewButtons_button_off { background-color: $call-view-button-off-background; - &::before { - background-color: $call-view-button-off-foreground; - } - - &.mx_LegacyCallViewButtons_button_mic::before { - height: 20px; - mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg"); - width: 20px; - } - - &.mx_LegacyCallViewButtons_button_vid::before { - mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg"); - } - - &.mx_LegacyCallViewButtons_button_screensharing { - background-color: $call-view-button-on-background; - - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg"); - background-color: $call-view-button-on-foreground; - } + svg { + color: $call-view-button-off-foreground; } + &.mx_LegacyCallViewButtons_button_screensharing, &.mx_LegacyCallViewButtons_button_sidebar { background-color: $call-view-button-on-background; - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/spotlight-view.svg"); - background-color: $call-view-button-on-foreground; + svg { + color: $call-view-button-on-foreground; } } } /* State buttons */ /* Stateless buttons */ - &.mx_LegacyCallViewButtons_dialpad::before { - mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg"); - } - &.mx_LegacyCallViewButtons_button_hangup { background-color: $alert; - &::before { - mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); - background-color: white; /* Same on both themes */ + svg { + color: white; /* Same on both themes */ } } - - &.mx_LegacyCallViewButtons_button_more::before { - mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg"); - } /* Stateless buttons */ /* Invisible state */ diff --git a/res/img/element-icons/roomlist/dark-light-mode.svg b/res/img/element-icons/roomlist/dark-light-mode.svg deleted file mode 100644 index a6a6464b5c..0000000000 --- a/res/img/element-icons/roomlist/dark-light-mode.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index d077b3da1b..6f9b768588 100644 --- a/src/components/structures/UserMenu.tsx +++ b/src/components/structures/UserMenu.tsx @@ -16,6 +16,7 @@ import { SettingsSolidIcon, LeaveIcon, NotificationsSolidIcon, + ThemeIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; import { MatrixClientPeg } from "../../MatrixClientPeg"; @@ -51,7 +52,6 @@ import PosthogTrackers from "../../PosthogTrackers"; import { type ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload"; import { SDKContext } from "../../contexts/SDKContext"; import { shouldShowFeedback } from "../../utils/Feedback"; -import { Icon as DarkLightModeSvg } from "../../../res/img/element-icons/roomlist/dark-light-mode.svg"; interface IProps { isPanelCollapsed: boolean; @@ -407,7 +407,7 @@ export default class UserMenu extends React.Component { : _t("user_menu|switch_theme_dark") } > - + {topSection} diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index 6b4f737fa0..19c84bc108 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -23,6 +23,7 @@ import { type TimelineEvents, } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; +import { CheckCircleIcon, CircleIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import dis from "../../../dispatcher/dispatcher"; @@ -127,12 +128,12 @@ const Entry: React.FC> = ({ room, type, content, matrixClient: className = "mx_ForwardList_sending"; disabled = true; title = _t("forward|sending"); - icon =

; + icon = ; } else if (sendState === SendState.Sent) { className = "mx_ForwardList_sent"; disabled = true; title = _t("forward|sent"); - icon =
; + icon = ; } else { className = "mx_ForwardList_sendFailed"; disabled = true; diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index f43953fb6e..7996a2a8a6 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.tsx @@ -11,6 +11,7 @@ import { type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { CallErrorCode, CallState } from "matrix-js-sdk/src/webrtc/call"; import classNames from "classnames"; import { Clock } from "@element-hq/web-shared-components"; +import { VolumeOffSolidIcon, VolumeOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import MemberAvatar from "../avatars/MemberAvatar"; @@ -99,18 +100,14 @@ export default class LegacyCallEvent extends React.PureComponent } private renderSilenceIcon(): JSX.Element { - const silenceClass = classNames({ - mx_LegacyCallEvent_iconButton: true, - mx_LegacyCallEvent_unSilence: this.state.silenced, - mx_LegacyCallEvent_silence: !this.state.silenced, - }); - return ( + > + {this.state.silenced ? : } + ); } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index af7b0daa53..4355eacad9 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -35,7 +35,12 @@ import { } from "matrix-js-sdk/src/crypto-api"; import { Tooltip } from "@vector-im/compound-web"; import { uniqueId } from "lodash"; -import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { + CircleIcon, + ErrorSolidIcon, + InfoIcon, + CheckCircleIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; import ReplyChain from "../elements/ReplyChain"; import { _t } from "../../../languageHandler"; @@ -175,7 +180,7 @@ export interface EventTileProps { // the status of this event - ie, mxEvent.status. Denormalised to here so // that we can tell when it changes. - eventSendStatus?: string; + eventSendStatus?: EventStatus; forExport?: boolean; @@ -1187,7 +1192,7 @@ export class UnwrappedEventTile extends React.Component let msgOption: JSX.Element | undefined; if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) { - msgOption = ; + msgOption = ; } else if (this.props.showReadReceipts) { msgOption = ( { } interface ISentReceiptProps { - messageState: EventStatus | null; + messageState: EventStatus | undefined; } function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element { const isSent = !messageState || messageState === "sent"; const isFailed = messageState === "not_sent"; - const receiptClasses = classNames({ - mx_EventTile_receiptSent: isSent, - mx_EventTile_receiptSending: !isSent && !isFailed, - }); - let nonCssBadge: JSX.Element | undefined; - if (isFailed) { - nonCssBadge = ; - } - - let label = _t("timeline|send_state_sending"); + let icon: JSX.Element | undefined; + let label: string | undefined; if (messageState === "encrypting") { + icon = ; label = _t("timeline|send_state_encrypting"); } else if (isSent) { + icon = ; label = _t("timeline|send_state_sent"); } else if (isFailed) { + icon = ; label = _t("timeline|send_state_failed"); + } else { + icon = ; + label = _t("timeline|send_state_sending"); } return ( @@ -1593,9 +1596,7 @@ function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
- - {nonCssBadge} - + {icon}
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 53c2f6782d..ed3b13701c 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -16,6 +16,7 @@ import React, { type JSX, type ComponentType, createRef, type ReactComponentElem import { ChevronDownIcon, ChevronRightIcon, + ChevronUpIcon, OverflowHorizontalIcon, } from "@vector-im/compound-design-tokens/assets/web/icons"; @@ -763,9 +764,7 @@ export default class RoomSublist extends React.Component { className={showMoreBtnClasses} aria-label={label} > - - {/* set by CSS masking */} - + {showMoreText} ); @@ -781,9 +780,7 @@ export default class RoomSublist extends React.Component { className={showMoreBtnClasses} aria-label={label} > - - {/* set by CSS masking */} - + {showLessText} ); diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index ab69536578..17b5664e81 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. import React, { type ReactNode } from "react"; import { type Room, type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; -import { DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; +import { DeleteIcon, StopSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import { _t } from "../../../languageHandler"; import { RecordingState } from "../../../audio/VoiceRecording"; @@ -262,7 +262,9 @@ export default class VoiceRecordComposerTile extends React.PureComponent + > + + ); if (this.state.recorder && !this.state.recorder?.isRecording) { stopBtn = null; diff --git a/src/components/views/settings/AvatarSetting.tsx b/src/components/views/settings/AvatarSetting.tsx index 2c8dac96d7..1c27efa75c 100644 --- a/src/components/views/settings/AvatarSetting.tsx +++ b/src/components/views/settings/AvatarSetting.tsx @@ -175,7 +175,7 @@ const AvatarSetting: React.FC = ({ * to the menu component, hence the empty onClick. */ onClick={() => {}} - className="mx_AvatarSetting_avatarPlaceholder mx_AvatarSetting_avatarDisplay" + className="mx_AvatarSetting_avatarDisplay" disabled={disabled} > , "title" | "element"> & { state: boolean; onLabel?: string; + onIcon: JSX.Element; offLabel?: string; + offIcon: JSX.Element; forceHide?: boolean; onHover?: (hovering: boolean) => void; ref?: Ref; @@ -49,7 +65,9 @@ const LegacyCallViewToggleButton: FC = ({ state: isOn, className, onLabel, + onIcon, offLabel, + offIcon, forceHide, onHover, ref, @@ -71,6 +89,7 @@ const LegacyCallViewToggleButton: FC = ({ onTooltipOpenChange={onHover} {...props} > + {isOn ? onIcon : offIcon} {children} ); @@ -84,10 +103,6 @@ const LegacyCallViewDropdownButton: React.FC = ({ state, d const [menuDisplayed, buttonRef, openMenu, closeMenu] = useContextMenu(); const [hoveringDropdown, setHoveringDropdown] = useState(false); - const classes = classNames("mx_LegacyCallViewButtons_button", "mx_LegacyCallViewButtons_dropdownButton", { - mx_LegacyCallViewButtons_dropdownButton_collapsed: !menuDisplayed, - }); - const onClick = (event: ButtonEvent): void => { event.stopPropagation(); openMenu(); @@ -101,8 +116,10 @@ const LegacyCallViewDropdownButton: React.FC = ({ state, d {...props} > } + offIcon={} onHover={(hovering) => setHoveringDropdown(hovering)} state={state} /> @@ -267,19 +284,23 @@ export default class LegacyCallViewButtons extends React.Component + > + + )} } offLabel={_t("voip|enable_microphone")} + offIcon={} onClick={this.props.handlers.onMicMuteClick} deviceKinds={[MediaDeviceKindEnum.AudioInput, MediaDeviceKindEnum.AudioOutput]} /> @@ -288,7 +309,9 @@ export default class LegacyCallViewButtons extends React.Component} offLabel={_t("voip|enable_camera")} + offIcon={} onClick={this.props.handlers.onVidMuteClick} deviceKinds={[MediaDeviceKindEnum.VideoInput]} /> @@ -298,7 +321,9 @@ export default class LegacyCallViewButtons extends React.Component} offLabel={_t("voip|start_screenshare")} + offIcon={} onClick={this.props.handlers.onScreenshareClick} /> )} @@ -307,26 +332,32 @@ export default class LegacyCallViewButtons extends React.Component} offLabel={_t("voip|show_sidebar_button")} + offIcon={} onClick={this.props.handlers.onToggleSidebarClick} /> )} {this.props.buttonsVisibility.contextMenu && ( + > + + )} + > + +
); } diff --git a/src/toasts/IncomingLegacyCallToast.tsx b/src/toasts/IncomingLegacyCallToast.tsx index 18c3f9f506..4f976ced9f 100644 --- a/src/toasts/IncomingLegacyCallToast.tsx +++ b/src/toasts/IncomingLegacyCallToast.tsx @@ -12,6 +12,7 @@ Please see LICENSE files in the repository root for full details. import React from "react"; import { CallType, type MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import classNames from "classnames"; +import { VolumeOffSolidIcon, VolumeOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import LegacyCallHandler, { LegacyCallHandlerEvent } from "../LegacyCallHandler"; import { MatrixClientPeg } from "../MatrixClientPeg"; @@ -98,10 +99,6 @@ export default class IncomingLegacyCallToast extends React.Component @@ -130,11 +127,13 @@ export default class IncomingLegacyCallToast extends React.Component
+ > + {this.state.silenced ? : } + ); } diff --git a/test/unit-tests/components/structures/MessagePanel-test.tsx b/test/unit-tests/components/structures/MessagePanel-test.tsx index 71234bea3b..cef5310920 100644 --- a/test/unit-tests/components/structures/MessagePanel-test.tsx +++ b/test/unit-tests/components/structures/MessagePanel-test.tsx @@ -11,7 +11,7 @@ import React from "react"; import { EventEmitter } from "events"; import { type MatrixEvent, Room, RoomMember, type Thread, ReceiptType } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -import { render } from "jest-matrix-react"; +import { render, within } from "jest-matrix-react"; import MessagePanel, { shouldFormContinuation } from "../../../../src/components/structures/MessagePanel"; import SettingsStore from "../../../../src/settings/SettingsStore"; @@ -794,8 +794,8 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); expect(tiles.length).toEqual(2); - expect(tiles[0].querySelector(".mx_EventTile_receiptSent")).toBeTruthy(); - expect(tiles[1].querySelector(".mx_EventTile_receiptSent")).toBeFalsy(); + expect(within(tiles[0] as HTMLElement).queryByRole("status")).toHaveAccessibleName("Your message was sent"); + expect(within(tiles[1] as HTMLElement).queryByRole("status")).not.toBeInTheDocument(); }); it("should set lastSuccessful=false on non-last event if last event has a receipt from someone else", () => { @@ -830,8 +830,8 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); expect(tiles.length).toEqual(2); - expect(tiles[0].querySelector(".mx_EventTile_receiptSent")).toBeFalsy(); - expect(tiles[1].querySelector(".mx_EventTile_receiptSent")).toBeFalsy(); + expect(within(tiles[0] as HTMLElement).queryByRole("status")).not.toBeInTheDocument(); + expect(within(tiles[1] as HTMLElement).queryByRole("status")).not.toBeInTheDocument(); }); }); diff --git a/test/unit-tests/components/views/rooms/EventTile-test.tsx b/test/unit-tests/components/views/rooms/EventTile-test.tsx index bae1719058..47d9031435 100644 --- a/test/unit-tests/components/views/rooms/EventTile-test.tsx +++ b/test/unit-tests/components/views/rooms/EventTile-test.tsx @@ -10,6 +10,7 @@ import React from "react"; import { act, fireEvent, render, screen, waitFor } from "jest-matrix-react"; import { mocked } from "jest-mock"; import { + EventStatus, EventType, type IEventDecryptionResult, type MatrixClient, @@ -614,4 +615,20 @@ describe("EventTile", () => { // The event tile should now show the not encrypted status await waitFor(() => expect(screen.getByText("Not encrypted")).toBeInTheDocument()); }); + + it.each([ + [EventStatus.NOT_SENT, "Failed to send"], + [EventStatus.SENDING, "Sending your message…"], + [EventStatus.ENCRYPTING, "Encrypting your message…"], + ])("should display %s status icon", (eventSendStatus, text) => { + const ownEvent = mkMessage({ + room: room.roomId, + user: client.getSafeUserId(), + msg: "Hello world!", + event: true, + }); + const { getByRole } = getComponent({ mxEvent: ownEvent, eventSendStatus }); + + expect(getByRole("status")).toHaveAccessibleName(text); + }); }); diff --git a/test/unit-tests/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap b/test/unit-tests/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap index a470199a8f..5fa4a9fa46 100644 --- a/test/unit-tests/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap +++ b/test/unit-tests/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap @@ -9,21 +9,59 @@ exports[`LegacyCallViewButtons should render the buttons 1`] = ` aria-expanded="false" aria-haspopup="true" aria-label="Dialpad" - class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_dialpad" + class="mx_AccessibleButton mx_LegacyCallViewButtons_button" role="button" tabindex="0" - /> + > + + + +
+ + + +
+ > + + + +
+ + +
+ > + + + +
+ > + + + +
+ > + + + +
+ > + + + +
`; diff --git a/test/unit-tests/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap b/test/unit-tests/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap index 03c4f2e3b1..2113c95133 100644 --- a/test/unit-tests/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap +++ b/test/unit-tests/toasts/__snapshots__/IncomingLegacyCallToast-test.tsx.snap @@ -4,27 +4,66 @@ exports[` renders disabled silenced button when call
+> + + + +
`; exports[` renders sound on button when call is silenced 1`] = `
+> + + + +
`; exports[` renders when silence button when call is not silenced 1`] = `
+> + + + + +
`; diff --git a/yarn.lock b/yarn.lock index 5ac93db2e9..d74b6c2f15 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4160,10 +4160,10 @@ resolved "https://registry.yarnpkg.com/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz#538b1e103bf8d9864e7b85cc96fa8d6fb6c40777" integrity sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g== -"@vector-im/compound-design-tokens@6.6.0": - version "6.6.0" - resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.6.0.tgz#deac29620caa4c3c6e6669e1392acf40c5ca8eed" - integrity sha512-IqHldApA5nG3US8bsbH/W2cHx2a7lOF7sOE1HQRAUxLP1B3yfIo8sgw1u6g2kvj8DM4sFIZoKcQ3Lvwym+AsYw== +"@vector-im/compound-design-tokens@6.8.0": + version "6.8.0" + resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.8.0.tgz#3711df7b22a065c4d49dedbd8b83241c73a619f9" + integrity sha512-RDJjnFg9yxkbSYqiAG5Nv4enD5h8Oq89su0izZIvuKRzBxLWkV2/+JoDM94zkjI4aDLYff3gwWMviqAxJKi+Lw== "@vector-im/compound-design-tokens@^6.4.3": version "6.5.0"