Improve icon rendering accessibility (#31776)

* Switch to rendered svg for Field select decoration instead of SVG mask Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace warning.svg with Compound icon Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace device kind icons with Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Draw notification badge decoration using SVG rather than CSS masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Replace {collapse,expand}-message icons with Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove stale icon prefetch Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Render icons in AddExistingToSpaceDialog using SVGs rather than CSS masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Render icons in Jitsi landing page using SVGs rather than CSS masks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix field label Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert icon colour Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-19 13:27:09 +00:00
parent f236c26356
commit 3b08b5c582
39 changed files with 398 additions and 161 deletions
@@ -118,23 +118,11 @@ Please see LICENSE files in the repository root for full details.
            padding: 8px 36px;
        }

-        .mx_AddExistingToSpace_retryButton {
-            margin-left: 12px;
-            padding-left: 24px;
-            position: relative;
-
-            &::before {
-                content: "";
-                position: absolute;
-                background-color: $primary-content;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
-                width: 18px;
-                height: 18px;
-                left: 0;
-            }
+        .mx_AddExistingToSpaceDialog_retryButton svg {
+            color: $primary-content;
+            width: 18px;
+            height: 18px;
+            margin-right: var(--cpd-space-2x);
        }
    }
 }
@@ -185,25 +173,17 @@ Please see LICENSE files in the repository root for full details.
            }
        }

-        .mx_Dropdown_menu {
-            .mx_SubspaceSelector_dropdownOptionActive {
-                color: $accent;
-                padding-right: 32px;
-                position: relative;
+        .mx_SubspaceSelector_dropdownOptionActive {
+            color: $accent;
+            padding-right: 24px;
+            position: relative;

-                &::before {
-                    content: "";
-                    width: 20px;
-                    height: 20px;
-                    top: 8px;
-                    right: 0;
-                    position: absolute;
-                    mask-position: center;
-                    mask-size: contain;
-                    mask-repeat: no-repeat;
-                    background-color: $accent;
-                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                }
+            svg {
+                width: 20px;
+                height: 20px;
+                right: 0;
+                position: absolute;
+                color: $accent;
            }
        }
    }
@@ -225,7 +205,8 @@ Please see LICENSE files in the repository root for full details.
        margin-bottom: auto;
    }

-    .mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
+    /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
+    .mx_DecoratedRoomAvatar {
        margin-right: 12px;
    }

@@ -47,20 +47,14 @@ Please see LICENSE files in the repository root for full details.
    text-overflow: ellipsis;
 }

-/* Can't add pseudo-elements to a select directly, so we use its parent. */
-.mx_Field_select::before {
-    content: "";
+.mx_Field_select_chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4px;
    width: 18px;
    height: 18px;
-    mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: contain;
-    background-color: $primary-content;
+    color: $primary-content;
    z-index: 1;
    pointer-events: none;
 }
@@ -55,8 +55,7 @@ Please see LICENSE files in the repository root for full details.
            background-color: var(--cpd-color-icon-critical-primary);
        }

-        &.mx_NotificationBadge_knocked {
-            mask-image: url("@vector-im/compound-design-tokens/icons/ask-to-join.svg");
+        & > svg {
            width: 16px;
            height: 16px;
        }
@@ -13,4 +13,8 @@ Please see LICENSE files in the repository root for full details.
    display: flex;
    align-items: center;
    column-gap: $spacing-4;
+
+    svg {
+        color: #ff0064; /* Match legacy icon colour until redesign */
+    }
 }