Skip to content

Commit de9a52d

Browse files
t3chguyt3chguy
authored
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>
1 parent edb6392 commit de9a52d

55 files changed

Lines changed: 1179 additions & 355 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎res/css/_common.pcss‎

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -496,29 +496,20 @@ legend {
496496
}
497497

498498
@define-mixin customisedCancelButton {
499-
cursor: pointer;
500-
position: relative;
501-
width: 28px;
502-
height: 28px;
499+
width: 20px;
500+
height: 20px;
501+
padding: var(--cpd-space-1x);
503502
border-radius: 14px;
504503
background-color: var(--cpd-color-bg-subtle-secondary);
505504

506505
&:hover {
507506
background-color: var(--cpd-color-bg-subtle-primary);
508507
}
509508

510-
&::before {
511-
content: "";
512-
width: 28px;
513-
height: 28px;
514-
left: 0;
515-
top: 0;
516-
position: absolute;
517-
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
518-
mask-repeat: no-repeat;
519-
mask-position: center;
520-
mask-size: 20px;
521-
background-color: var(--cpd-color-icon-secondary);
509+
svg {
510+
width: inherit;
511+
height: inherit;
512+
color: var(--cpd-color-icon-secondary);
522513
}
523514
}
524515

@@ -858,18 +849,16 @@ legend {
858849
line-height: $font-24px;
859850
margin-right: 0;
860851

861-
span {
862-
display: flex;
863-
align-items: center;
852+
display: flex;
853+
align-items: center;
864854

865-
&::before {
866-
content: "";
867-
display: inline-block;
868-
background-color: $button-fg-color;
869-
mask-position: center;
870-
mask-repeat: no-repeat;
871-
margin-right: 8px;
872-
}
855+
svg {
856+
width: 16px;
857+
height: 16px;
858+
display: inline-block;
859+
color: $button-fg-color;
860+
margin-right: 8px;
861+
vertical-align: middle;
873862
}
874863
}
875864

@@ -882,15 +871,11 @@ legend {
882871
}
883872

884873
@define-mixin ThreadSummaryIcon {
885-
content: "";
886874
display: inline-block;
887-
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
888-
mask-position: center;
889-
mask-repeat: no-repeat;
890-
mask-size: contain;
891875
height: 18px;
892-
min-width: 18px;
893-
background-color: $icon-button-color !important;
876+
width: 18px;
877+
flex-shrink: 0;
878+
color: $icon-button-color;
894879
}
895880

896881
@define-mixin composerButtonHighLight {

‎res/css/components/views/polls/_PollOption.pcss‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -59,28 +59,19 @@ Please see LICENSE files in the repository root for full details.
5959
/* override checked radio button styling to show checkmark instead */
6060
.mx_StyledRadioButton_checked {
6161
input[type="radio"]:checked + div {
62-
position: relative;
63-
border-width: 2px;
6462
border-color: var(--cpd-color-icon-primary);
6563
background-color: var(--cpd-color-icon-primary);
6664

67-
&::before {
68-
content: "";
69-
position: absolute;
70-
top: 50%;
71-
left: 50%;
72-
transform: translate(-50%, -50%);
73-
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
74-
mask-size: 12px 12px;
75-
mask-repeat: no-repeat;
76-
mask-position: center;
77-
background-color: var(--cpd-color-icon-on-solid-primary);
78-
width: 12px;
79-
height: 12px;
80-
}
81-
8265
div {
83-
visibility: hidden;
66+
background: none;
67+
68+
svg {
69+
color: var(--cpd-color-icon-on-solid-primary);
70+
width: 12px;
71+
height: 12px;
72+
margin: -2px;
73+
display: block;
74+
}
8475
}
8576
}
8677
}

‎res/css/structures/_TabbedView.pcss‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,11 @@ Please see LICENSE files in the repository root for full details.
3737
.mx_TabbedView_tabLabel:hover,
3838
.mx_TabbedView_tabLabel_active {
3939
color: $tab-label-active-fg-color;
40-
41-
.mx_TabbedView_maskedIcon::before {
42-
background-color: var(--cpd-color-icon-primary);
43-
}
4440
}
4541

4642
.mx_TabbedView_tabLabel_active {
4743
background-color: var(--cpd-color-bg-subtle-secondary);
4844
}
49-
50-
.mx_TabbedView_maskedIcon {
51-
width: 20px;
52-
height: 20px;
53-
margin-right: var(--cpd-space-3x);
54-
}
55-
56-
.mx_TabbedView_maskedIcon::before {
57-
mask-size: 20px;
58-
width: 20px;
59-
height: 20px;
60-
transition: background-color 0.1s;
61-
}
6245
}
6346

6447
.mx_TabbedView_tabsOnTop {
@@ -89,23 +72,6 @@ Please see LICENSE files in the repository root for full details.
8972
color: $accent;
9073
}
9174
}
92-
93-
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
94-
background-color: $accent;
95-
}
96-
97-
.mx_TabbedView_maskedIcon {
98-
width: 22px;
99-
height: 22px;
100-
margin-left: 0px;
101-
margin-right: 8px;
102-
}
103-
104-
.mx_TabbedView_maskedIcon::before {
105-
mask-size: 22px;
106-
width: inherit;
107-
height: inherit;
108-
}
10975
}
11076

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

