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
@@ -59,28 +59,19 @@ Please see LICENSE files in the repository root for full details.
    /* override checked radio button styling to show checkmark instead */
    .mx_StyledRadioButton_checked {
        input[type="radio"]:checked + div {
-            position: relative;
-            border-width: 2px;
            border-color: var(--cpd-color-icon-primary);
            background-color: var(--cpd-color-icon-primary);

-            &::before {
-                content: "";
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
-                mask-size: 12px 12px;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                background-color: var(--cpd-color-icon-on-solid-primary);
-                width: 12px;
-                height: 12px;
-            }
-
            div {
-                visibility: hidden;
+                background: none;
+
+                svg {
+                    color: var(--cpd-color-icon-on-solid-primary);
+                    width: 12px;
+                    height: 12px;
+                    margin: -2px;
+                    display: block;
+                }
            }
        }
    }