Skip to content

Commit d0a3e8b

Browse files
SisIvanovaSisIvanova
authored
refactor(themes): accessibility color fixes (#1959)
1 parent cbdfa0f commit d0a3e8b

File tree

9 files changed

+246
-68
lines changed

9 files changed

+246
-68
lines changed

‎package-lock.json‎

Lines changed: 57 additions & 36 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"husky": "^9.1.7",
8383
"ig-typedoc-theme": "^7.0.0",
8484
"igniteui-i18n-resources": "0.7.0-alpha.8",
85-
"igniteui-theming": "^23.1.0",
85+
"igniteui-theming": "^23.1.1",
8686
"keep-a-changelog": "^2.7.1",
8787
"lint-staged": "^16.2.6",
8888
"lit-analyzer": "^2.0.3",

‎src/components/button-group/themes/shared/button/button.material.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ $theme: $material;
6161
:host([selected]) {
6262
[part~='toggle']:active {
6363
background: var-get($theme, 'item-selected-background');
64-
color: var-get($theme, 'item-selected-text-color');
64+
color: var-get($theme, 'item-selected-hover-text-color');
6565
border-color: var-get($theme, 'item-selected-border-color');
6666

6767
::slotted(igc-icon) {
68-
color: var-get($theme, 'item-selected-icon-color');
68+
color: var-get($theme, 'item-selected-hover-icon-color');
6969
}
7070

7171
&::before {

‎src/components/button/themes/button/shared/button.material.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,28 @@ $outlined-theme: $material-outlined;
2626
transition: all .1s ease-in-out;
2727
}
2828

29+
:host(:not([disabled])[variant='flat']) [part~='base'],
30+
:host(:not(:disabled)[variant='flat']) [part~='base'] {
31+
&:active {
32+
::slotted(igc-icon) {
33+
color: var-get($flat-theme, 'active-foreground');
34+
}
35+
}
36+
}
37+
38+
:host(:not([disabled])[variant='flat']) [part='base focused'],
39+
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
40+
::slotted(igc-icon) {
41+
color: var-get($flat-theme, 'icon-color-hover');
42+
}
43+
44+
&:active {
45+
::slotted(igc-icon) {
46+
color: var-get($flat-theme, 'focus-foreground');
47+
}
48+
}
49+
}
50+
2951
:host(:not([disabled])[variant='outlined']) [part~='base'],
3052
:host(:not(:disabled)[variant='outlined']) [part~='base'] {
3153
&:hover {
@@ -34,12 +56,28 @@ $outlined-theme: $material-outlined;
3456

3557
&:active {
3658
border-color: var-get($outlined-theme, 'active-border-color');
59+
60+
::slotted(igc-icon) {
61+
color: var-get($outlined-theme, 'active-foreground');
62+
}
3763
}
3864
}
3965

4066
:host(:not([disabled])[variant='outlined']) [part='base focused'],
4167
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
4268
border-color: var-get($outlined-theme, 'focus-visible-border-color');
69+
70+
::slotted(igc-icon) {
71+
color: var-get($outlined-theme, 'focus-visible-foreground');
72+
}
73+
74+
&:active {
75+
border-color: var-get($outlined-theme, 'focus-border-color');
76+
77+
::slotted(igc-icon) {
78+
color: var-get($outlined-theme, 'focus-foreground');
79+
}
80+
}
4381
}
4482

4583
:host(:not([disabled])[variant='contained']) [part~='base'],

‎src/components/stepper/themes/step/shared/step.common.scss‎

Lines changed: 118 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,30 @@ $theme: $material;
2323

2424
&:hover {
2525
background: var-get($theme, 'step-hover-background');
26-
color: var-get($theme, 'title-hover-color')
26+
color: var-get($theme, 'title-hover-color');
27+
28+
[part~='title'] {
29+
color: var-get($theme, 'title-hover-color');
30+
}
31+
32+
[part~='subtitle'] {
33+
color: var-get($theme, 'subtitle-hover-color')
34+
}
2735
}
2836

2937
&:focus,
3038
&:focus-within,
3139
&:active {
3240
background: var-get($theme, 'step-focus-background');
3341
color: var-get($theme, 'title-focus-color');
42+
43+
[part~='title'] {
44+
color: var-get($theme, 'title-focus-color');
45+
}
46+
47+
[part~='subtitle'] {
48+
color: var-get($theme, 'subtitle-focus-color')
49+
}
3450
}
3551
}
3652

@@ -83,27 +99,6 @@ $theme: $material;
8399
}
84100
}
85101