139-
.mx_TabbedView_maskedIcon {
140-
display: inline-block;
141-
}
142-
143-
.mx_TabbedView_maskedIcon::before {
144-
display: inline-block;
145-
background-color: var(--cpd-color-icon-secondary);
146-
mask-repeat: no-repeat;
147-
mask-position: center;
148-
content: "";
149-
}
150-
151105
.mx_TabbedView_tabLabel_text {
152106
vertical-align: middle;
153107
}
@@ -173,10 +127,6 @@ Please see LICENSE files in the repository root for full details.
173127
.mx_TabbedView_tabPanel {
174128
margin-left: 72px; /* 40px sidebar + 32px padding */
175129
}
176-
.mx_TabbedView_maskedIcon {
177-
margin-right: auto;
178-
margin-left: auto;
179-
}
180130
.mx_TabbedView_tabLabels {
181131
width: auto;
182132
}

‎res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,13 @@ Please see LICENSE files in the repository root for full details.
4242
vertical-align: middle;
4343
position: relative;
4444

45-
&::before {
46-
content: "";
45+
svg {
4746
position: absolute;
4847
width: 26px;
4948
height: 26px;
5049
left: 0;
5150
top: 0;
52-
background-color: #0dbd8b;
53-
mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
54-
mask-repeat: no-repeat;
55-
mask-position: center;
56-
mask-size: contain;
51+
color: #0dbd8b;
5752
}
5853
}
5954
}

‎res/css/views/messages/_LegacyCallEvent.pcss‎

Lines changed: 15 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -37,50 +37,6 @@ Please see LICENSE files in the repository root for full details.
3737
}
3838
}
3939

