fix(checkbox): high contrast accessibility improvements (#11633)

* Fixes the checkbox outline becoming hidden when it's selected.
* Fixes the checkmark and mixedmark not being visible with white-on-black settings.
* Fixes the disabled state not being visible.
* Adds a parameter to the `cdk-high-contrast` mixin that allows for targeting a specific high contrast setting.

Relates to #11623.

Author: crisbeto

src/cdk/a11y/_a11y.scss

@@ -22,9 +22,11 @@
  * Applies styles for users in high contrast mode. Note that this only applies
  * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
  * attribute, however Chrome handles high contrast differently.
+ * @param target Which kind of high contrast setting to target. Defaults to `active`, can be
+ *    `white-on-black` or `black-on-white`.
  */
-@mixin cdk-high-contrast {
-  @media screen and (-ms-high-contrast: active) {
+@mixin cdk-high-contrast($target: active) {
+  @media screen and (-ms-high-contrast: $target) {
     @content;
   }
 }

src/lib/checkbox/_checkbox-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/theming/theming';
 @import '../core/typography/typography-utils';
+@import '../../cdk/a11y/a11y';
 
 
 @mixin mat-checkbox-theme($theme) {
@@ -29,9 +30,15 @@
   }
 
   .mat-checkbox-checkmark-path {
-    // !important is needed here because a stroke must be set as an attribute on the SVG in order
-    // for line animation to work properly.
+    // !important is needed here because a stroke must be set as an
+    // attribute on the SVG in order for line animation to work properly.
     stroke: $checkbox-mark-color !important;
+
+    @include cdk-high-contrast(black-on-white) {
+      // Having the one above be !important ends up overriding the browser's automatic
+      // color inversion so we need to re-invert it ourselves for black-on-white.
+      stroke: #000 !important;
+    }
   }
 
   .mat-checkbox-mixedmark {
@@ -68,6 +75,19 @@
     .mat-checkbox-label {
       color: $disabled-color;
     }
+
+    @include cdk-high-contrast {
+      opacity: 0.5;
+    }
+  }
+
+  // This one is moved down here so it can target both
+  // the theme colors and the disabled state.
+  @include cdk-high-contrast {
+    .mat-checkbox-background {
+      // Needs to be removed because it hides the checkbox outline.
+      background: none;
+    }
   }
 
   .mat-checkbox:not(.mat-checkbox-disabled) {

src/lib/checkbox/checkbox.scss

@@ -4,6 +4,7 @@
 @import '../core/ripple/ripple';
 @import '../core/style/layout-common';
 @import '../core/style/noop-animation';
+@import '../../cdk/a11y/a11y';
 
 // Manual calculation done on SVG
 $_mat-checkbox-mark-path-length: 22.910259;
@@ -275,11 +276,18 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-mixedmark {
-  @extend %mat-checkbox-mark;
+  $height: floor($_mat-checkbox-mark-stroke-size);
 
-  height: floor($_mat-checkbox-mark-stroke-size);
+  @extend %mat-checkbox-mark;
+  height: $height;
   opacity: 0;
   transform: scaleX(0) rotate(0deg);
+
+  @include cdk-high-contrast {
+    height: 0;
+    border-top: solid $height;
+    margin-top: $height;
+  }
 }
 
 .mat-checkbox-label-before {