From ff1564e61cab6293ef006d7e6e6979ae9532a537 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 20 Nov 2020 21:47:27 +0100
Subject: [PATCH] fix(material/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.
---
 src/material/radio/radio.html |  2 +-
 src/material/radio/radio.scss | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html
index 834c90fc6d01..48bf8c887192 100644
--- a/src/material/radio/radio.html
+++ b/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"
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index a28717370465..8b0a9424fccc 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -179,10 +179,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) {