Skip to content

Commit 4516ff1

Browse files
committed
fix(material/stepper): add styling to stepper for high contrast mode
1 parent 881edec commit 4516ff1

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

src/material/stepper/_stepper-theme.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use '../core/typography/typography-utils';
66
@use '../core/density/private/compatibility';
77
@use './stepper-variables';
8+
@use '../../cdk/a11y';
89

910
@mixin color($config-or-theme) {
1011
$config: theming.get-color-config($config-or-theme);
@@ -15,6 +16,25 @@
1516
$warn: map.get($config, warn);
1617

1718
.mat-step-header {
19+
@include a11y.high-contrast(active, off) {
20+
margin-bottom: 1px;
21+
margin-top: 1px;
22+
23+
&:not([aria-disabled]),
24+
&[aria-disabled='false'] {
25+
outline: solid 1px;
26+
&.cdk-keyboard-focused, &.cdk-program-focused {
27+
outline: solid 3px;
28+
}
29+
}
30+
31+
&[aria-selected='false'] {
32+
.mat-step-icon, .mat-step-label {
33+
opacity: 0.5;
34+
}
35+
}
36+
}
37+
1838
&.cdk-keyboard-focused,
1939
&.cdk-program-focused,
2040
&:hover:not([aria-disabled]),
@@ -100,8 +120,17 @@
100120
background-color: theming.get-color-from-palette($background, card);
101121
}
102122

123+
.mat-horizontal-content-container, .mat-vertical-content-container {
124+
@include a11y.high-contrast(active, off) {
125+
outline: solid 1px;
126+
}
127+
}
128+
103129
.mat-stepper-vertical-line::before {
104130
border-left-color: theming.get-color-from-palette($foreground, divider);
131+
@include a11y.high-contrast(active, off) {
132+
border-left-style: none;
133+
}
105134
}
106135

107136
.mat-horizontal-stepper-header::before,

0 commit comments

Comments
 (0)