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; + } +}