40-
&.mx_LegacyCallEvent_voice {
41-
.mx_LegacyCallEvent_type_icon::before,
42-
.mx_LegacyCallEvent_content_button_callBack span::before,
43-
.mx_LegacyCallEvent_content_button_answer span::before {
44-
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
45-
}
46-
47-
&.mx_LegacyCallEvent_rejected,
48-
&.mx_LegacyCallEvent_noAnswer {
49-
.mx_LegacyCallEvent_type_icon::before {
50-
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
51-
}
52-
}
53-
}
54-
55-
&.mx_LegacyCallEvent_video {
56-
.mx_LegacyCallEvent_type_icon::before,
57-
.mx_LegacyCallEvent_content_button_callBack span::before,
58-
.mx_LegacyCallEvent_content_button_answer span::before {
59-
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
60-
}
61-
62-
&.mx_LegacyCallEvent_rejected,
63-
&.mx_LegacyCallEvent_noAnswer {
64-
.mx_LegacyCallEvent_type_icon::before {
65-
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg");
66-
}
67-
}
68-
}
69-
70-
&.mx_LegacyCallEvent_missed {
71-
&.mx_LegacyCallEvent_voice {
72-
.mx_LegacyCallEvent_type_icon::before {
73-
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-missed-solid.svg");
74-
}
75-
}
76-
77-
&.mx_LegacyCallEvent_video {
78-
.mx_LegacyCallEvent_type_icon::before {
79-
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg");
80-
}
81-
}
82-
}
83-
8440
.mx_LegacyCallEvent_info {
8541
display: flex;
8642
flex-direction: row;
@@ -106,26 +62,8 @@ Please see LICENSE files in the repository root for full details.
10662
}
10763

10864
.mx_LegacyCallEvent_type {
109-
display: flex;
110-
align-items: center;
11165
font-weight: 400;
11266
color: $secondary-content;
113-
114-
.mx_LegacyCallEvent_type_icon {
115-
height: 13px;
116-
width: 13px;
117-
margin-right: 5px;
118-
119-
&::before {
120-
content: "";
121-
position: absolute;
122-
height: 13px;
123-
width: 13px;
124-
background-color: $secondary-content;
125-
mask-repeat: no-repeat;
126-
mask-size: contain;
127-
}
128-
}
12967
}
13068
}
13169
}
@@ -145,19 +83,6 @@ Please see LICENSE files in the repository root for full details.
14583
@mixin LegacyCallButton;
14684
padding: 0 $spacing-12;
14785
font-size: inherit;
148-
149-
span::before {
150-
mask-size: 16px;
151-
width: 16px;
152-
height: 16px;
153-
flex-shrink: 0;
154-
}
155-
}
156-
157-
.mx_LegacyCallEvent_content_button_reject {
158-
span::before {
159-
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
160-
}
16186
}
16287

16388
.mx_LegacyCallEvent_content_tooltip {
@@ -189,6 +114,21 @@ Please see LICENSE files in the repository root for full details.
189114
}
190115
}
191116

117+
.mx_LegacyCallEvent_type_icon {
118+
height: 16px;
119+
width: 16px;
120+
margin-right: 6px;
121+
display: inline-block;
122+
vertical-align: -2px;
123+
124+
svg {
125+
position: absolute;
126+
height: inherit;
127+
width: inherit;
128+
color: $tertiary-content;
129+
}
130+
}
131+
192132
.mx_EventTile[data-layout="bubble"] {
193133
.mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper {
194134
.mx_LegacyCallEvent {

‎res/css/views/right_panel/_VerificationPanel.pcss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,6 @@ Please see LICENSE files in the repository root for full details.
3939
}
4040
}
4141

42-
.mx_EncryptionPanel_cancel {
43-
@mixin customisedCancelButton;
44-
position: absolute;
45-
z-index: 100;
46-
top: 14px;
47-
right: 14px;
48-
}
49-
5042
.mx_VerificationPanel_qrCode {
5143
padding: 4px 4px 0 4px;
5244
background: white;

‎res/css/views/rooms/_EventTile.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1065,7 +1065,7 @@ $left-gutter: 64px;
10651065
position: relative;
10661066
font: var(--cpd-font-body-sm-regular);
10671067

1068-
&::before {
1068+
> svg {
10691069
@mixin ThreadSummaryIcon;
10701070
}
10711071

‎res/css/views/rooms/_ThreadSummary.pcss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details.
112112
display: inline-block;
113113
margin-bottom: $spacing-8;
114114

115-
&::before {
115+
> svg {
116116
@mixin ThreadSummaryIcon;
117117
vertical-align: middle;
118118
margin-inline-end: $spacing-8;

0 commit comments

Comments
 (0)
⚡