Improve icon rendering accessibility (#31791)

* 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> * Switch to rendering icons as SVG over CSS masks in PollOption Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering icons as SVG over CSS masks in AnalyticsLearnMoreDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused class Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering icons as SVG over CSS masks in customisedCancelButton mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering icons as SVG over CSS masks in ThreadSummaryIcon mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering icons as SVG over CSS masks in LegacyCallButton mixin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused classes in TabbedView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint 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> * Fix `[Object object]` Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix layout issue Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-21 13:33:58 +00:00
parent edb63922e0
commit de9a52d046
55 changed files with 1179 additions and 355 deletions
@@ -496,10 +496,9 @@ legend {
 }

@define-mixin customisedCancelButton {
-    cursor: pointer;
-    position: relative;
-    width: 28px;
-    height: 28px;
+    width: 20px;
+    height: 20px;
+    padding: var(--cpd-space-1x);
    border-radius: 14px;
    background-color: var(--cpd-color-bg-subtle-secondary);

@@ -507,18 +506,10 @@ legend {
        background-color: var(--cpd-color-bg-subtle-primary);
    }

-    &::before {
-        content: "";
-        width: 28px;
-        height: 28px;
-        left: 0;
-        top: 0;
-        position: absolute;
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 20px;
-        background-color: var(--cpd-color-icon-secondary);
+    svg {
+        width: inherit;
+        height: inherit;
+        color: var(--cpd-color-icon-secondary);
    }
 }

@@ -858,18 +849,16 @@ legend {
    line-height: $font-24px;
    margin-right: 0;

-    span {
-        display: flex;
-        align-items: center;
+    display: flex;
+    align-items: center;

-        &::before {
-            content: "";
-            display: inline-block;
-            background-color: $button-fg-color;
-            mask-position: center;
-            mask-repeat: no-repeat;
-            margin-right: 8px;
-        }
+    svg {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        color: $button-fg-color;
+        margin-right: 8px;
+        vertical-align: middle;
    }
 }

@@ -882,15 +871,11 @@ legend {
 }

@define-mixin ThreadSummaryIcon {
-    content: "";
    display: inline-block;
-    mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
    height: 18px;
-    min-width: 18px;
-    background-color: $icon-button-color !important;
+    width: 18px;
+    flex-shrink: 0;
+    color: $icon-button-color;
 }

@define-mixin composerButtonHighLight {