From 7623105b97c8d1a50df499ddd2fad0664bd6f329 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Wed, 1 Apr 2020 23:01:43 +0200 Subject: [PATCH] fix(material-experimental/mdc-radio): no focus indication in high contrast mode Along the same lines as #13280, but for the MDC component. Adds an outline around the circle when focused in high contrast mode. --- src/material-experimental/mdc-radio/radio.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index 06125a03638c..ca8ba13ab6c7 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/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; + } +}