fix(material-experimental/mdc-checkbox): add focus indication in high contrast mode

Adds focus indication in high contrast mode to the MDC-based checkbox since currently
it's impossible to know whether the element is focused.

Author: crisbeto

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -4,6 +4,7 @@
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/_layout-common.scss';
+@use '../../cdk/a11y/a11y';
 @import '@material/checkbox/functions.import';
 @import '@material/checkbox/mixins.import';
 @import '@material/form-field/mixins.import';
@@ -27,8 +28,7 @@
   // The MDC checkbox styles related to the hover state are intertwined with the MDC ripple styles.
   // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
   // additional styles to restore the hover state.
-  .mdc-checkbox:hover
-  .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
+  .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple {
     opacity: map.get($mdc-ripple-dark-ink-opacities, hover);
     transform: scale(1);
     transition: mdc-checkbox-transition-enter(opacity, 0, 80ms),
@@ -37,10 +37,14 @@
 
   // Note that the :not([disabled]) here isn't necessary, but we need it for the
   // extra specificity so that the hover styles don't override the focus styles.
-  .mdc-checkbox
-  .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
+  .mdc-checkbox .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
     opacity: map.get($mdc-ripple-dark-ink-opacities, hover) +
       map.get($mdc-ripple-dark-ink-opacities, focus);
+
+    @include a11y.high-contrast(active, off) {
+      outline: solid 3px;
+      opacity: 1;
+    }
   }
 
   // Angular Material supports disabling all animations when NoopAnimationsModule is imported.