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.

(cherry picked from commit f80403c)

src/material/radio/radio.html

@@ -5,7 +5,7 @@
   <span class="mat-radio-container">
     <span class="mat-radio-outer-circle"></span>
     <span class="mat-radio-inner-circle"></span>
-    <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
+    <input #input class="mat-radio-input" type="radio"
         [id]="inputId"
         [checked]="checked"
         [disabled]="disabled"

src/material/radio/radio.scss

@@ -195,10 +195,14 @@ $ripple-radius: 20px;
 }
 
 .mat-radio-input {
-  // Move the input in the middle and towards the bottom so
-  // the native validation messages are aligned correctly.
-  bottom: 0;
-  left: 50%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  cursor: inherit;
 }
 
 @include a11y.high-contrast(active, off) {