sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 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
res/css/_common.pcss
+19 -34
View File
@@ -496,10 +496,9 @@ legend {
}
@define-mixin customisedCancelButton {
cursor: pointer;
position: relative;
width: 28px;
height: 28px;
width: 20px;
height: 20px;
padding: var(--cpd-space-1x);
border-radius: 14px;
background-color: var(--cpd-color-bg-subtle-secondary);
@@ -507,18 +506,10 @@ legend {
background-color: var(--cpd-color-bg-subtle-primary);
}
&::before {
content: "";
width: 28px;
height: 28px;
left: 0;
top: 0;
position: absolute;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
svg {
width: inherit;
height: inherit;
color: var(--cpd-color-icon-secondary);
}
}
@@ -858,18 +849,16 @@ legend {
line-height: $font-24px;
margin-right: 0;
span {
display: flex;
align-items: center;
display: flex;
align-items: center;
&::before {
content: "";
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
svg {
width: 16px;
height: 16px;
display: inline-block;
color: $button-fg-color;
margin-right: 8px;
vertical-align: middle;
}
}
@@ -882,15 +871,11 @@ legend {
}
@define-mixin ThreadSummaryIcon {
content: "";
display: inline-block;
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
height: 18px;
min-width: 18px;
background-color: $icon-button-color !important;
width: 18px;
flex-shrink: 0;
color: $icon-button-color;
}
@define-mixin composerButtonHighLight {
res/css/components/views/polls/_PollOption.pcss
+9 -18
View File
@@ -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;
}
}
}
}
res/css/structures/_TabbedView.pcss
-50
View File
@@ -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;
}
res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss
+2 -7
View File
@@ -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;
}
}
}
res/css/views/messages/_LegacyCallEvent.pcss
+15 -75
View File
@@ -37,50 +37,6 @@ Please see LICENSE files in the repository root for full details.
}
}
&.mx_LegacyCallEvent_voice {
.mx_LegacyCallEvent_type_icon::before,
.mx_LegacyCallEvent_content_button_callBack span::before,
.mx_LegacyCallEvent_content_button_answer span::before {
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
}
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
}
}
}
&.mx_LegacyCallEvent_video {
.mx_LegacyCallEvent_type_icon::before,
.mx_LegacyCallEvent_content_button_callBack span::before,
.mx_LegacyCallEvent_content_button_answer span::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg");
}
}
}
&.mx_LegacyCallEvent_missed {
&.mx_LegacyCallEvent_voice {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-missed-solid.svg");
}
}
&.mx_LegacyCallEvent_video {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg");
}
}
}
.mx_LegacyCallEvent_info {
display: flex;
flex-direction: row;
@@ -106,26 +62,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LegacyCallEvent_type {
display: flex;
align-items: center;
font-weight: 400;
color: $secondary-content;
.mx_LegacyCallEvent_type_icon {
height: 13px;
width: 13px;
margin-right: 5px;
&::before {
content: "";
position: absolute;
height: 13px;
width: 13px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
}
}
@@ -145,19 +83,6 @@ Please see LICENSE files in the repository root for full details.
@mixin LegacyCallButton;
padding: 0 $spacing-12;
font-size: inherit;
span::before {
mask-size: 16px;
width: 16px;
height: 16px;
flex-shrink: 0;
}
}
.mx_LegacyCallEvent_content_button_reject {
span::before {
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
}
}
.mx_LegacyCallEvent_content_tooltip {
@@ -189,6 +114,21 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_LegacyCallEvent_type_icon {
height: 16px;
width: 16px;
margin-right: 6px;
display: inline-block;
vertical-align: -2px;
svg {
position: absolute;
height: inherit;
width: inherit;
color: $tertiary-content;
}
}
.mx_EventTile[data-layout="bubble"] {
.mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
res/css/views/right_panel/_VerificationPanel.pcss
-8
View File
@@ -39,14 +39,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_EncryptionPanel_cancel {
@mixin customisedCancelButton;
position: absolute;
z-index: 100;
top: 14px;
right: 14px;
}
.mx_VerificationPanel_qrCode {
padding: 4px 4px 0 4px;
background: white;
res/css/views/rooms/_EventTile.pcss
+1 -1
View File
@@ -1065,7 +1065,7 @@ $left-gutter: 64px;
position: relative;
font: var(--cpd-font-body-sm-regular);
&::before {
> svg {
@mixin ThreadSummaryIcon;
}
res/css/views/rooms/_ThreadSummary.pcss
+1 -1
View File
@@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details.
display: inline-block;
margin-bottom: $spacing-8;
&::before {
> svg {
@mixin ThreadSummaryIcon;
vertical-align: middle;
margin-inline-end: $spacing-8;
res/css/views/toasts/_IncomingLegacyCallToast.pcss
+1 -48
View File
@@ -44,36 +44,6 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
align-items: center;
.mx_LegacyCallEvent_type_icon {
height: 16px;
width: 16px;
margin-right: 6px;
&::before {
content: "";
position: absolute;
height: inherit;
width: inherit;
background-color: $tertiary-content;
mask-repeat: no-repeat;
mask-size: contain;
}
}
}
&.mx_IncomingLegacyCallToast_content_voice {
.mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
.mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
}
}
&.mx_IncomingLegacyCallToast_content_video {
.mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before,
.mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
}
.mx_IncomingLegacyCallToast_buttons {
@@ -84,27 +54,10 @@ Please see LICENSE files in the repository root for full details.
.mx_IncomingLegacyCallToast_button {
@mixin LegacyCallButton;
padding: 0px 8px;
padding: 8px;
flex-shrink: 0;
flex-grow: 1;
font-size: $font-15px;
span {
padding: 8px 0;
}
&.mx_IncomingLegacyCallToast_button_accept span::before {
mask-size: 13px;
width: 13px;
height: 13px;
}
&.mx_IncomingLegacyCallToast_button_decline span::before {
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
mask-size: 16px;
width: 16px;
height: 16px;
}
}
}
}