fix(material/checkbox): add more prominent focus indication in high contrast mode

Currently the checkbox only switches to a dotted border when it receives focus in high
contrast mode. These changes make it a bit more prominent by using a solid outline
on the ripple element.

Author: crisbeto

src/material/checkbox/checkbox.scss

@@ -193,6 +193,24 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   .mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
     opacity: 0.16;
   }
+
+  // Increase specificity because ripple styles are part of the `mat-core` mixin and can
+  // potentially overwrite the absolute position of the container.
+  .mat-checkbox-ripple {
+    position: absolute;
+    left: calc(50% - #{$_mat-checkbox-ripple-radius});
+    top: calc(50% - #{$_mat-checkbox-ripple-radius});
+    height: $_mat-checkbox-ripple-radius * 2;
+    width: $_mat-checkbox-ripple-radius * 2;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  &.cdk-keyboard-focused .mat-checkbox-ripple {
+    @include a11y.high-contrast(active, off) {
+      outline: solid 3px;
+    }
+  }
 }
 
 .mat-checkbox-layout {
@@ -258,14 +276,6 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   ._mat-animation-noopable & {
     transition: none;
   }
-
-  .mat-checkbox.cdk-keyboard-focused & {
-    @include a11y.high-contrast(active, off) {
-      // Note that we change the border style of the checkbox frame to dotted because this
-      // is how IE/Edge similarly treats native checkboxes in high contrast mode.
-      border-style: dotted;
-    }
-  }
 }
 
 .mat-checkbox-background {
@@ -506,15 +516,3 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
   bottom: 0;
   left: 50%;
 }
-
-// Increase specificity because ripple styles are part of the `mat-core` mixin and can
-// potentially overwrite the absolute position of the container.
-.mat-checkbox .mat-checkbox-ripple {
-  position: absolute;
-  left: calc(50% - #{$_mat-checkbox-ripple-radius});
-  top: calc(50% - #{$_mat-checkbox-ripple-radius});
-  height: $_mat-checkbox-ripple-radius * 2;
-  width: $_mat-checkbox-ripple-radius * 2;
-  z-index: 1;
-  pointer-events: none;
-}