fix(material/stepper): add styling to stepper for high contrast mode (#…

…23526) (cherry picked from commit 980f6b2)
angular · Sep 27, 2021 · b026b4e · b026b4e
1 parent 6b71169
commit b026b4e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss
@@ -1,5 +1,6 @@
 @use '../core/style/layout-common';
 @use './stepper-variables';
+@use '../../cdk/a11y';
 
 .mat-step-header {
   overflow: hidden;
@@ -8,6 +9,19 @@
   position: relative;
   box-sizing: content-box;
   -webkit-tap-highlight-color: transparent;
+
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+    &.cdk-keyboard-focused, &.cdk-program-focused {
+      outline: solid 3px;
+    }
+
+    &[aria-selected='true'] {
+      .mat-step-label {
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
 .mat-step-optional,

diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss
@@ -1,6 +1,7 @@
 @use '../core/style/variables';
 @use '../core/style/private';
 @use './stepper-variables';
+@use '../../cdk/a11y';
 
 .mat-stepper-vertical,
 .mat-stepper-horizontal {
@@ -125,11 +126,19 @@
 }
 
 .mat-horizontal-content-container {
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+
   overflow: hidden;
   padding: 0 stepper-variables.$side-gap stepper-variables.$side-gap stepper-variables.$side-gap;
 }
 
 .mat-vertical-content-container {
+  @include a11y.high-contrast(active, off) {
+    outline: solid 1px;
+  }
+
   margin-left: stepper-variables.$vertical-stepper-content-margin;
   border: 0;
   position: relative;