fix(radio): improved alignment for native validation messages (#13570)

Author: crisbeto

src/lib/radio/radio.html

@@ -14,20 +14,20 @@
 
       <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>
-  </div>
 
-  <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
-         [id]="inputId"
-         [checked]="checked"
-         [disabled]="disabled"
-         [tabIndex]="tabIndex"
-         [attr.name]="name"
-         [required]="required"
-         [attr.aria-label]="ariaLabel"
-         [attr.aria-labelledby]="ariaLabelledby"
-         [attr.aria-describedby]="ariaDescribedby"
-         (change)="_onInputChange($event)"
-         (click)="_onInputClick($event)">
+    <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
+        [id]="inputId"
+        [checked]="checked"
+        [disabled]="disabled"
+        [tabIndex]="tabIndex"
+        [attr.name]="name"
+        [required]="required"
+        [attr.aria-label]="ariaLabel"
+        [attr.aria-labelledby]="ariaLabelledby"
+        [attr.aria-describedby]="ariaDescribedby"
+        (change)="_onInputChange($event)"
+        (click)="_onInputClick($event)">
+  </div>
 
   <!-- The label content for radio control. -->
   <div class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">

src/lib/radio/radio.scss

@@ -152,3 +152,10 @@ $mat-radio-ripple-radius: 20px;
     opacity: 0;
   }
 }
+
+.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%;
+}