fix(material/form-field): missing focus indicator for outline appeara…

…nce in high-contrast

In high-contast mode, form fields in outline appearance do not have
any focus indication. This commit adds a focus indicator in
high-contrast mode. Additionally, the focus indication for filled
form fields has been improved. Instead of relying on the underline
ripple that overlaps with the outline, we thicken the outline border
on focus (similar as with the outline appearance).

Fixes #22989.

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

@@ -20,16 +20,10 @@
     }
   }
 
-  // For form fields with outline appearance, we unset the outline solid borders
-  // and show a dashed thick border to indicate focus.
+  // 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) {
-      .mdc-notched-outline__leading,
-      .mdc-notched-outline__trailing,
-      .mdc-notched-outline__notch, {
-        border: none;
-      }
-
       border: $focus-indicator-style $focus-indicator-width;
     }
   }

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;