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>
This commit is contained in:
Michael Telatynski
2026-01-21 13:33:58 +00:00
committed by GitHub
parent edb63922e0
commit de9a52d046
55 changed files with 1179 additions and 355 deletions
@@ -42,18 +42,13 @@ Please see LICENSE files in the repository root for full details.
vertical-align: middle;
position: relative;
&::before {
content: "";
svg {
position: absolute;
width: 26px;
height: 26px;
left: 0;
top: 0;
background-color: #0dbd8b;
mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
color: #0dbd8b;
}
}
}