diff --git a/src/material/stepper/step-header.scss b/src/material/stepper/step-header.scss index d01e87b5e745..8447fc3f2f08 100644 --- a/src/material/stepper/step-header.scss +++ b/src/material/stepper/step-header.scss @@ -25,6 +25,17 @@ text-decoration: underline; } } + + // When a step header is disabled in high contrast mode, set the text color to the disabled + // color, which is (unintuitively) named "GrayText". + &[aria-disabled='true'] { + outline-color: GrayText; + .mat-step-label, + .mat-step-icon, + .mat-step-optional { + color: GrayText; + } + } } } diff --git a/src/material/tabs/tab-header.scss b/src/material/tabs/tab-header.scss index 95375660e56b..5dad511323ae 100644 --- a/src/material/tabs/tab-header.scss +++ b/src/material/tabs/tab-header.scss @@ -1,3 +1,4 @@ +@use '@angular/cdk'; @use './tabs-common'; @include tabs-common.paginated-tab-header; @@ -10,8 +11,18 @@ @include tabs-common.paginated-tab-header-item-wrapper('.mat-mdc-tab-header'); } -// For the tab element, default inset/offset values are necessary to ensure that -// the focus indicator is sufficiently contrastive and renders appropriately. -.mat-mdc-tab::before { - margin: 5px; +.mat-mdc-tab { + // For the tab element, default inset/offset values are necessary to ensure that + // the focus indicator is sufficiently contrastive and renders appropriately. + &::before { + margin: 5px; + } + + @include cdk.high-contrast(active, off) { + // When a tab is disabled in high contrast mode, set the text color to the disabled + // color, which is (unintuitively) named "GrayText". + &[aria-disabled='true'] { + color: GrayText; + } + } }