Skip to content

Commit f80403c

Browse files
authored
fix(material/radio): not checked on first click if partially visible (#19505)
Currently the native `input` inside the radio button is collapsed down to 1px by 1px and moved to the bottom of the element which causes browsers to scroll the window down, rather than change the value, on the first click when the input is partially hidden. These changes fix the issue by having the input cover the entire button and hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden` doesn't make a difference for screen readers. Fixes #19397.
1 parent 88029be commit f80403c

File tree

2 files changed

+9
-5
lines changed

2 files changed

+9
-5
lines changed

src/material/radio/radio.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<span class="mat-radio-container">
66
<span class="mat-radio-outer-circle"></span>
77
<span class="mat-radio-inner-circle"></span>
8-
<input #input class="mat-radio-input cdk-visually-hidden" type="radio"
8+
<input #input class="mat-radio-input" type="radio"
99
[id]="inputId"
1010
[checked]="checked"
1111
[disabled]="disabled"

src/material/radio/radio.scss

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,10 +195,14 @@ $ripple-radius: 20px;
195195
}
196196

197197
.mat-radio-input {
198-
// Move the input in the middle and towards the bottom so
199-
// the native validation messages are aligned correctly.
200-
bottom: 0;
201-
left: 50%;
198+
opacity: 0;
199+
position: absolute;
200+
top: 0;
201+
left: 0;
202+
margin: 0;
203+
width: 100%;
204+
height: 100%;
205+
cursor: inherit;
202206
}
203207

204208
@include a11y.high-contrast(active, off) {

0 commit comments

Comments
 (0)