86-
:host([complete]) {
87-
[part~='header'] {
88-
&:hover {
89-
background: var-get($theme, 'complete-step-hover-background');
90-
}
91-
92-
&:focus,
93-
&:focus-within,
94-
&:active {
95-
background: var-get($theme, 'complete-step-focus-background');
96-
}
97-
}
98-
99-
[part~='body'] {
100-
&::before {
101-
border-inline-start-style: var-get($theme, 'complete-step-separator-style');
102-
border-inline-start-color: var-get($theme, 'complete-step-separator-color');
103-
}
104-
}
105-
}
106-
107102
[part~='complete-end'] {
108103
&::before {
109104
border-block-start-style: var-get($theme, 'complete-step-separator-style');
@@ -132,18 +127,105 @@ $theme: $material;
132127
[part~='subtitle'] {
133128
color: var-get($theme, 'invalid-subtitle-color')
134129
}
130+
131+
[part~='header'] {
132+
background: var-get($theme, 'invalid-step-background');
133+
134+
&:hover {
135+
background: var-get($theme, 'invalid-step-hover-background');
136+
137+
[part~='title'] {
138+
color: var-get($theme, 'invalid-title-hover-color');
139+
}
140+
141+
[part~='subtitle'] {
142+
color: var-get($theme, 'invalid-subtitle-hover-color')
143+
}
144+
}
145+
146+
&:focus,
147+
&:focus-within,
148+
&:active {
149+
background: var-get($theme, 'invalid-step-focus-background');
150+
151+
[part~='title'] {
152+
color: var-get($theme, 'invalid-title-focus-color');
153+
}
154+
155+
[part~='subtitle'] {
156+
color: var-get($theme, 'invalid-subtitle-focus-color')
157+
}
158+
}
159+
}
160+
}
161+
162+
:host([complete]:not([active])) {
163+
[part~='header'] {
164+
background: var-get($theme, 'complete-step-background');
165+
166+
&:hover {
167+
background: var-get($theme, 'complete-step-hover-background');
168+
169+
[part~='title'] {
170+
color: var-get($theme, 'complete-title-hover-color');
171+
}
172+
173+
[part~='subtitle'] {
174+
color: var-get($theme, 'complete-subtitle-hover-color');
175+
}
176+
}
177+
178+
&:focus,
179+
&:focus-within,
180+
&:active {
181+
background: var-get($theme, 'complete-step-focus-background');
182+
183+
[part~='title'] {
184+
color: var-get($theme, 'complete-title-focus-color');
185+
}
186+
187+
[part~='subtitle'] {
188+
color: var-get($theme, 'complete-subtitle-focus-color');
189+
}
190+
}
191+
}
192+
193+
[part~='body'] {
194+
&::before {
195+
border-inline-start-style: var-get($theme, 'complete-step-separator-style');
196+
border-inline-start-color: var-get($theme, 'complete-step-separator-color');
197+
}
198+
}
135199
}
136200

137201
:host([active]) {
138202
[part~='header'] {
203+
background: var-get($theme, 'current-step-background');
204+
139205
&:hover {
140206
background: var-get($theme, 'current-step-hover-background');
207+
208+
[part~='title'] {
209+
color: var-get($theme, 'current-title-hover-color');
210+
}
211+
212+
[part~='subtitle'] {
213+
color: var-get($theme, 'current-subtitle-hover-color');
214+
}
141215
}
142216

143217
&:focus,
144218
&:focus-within,
145219
&:active {
146220
background: var-get($theme, 'current-step-focus-background');
221+
222+
[part~='title'] {
223+
color: var-get($theme, 'current-title-focus-color');
224+
}
225+
226+
[part~='subtitle'] {
227+
color: var-get($theme, 'current-subtitle-focus-color');
228+
}
147229
}
148230
}
149231

@@ -163,6 +245,12 @@ $theme: $material;
163245
}
164246
}
165247

248+
[part~='content'] {
249+
@include type-style('body-2');
250+
251+
color: var-get($theme, 'content-foreground');
252+
}
253+
166254
[part~='disabled'] {
167255
&:focus,
168256
&:focus-visible,
@@ -172,6 +260,14 @@ $theme: $material;
172260
[part='header'] {
173261
background: var-get($theme, 'step-background');
174262
}
263+
264+
[part~='title'] {
265+
color: var-get($theme, 'disabled-title-color');
266+
}
267+
268+
[part~='subtitle'] {
269+
color: var-get($theme, 'disabled-subtitle-color');
270+
}
175271
}
176272

177273
[part~='indicator'] {

‎src/components/stepper/themes/step/shared/step.indigo.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,6 @@ $theme: $indigo;
2525
}
2626
}
2727

28-
[part~='content'] {
29-
@include type-style('body-2');
30-
31-
color: var-get($theme, 'content-foreground');
32-
}
33-
3428
[part~='disabled'] {
3529
[part~='indicator'] {
3630
box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline');

‎src/components/tabs/themes/shared/tab/tab.common.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
$theme: $material;
55

66
[part='tab-header'] {
7+
--_border-width: #{rem(1px)};
8+
79
color: var-get($theme, 'item-text-color');
810
background: var-get($theme, 'item-background');
911
border-radius: var-get($theme, 'border-radius');
10-
border: rem(1px) solid var-get($theme, 'border-color');
12+
border: var(--_border-width) solid var-get($theme, 'border-color');
1113

1214
::slotted(igc-icon) {
1315
color: var-get($theme, 'item-icon-color');

‎src/components/tabs/themes/shared/tab/tab.material.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,31 @@ $theme: $material;
99

1010
[part='tab-header'] {
1111
padding: pad-block(rem(12px)) pad-inline(rem(16px));
12+
background: initial;
13+
14+
&::before,
15+
&::after {
16+
position: absolute;
17+
inset: calc(var(--_border-width) * -1);
18+
content: '';
19+
border: inherit;
20+
}
21+
22+
&::before {
23+
background: var-get($theme, 'item-background');
24+
z-index: -2;
25+
}
26+
27+
&::after {
28+
z-index: -1;
29+
}
30+
31+
&:hover,
32+
&:focus-within {
33+
&::after {
34+
background: var-get($theme, 'item-hover-background');
35+
}
36+
}
1237
}
1338

1439
::slotted(igc-icon) {

‎stories/stepper.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ const BasicTemplate = ({
167167
>
168168
<igc-step invalid>
169169
<span slot="title">Step1</span>
170+
<span slot="subtitle">Required</span>
170171
<form id="form">
171172
<igc-input
172173
label="First Name"
@@ -179,6 +180,7 @@ const BasicTemplate = ({
179180
180181
<igc-step invalid>
181182
<span slot="title">Step 2</span>
183+
<span slot="subtitle">Required</span>
182184
<form id="form">
183185
<igc-input
184186
label="Last Name"

0 commit comments

Comments
 (0)