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
@@ -37,28 +37,11 @@ Please see LICENSE files in the repository root for full details.
    .mx_TabbedView_tabLabel:hover,
    .mx_TabbedView_tabLabel_active {
        color: $tab-label-active-fg-color;
-
-        .mx_TabbedView_maskedIcon::before {
-            background-color: var(--cpd-color-icon-primary);
-        }
    }

    .mx_TabbedView_tabLabel_active {
        background-color: var(--cpd-color-bg-subtle-secondary);
    }
-
-    .mx_TabbedView_maskedIcon {
-        width: 20px;
-        height: 20px;
-        margin-right: var(--cpd-space-3x);
-    }
-
-    .mx_TabbedView_maskedIcon::before {
-        mask-size: 20px;
-        width: 20px;
-        height: 20px;
-        transition: background-color 0.1s;
-    }
 }

 .mx_TabbedView_tabsOnTop {
@@ -89,23 +72,6 @@ Please see LICENSE files in the repository root for full details.
            color: $accent;
        }
    }
-
-    .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
-        background-color: $accent;
-    }
-
-    .mx_TabbedView_maskedIcon {
-        width: 22px;
-        height: 22px;
-        margin-left: 0px;
-        margin-right: 8px;
-    }
-
-    .mx_TabbedView_maskedIcon::before {
-        mask-size: 22px;
-        width: inherit;
-        height: inherit;
-    }
 }

 .mx_TabbedView_tabLabels {
@@ -136,18 +102,6 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-.mx_TabbedView_maskedIcon {
-    display: inline-block;
-}
-
-.mx_TabbedView_maskedIcon::before {
-    display: inline-block;
-    background-color: var(--cpd-color-icon-secondary);
-    mask-repeat: no-repeat;
-    mask-position: center;
-    content: "";
-}
-
 .mx_TabbedView_tabLabel_text {
    vertical-align: middle;
 }
@@ -173,10 +127,6 @@ Please see LICENSE files in the repository root for full details.
        .mx_TabbedView_tabPanel {
            margin-left: 72px; /* 40px sidebar + 32px padding */
        }
-        .mx_TabbedView_maskedIcon {
-            margin-right: auto;
-            margin-left: auto;
-        }
        .mx_TabbedView_tabLabels {
            width: auto;
        }