fix(material/expansion): add focus indication in high contrast mode (#…

…21549)

The expansion panel header changes its background color when it receives focus which isn't
visible in high contrast mode. These changes add an outline around it which is more visible.

Fixes #21544.

src/material/expansion/_expansion-mixins.scss

@@ -0,0 +1,11 @@
+@mixin mat-private-expansion-focus {
+  .mat-expansion-panel {
+    & .mat-expansion-panel-header.cdk-keyboard-focused,
+    & .mat-expansion-panel-header.cdk-program-focused,
+    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
+      &:not([aria-disabled='true']) {
+        @content;
+      }
+    }
+  }
+}

src/material/expansion/_expansion-theme.scss

@@ -4,6 +4,7 @@
 @import '../core/style/private';
 @import '../core/typography/typography-utils';
 @import './expansion-variables';
+@import './expansion-mixins';
 
 @mixin mat-expansion-panel-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
@@ -20,14 +21,8 @@
     border-top-color: mat-color($foreground, divider);
   }
 
-  .mat-expansion-panel {
-    & .mat-expansion-panel-header.cdk-keyboard-focused,
-    & .mat-expansion-panel-header.cdk-program-focused,
-    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
-      &:not([aria-disabled='true']) {
-        background: mat-color($background, hover);
-      }
-    }
+  @include mat-private-expansion-focus {
+    background: mat-color($background, hover);
   }
 
   // Disable the hover on touch devices since it can appear like it is stuck. We can't use

src/material/expansion/expansion-panel-header.scss

@@ -1,4 +1,7 @@
+@import '../core/style/layout-common';
+@import '../../cdk/a11y/a11y';
 @import './expansion-variables';
+@import './expansion-mixins';
 
 .mat-expansion-panel-header {
   display: flex;
@@ -76,3 +79,19 @@
   transform: rotate(45deg);
   vertical-align: middle;
 }
+
+@include cdk-high-contrast(active, off) {
+  @include mat-private-expansion-focus {
+    &::before {
+      // These styles are identical to the ones generated for all
+      // `.mat-focus-indicator` when strong focus indication is enabled.
+      // We have to repeat them, because strong focus is opt-in.
+      @include mat-fill();
+      box-sizing: border-box;
+      pointer-events: none;
+      border: 3px solid;
+      border-radius: 4px;
+      content: '';
+    }
+  }
+}