fix(material-experimental/mdc-radio): no focus indication in h… (#18969)

Along the same lines as #13280, but for the MDC component. Adds an outline around the circle when focused in high contrast mode.

Author: crisbeto

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

@@ -2,6 +2,7 @@
 @import '@material/radio/variables.import';
 @import '@material/form-field/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../cdk/a11y/a11y';
 
 @include mdc-radio-without-ripple($query: $mat-base-styles-query);
 @include mdc-form-field-core-styles($query: $mat-base-styles-query);
@@ -21,3 +22,12 @@
     opacity: $mdc-radio-ripple-opacity;
   }
 }
+
+// Note that this creates a square box around the circle, however it's consistent with
+// how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
+// into a dotted one, because it's too thick which causes the circles to look off.
+@include cdk-high-contrast {
+  .mat-mdc-radio-button.cdk-keyboard-focused .mat-radio-ripple {
+    outline: dotted 1px;
+  }
+}