Skip to content

Commit a74099f

Browse files
crisbetotinayuangao
authored andcommitted
fix(radio): checked radio button indistinguishable in high contrast mode (#10753)
Fixes the circle inside the checked radio button not being rendered in high contrast mode, making it indistinguishable from the rest of the buttons.
1 parent 44a0a4f commit a74099f

File tree

1 file changed

+7
-0
lines changed

1 file changed

+7
-0
lines changed

src/lib/radio/radio.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../core/style/variables';
22
@import '../core/ripple/ripple';
3+
@import '../../cdk/a11y/a11y';
34

45

56
$mat-radio-size: $mat-toggle-size !default;
@@ -65,6 +66,12 @@ $mat-radio-ripple-radius: 25px;
6566

6667
.mat-radio-checked & {
6768
transform: scale(0.5);
69+
70+
@include cdk-high-contrast {
71+
// Since we use a background color to render the circle, it won't be
72+
// displayed in high contrast mode. Use a border as a fallback.
73+
border: solid $mat-radio-size / 2;
74+
}
6875
}
6976
}
7077

0 commit comments

Comments
 (0)