Skip to content

Commit b026b4e

Browse files
committed
fix(material/stepper): add styling to stepper for high contrast mode (#23526)
(cherry picked from commit 980f6b2)
1 parent 6b71169 commit b026b4e

File tree

2 files changed

+23
-0
lines changed

2 files changed

+23
-0
lines changed

src/material/stepper/step-header.scss

+14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '../core/style/layout-common';
22
@use './stepper-variables';
3+
@use '../../cdk/a11y';
34

45
.mat-step-header {
56
overflow: hidden;
@@ -8,6 +9,19 @@
89
position: relative;
910
box-sizing: content-box;
1011
-webkit-tap-highlight-color: transparent;
12+
13+
@include a11y.high-contrast(active, off) {
14+
outline: solid 1px;
15+
&.cdk-keyboard-focused, &.cdk-program-focused {
16+
outline: solid 3px;
17+
}
18+
19+
&[aria-selected='true'] {
20+
.mat-step-label {
21+
text-decoration: underline;
22+
}
23+
}
24+
}
1125
}
1226

1327
.mat-step-optional,

src/material/stepper/stepper.scss

+9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '../core/style/variables';
22
@use '../core/style/private';
33
@use './stepper-variables';
4+
@use '../../cdk/a11y';
45

56
.mat-stepper-vertical,
67
.mat-stepper-horizontal {
@@ -125,11 +126,19 @@
125126
}
126127

127128
.mat-horizontal-content-container {
129+
@include a11y.high-contrast(active, off) {
130+
outline: solid 1px;
131+
}
132+
128133
overflow: hidden;
129134
padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
130135
}
131136

132137
.mat-vertical-content-container {
138+
@include a11y.high-contrast(active, off) {
139+
outline: solid 1px;
140+
}
141+
133142
margin-left: stepper-variables.$vertical-stepper-content-margin;
134143
border: 0;
135144
position: relative;

0 commit comments

Comments
 (0)