From b026b4ed749fa747d5dcddb3d4b1567806d03af6 Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Mon, 27 Sep 2021 09:35:34 -0700
Subject: [PATCH] fix(material/stepper): add styling to stepper for high
 contrast mode (#23526)

(cherry picked from commit 980f6b2b228ceff49eef7e08b3b5a048c008f91c)
---
 src/material/stepper/step-header.scss | 14 ++++++++++++++
 src/material/stepper/stepper.scss     |  9 +++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss
index 68e29e998ac9..fde2dce109ac 100644
--- 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
index d27d329df52f..c8b825006fe3 100644
--- 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;