fix(material-experimental/mdc-form-field): add stronger focus indicator in high-contrast mode

Sets up a stronger focus indicator for form fields in high-contrast
mode.

Author: devversion

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,36 @@
+@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 unset the outline solid borders
+  // and show a dashed thick border to indicate focus.
+  .mat-mdc-form-field.mat-focused .mdc-notched-outline {
+    @include a11y.high-contrast(active, off) {
+      .mdc-notched-outline__leading,
+      .mdc-notched-outline__trailing,
+      .mdc-notched-outline__notch, {
+        border: none;
+      }
+
+      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.