Skip to content

Commit 6da0133

Browse files
committed
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.
1 parent a30094b commit 6da0133

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

src/material/radio/radio.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,16 @@ $mat-radio-ripple-radius: 20px;
6161
._mat-animation-noopable & {
6262
transition: none;
6363
}
64+
65+
// Note that this creates a square box around the circle, however it's consistent with
66+
// how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
67+
// into a dotted one, because it's too thick which causes the circles to look off.
68+
@include cdk-high-contrast {
69+
.mat-radio-button.cdk-keyboard-focused & {
70+
outline: dotted 1px;
71+
}
72+
}
73+
6474
}
6575

6676
// The inner circle for the radio, shown when checked.

0 commit comments

Comments
 (0)