fix(form-field): inaccessible in high contrast mode (#11736)

Fixes the following issues that made the form field hard to use in high contrast mode:
* Hides the infix border in high contrast mode so it doesn't render as solid yellow/white bars.
* Fixes the underlines and underline ripples not being rendered.
* Fixes the `fill` appearance blending in with the background.

Fixes #6257.
Fixes #6383.
Fixes #9009.

Author: crisbeto

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

@@ -1,6 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
-
+@import '../../cdk/a11y/a11y';
 
 // Styles that only apply to the fill appearance of the form-field.
 
@@ -27,6 +27,10 @@ $mat-form-field-fill-subscript-padding:
     border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
     padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
              $mat-form-field-fill-side-padding;
+
+    @include cdk-high-contrast {
+      outline: solid 1px;
+    }
   }
 
   .mat-form-field-underline::before {
@@ -41,6 +45,11 @@ $mat-form-field-fill-subscript-padding:
   .mat-form-field-ripple {
     bottom: 0;
     height: $mat-form-field-fill-underline-ripple-height;
+
+    @include cdk-high-contrast {
+      height: 0;
+      border-top: solid $mat-form-field-fill-underline-ripple-height;
+    }
   }
 
   // Note that we need this specific of a selector because we don't want

src/lib/form-field/form-field-legacy.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
+@import '../../cdk/a11y/a11y';
 
 
 // Styles that only apply to the legacy appearance of the form-field.
@@ -36,11 +37,22 @@ $mat-form-field-legacy-underline-height: 1px !default;
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {
     height: $mat-form-field-legacy-underline-height;
+
+    @include cdk-high-contrast {
+      height: 0;
+      border-top: solid $mat-form-field-legacy-underline-height;
+    }
   }
 
   .mat-form-field-ripple {
+    $height: $mat-form-field-legacy-underline-height * 2;
     top: 0;
-    height: $mat-form-field-legacy-underline-height * 2;
+    height: $height;
+
+    @include cdk-high-contrast {
+      height: 0;
+      border-top: solid $height;
+    }
   }
 
   &.mat-form-field-disabled .mat-form-field-underline {

src/lib/form-field/form-field-standard.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
+@import '../../cdk/a11y/a11y';
 
 
 // Styles that only apply to the standard appearance of the form-field.
@@ -20,11 +21,22 @@ $mat-form-field-standard-padding-top: 0.75em !default;
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {
     height: $mat-form-field-standard-underline-height;
+
+    @include cdk-high-contrast {
+      height: 0;
+      border-top: solid $mat-form-field-standard-underline-height;
+    }
   }
 
   .mat-form-field-ripple {
+    $height: $mat-form-field-standard-underline-height * 2;
     bottom: 0;
-    height: $mat-form-field-standard-underline-height * 2;
+    height: $height;
+
+    @include cdk-high-contrast {
+      height: 0;
+      border-top: $height;
+    }
   }
 
   &.mat-form-field-disabled .mat-form-field-underline {

src/lib/form-field/form-field.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
+@import '../../cdk/a11y/a11y';
 
 
 // Styles that apply to all appearances of the form-field.
@@ -52,6 +53,14 @@ $mat-form-field-default-infix-width: 180px !default;
   flex: auto;
   min-width: 0;
   width: $mat-form-field-default-infix-width;
+
+  // In high contrast mode IE/Edge will render all of the borders, even if they're transparent.
+  // Since we can't remove the border altogether or replace it with a margin, because it'll throw
+  // off the baseline, and we can't use a base64-encoded 1x1 transparent image because of CSP,
+  // we work around it by setting a linear gradient that goes from `transparent` to `transparent`.
+  @include cdk-high-contrast {
+    border-image: linear-gradient(transparent, transparent);
+  }
 }
 
 // Used to hide the label overflow on IE, since IE doesn't take transform into account when