fix(radio): not checked on first click if partially visible

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.

Author: crisbeto

src/material/radio/radio.html

@@ -5,7 +5,7 @@
   <div class="mat-radio-container">
     <div class="mat-radio-outer-circle"></div>
     <div class="mat-radio-inner-circle"></div>
-    <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

@@ -177,10 +177,14 @@ $mat-radio-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 cdk-high-contrast(active, off) {