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 6184cf108771..1d73e0a0178a 100644 --- a/src/material/stepper/stepper.scss +++ b/src/material/stepper/stepper.scss @@ -1,6 +1,7 @@ @use 'sass:math'; @use '../core/style/variables'; @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;