fix(material/radio): hide decorative elements from assistive technology

Hides the radio's decorative elements from screen readers so they don't interfere.

Fixes #32797.

Author: crisbeto

src/material/radio/radio.html

@@ -1,7 +1,10 @@
 <div mat-internal-form-field [labelPosition]="labelPosition" #formField>
   <div class="mdc-radio" [class.mdc-radio--disabled]="disabled">
     <!-- Render this element first so the input is on top. -->
-    <div class="mat-mdc-radio-touch-target" (click)="_onTouchTargetClick($event)"></div>
+    <div
+      class="mat-mdc-radio-touch-target"
+      (click)="_onTouchTargetClick($event)"
+      aria-hidden="true"></div>
     <!--
       Note that we set `aria-invalid="false"` on the input, because otherwise some screen readers
       will read out "required, invalid data" for each radio button that hasn't been checked.
@@ -22,14 +25,15 @@
            [attr.aria-describedby]="ariaDescribedby"
            [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
            (change)="_onInputInteraction($event)">
-    <div class="mdc-radio__background">
+    <div class="mdc-radio__background" aria-hidden="true">
       <div class="mdc-radio__outer-circle"></div>
       <div class="mdc-radio__inner-circle"></div>
     </div>
     <div mat-ripple class="mat-radio-ripple mat-focus-indicator"
          [matRippleTrigger]="_rippleTrigger.nativeElement"
          [matRippleDisabled]="_isRippleDisabled()"
-         [matRippleCentered]="true">
+         [matRippleCentered]="true"
+         aria-hidden="true">
       <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
     </div>
   </div>