Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Improve icon rendering accessibility (#31791)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

28
test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
View File

@@ -73,7 +73,19 @@ exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</div>
<div
data-focus-guard="true"
@@ -159,7 +171,19 @@ exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</div>
<div
data-focus-guard="true"