From e7810758f918f3db377f8eec9da802c0ad9b22b7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 23 Sep 2018 23:25:36 +0200
Subject: [PATCH] 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.
---
 src/material/radio/radio.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index da6b0a088d7d..55d929f8c6de 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -61,6 +61,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.