Skip to content

Commit

Permalink
fix(material/radio): add high contrast focus indication (#22145)
Browse files Browse the repository at this point in the history
* Adds focus indication in high contrast mode to the non-MDC radio button.
* Makes the focus indication on the MDC radio button more prominent.
  • Loading branch information
crisbeto authored Mar 19, 2021
1 parent 1fac491 commit 2e1214f
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
9 changes: 7 additions & 2 deletions src/material-experimental/mdc-radio/radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@
// 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 a11y.high-contrast {
.mat-mdc-radio-button.cdk-keyboard-focused .mat-radio-ripple {
outline: dotted 1px;
.mat-mdc-radio-button:not(.mat-radio-disabled) {
&.cdk-keyboard-focused,
&.cdk-program-focused {
.mat-radio-ripple {
outline: solid 3px;
}
}
}
}
9 changes: 9 additions & 0 deletions src/material/radio/radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,15 @@ $ripple-radius: 20px;
}

@include a11y.high-contrast(active, off) {
.mat-radio-button:not(.mat-radio-disabled) {
&.cdk-keyboard-focused,
&.cdk-program-focused {
.mat-radio-ripple {
outline: solid 3px;
}
}
}

.mat-radio-disabled {
opacity: 0.5;
}
Expand Down

0 comments on commit 2e1214f

Please sign in to comment.