fix(material/form-field): missing focus indicator for outline appearance in high-contrast

src/material-experimental/mdc-form-field/BUILD.bazel

@@ -77,6 +77,7 @@ sass_library(
     srcs = [
         "_form-field-density.scss",
         "_form-field-focus-overlay.scss",
+        "_form-field-high-contrast.scss",
         "_form-field-native-select.scss",
         "_form-field-sizing.scss",
         "_form-field-subscript.scss",

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -33,7 +33,7 @@
 
 // Mixin that includes the density styles for form fields. MDC provides their own density
 // styles for MDC text-field which we cannot use. MDC relies on input elements to stretch
-// vertically when the height is reduced as per density scale. This doesn't work for for our
+// vertically when the height is reduced as per density scale. This doesn't work for our
 // form field since we support custom form field controls without a fixed height. Instead, we
 // provide spacing that makes arbitrary controls align as specified in the Material Design
 // specification. In order to support density, we need to adjust the vertical spacing to be

src/material-experimental/mdc-form-field/_form-field-high-contrast.scss

@@ -0,0 +1,30 @@
+@use '../../cdk/a11y';
+
+@mixin private-form-field-high-contrast() {
+  $focus-indicator-width: 3px;
+  $focus-indicator-style: dashed;
+
+  // The outline of the `fill` appearance is achieved through a background color
+  // which won't be visible in high contrast mode. Add an outline to replace it.
+  .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
+    @include a11y.high-contrast(active, off) {
+      outline: solid 1px;
+    }
+  }
+
+  // If a form field with fill appearance is focused, update the outline to be
+  // dashed and thicker to indicate focus.
+  .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
+    @include a11y.high-contrast(active, off) {
+      outline: $focus-indicator-style $focus-indicator-width;
+    }
+  }
+
+  // For form fields with outline appearance, we show a dashed thick border on top
+  // of the solid notched-outline border to indicate focus.
+  .mat-mdc-form-field.mat-focused .mdc-notched-outline {
+    @include a11y.high-contrast(active, off) {
+      border: $focus-indicator-style $focus-indicator-width;
+    }
+  }
+}

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -1,5 +1,4 @@
 @use 'form-field-sizing';
-@use '../../cdk/a11y';
 
 // Mixin that can be included to override the default MDC text-field
 // styles to fit our needs. See individual comments for context on why
@@ -113,11 +112,4 @@
     content: none;
   }
 
-  // The outline of the `fill` appearance is achieved through a background color
-  // which won't be visible in high contrast mode. Add an outline to replace it.
-  .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
-    @include a11y.high-contrast(active, off) {
-      outline: solid 1px;
-    }
-  }
 }

src/material-experimental/mdc-form-field/form-field.scss

@@ -5,6 +5,7 @@
 @use './form-field-sizing';
 @use './form-field-subscript';
 @use './form-field-focus-overlay';
+@use './form-field-high-contrast';
 @use './form-field-native-select';
 @use './mdc-text-field-textarea-overrides';
 @use './mdc-text-field-structure-overrides';
@@ -23,10 +24,11 @@
 @include mdc-text-field-textarea-overrides.private-text-field-textarea-overrides();
 @include mdc-text-field-structure-overrides.private-text-field-structure-overrides();
 
-// Include the subscript, focus-overlay and native select styles.
+// Include the subscript, focus-overlay, native select and high-contrast styles.
 @include form-field-subscript.private-form-field-subscript();
 @include form-field-focus-overlay.private-form-field-focus-overlay();
 @include form-field-native-select.private-form-field-native-select();
+@include form-field-high-contrast.private-form-field-high-contrast();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.

src/material/form-field/form-field-fill.scss

@@ -33,6 +33,12 @@ $fill-subscript-padding:
     }
   }
 
+  &.mat-focused .mat-form-field-flex {
+    @include a11y.high-contrast(active, off) {
+      outline: dashed 3px;
+    }
+  }
+
   .mat-form-field-underline::before {
     content: '';
     display: block;
@@ -47,8 +53,9 @@ $fill-subscript-padding:
     height: $fill-underline-ripple-height;
 
     @include a11y.high-contrast(active, off) {
+      // In high-contrast mode, we hide the ripple as we have a dashed outline as
+      // focus indicator.
       height: 0;
-      border-top: solid $fill-underline-ripple-height;
     }
   }
 

src/material/form-field/form-field-outline.scss

@@ -1,5 +1,6 @@
 @use '../core/style/variables';
 @use '../core/style/private';
+@use '../../cdk/a11y';
 
 // Styles that only apply to the outline appearance of the form-field.
 
@@ -117,6 +118,12 @@ $outline-subscript-padding:
     }
   }
 
+  &.mat-focused .mat-form-field-outline-thick {
+    @include a11y.high-contrast(active, off) {
+      border: 3px dashed;
+    }
+  }
+
   &:not(.mat-form-field-disabled) .mat-form-field-flex:hover {
     & .mat-form-field-outline {
       opacity: 0;