sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Improve icon rendering accessibility (#31776)

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>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-19 13:27:09 +00:00
committed by GitHub
parent f236c26356
commit 3b08b5c582
39 changed files with 398 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
+17 -36
View File
@@ -118,23 +118,11 @@ Please see LICENSE files in the repository root for full details.
padding: 8px 36px;
}
.mx_AddExistingToSpace_retryButton {
margin-left: 12px;
padding-left: 24px;
position: relative;
&::before {
content: "";
position: absolute;
background-color: $primary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
width: 18px;
height: 18px;
left: 0;
}
.mx_AddExistingToSpaceDialog_retryButton svg {
color: $primary-content;
width: 18px;
height: 18px;
margin-right: var(--cpd-space-2x);
}
}
}
@@ -185,25 +173,17 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_Dropdown_menu {
.mx_SubspaceSelector_dropdownOptionActive {
color: $accent;
padding-right: 32px;
position: relative;
.mx_SubspaceSelector_dropdownOptionActive {
color: $accent;
padding-right: 24px;
position: relative;
&::before {
content: "";
width: 20px;
height: 20px;
top: 8px;
right: 0;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
svg {
width: 20px;
height: 20px;
right: 0;
position: absolute;
color: $accent;
}
}
}
@@ -225,7 +205,8 @@ Please see LICENSE files in the repository root for full details.
margin-bottom: auto;
}
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
/* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
.mx_DecoratedRoomAvatar {
margin-right: 12px;
}