fix(radio): missing radio indication in high contrast mode

Currently we use ripples for focus indication on radio buttons, however they're hidden in high contrast mode. These changes add an outline as a fallback.

Also fixes the focus indication showing up for mouse focus.

Author: crisbeto

src/lib/radio/radio.scss

@@ -53,6 +53,16 @@ $mat-radio-ripple-radius: 20px;
   ._mat-animation-noopable & {
     transition: none;
   }
+
+  // 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-radio-button.cdk-keyboard-focused & {
+      outline: dotted 1px;
+    }
+  }
+
 }
 
 // The inner circle for the radio, shown when checked.
@@ -142,7 +152,7 @@ $mat-radio-ripple-radius: 20px;
     opacity: 0.04;
   }
 
-  .mat-radio-button:not(.mat-radio-disabled).cdk-focused & {
+  .mat-radio-button:not(.mat-radio-disabled).cdk-keyboard-focused & {
     opacity: 0.12;
   }