fix(material/stepper): add HCM disabled styles for stepper and tabs (#…

…25393) (#25932)

* fix(material/stepper): add HCM disabled styles

This adds disabled styles for stepper header in high contrast mode

* fix(material/tabs): add HCM disabled styles

This adds disabled styles for tab labels in high contrast mode

Co-authored-by: Jeremy Elbourn <jelbourn@google.com>

src/material-experimental/mdc-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;
+    }
+  }
 }

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;
+      }
+    }
   }
 }