fix(material/radio): assistive technology announcing button as invalid (#31160)

crisbeto · crisbeto · commit 8a45ec928007 · 2025-05-21T12:33:01.000+02:00
Fixes that some screen readers were reading out "required, invalid data" for radio buttons that were marked as required. The problem was triggered by us using the `required` attribute and the fix is to add `aria-invalid="false"` to it. Note that an alternate approach is to use `aria-required` instead, but there are some internal checks that require both `aria-required` and `required` to be set which re-introduces the issue. Fixes #30761. (cherry picked from commit cf83272)
diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html
@@ -2,13 +2,21 @@
   <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>
+    <!--
+      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.
+      An alternate approach is to use `aria-required` instead of `required`, however we have an
+      internal check which enforces that elements marked as `aria-required` also have the `required`
+      attribute which ends up re-introducing the issue for us.
+    -->
     <input #input class="mdc-radio__native-control" type="radio"
            [id]="inputId"
            [checked]="checked"
            [disabled]="disabled && !disabledInteractive"
            [attr.name]="name"
            [attr.value]="value"
            [required]="required"
+           aria-invalid="false"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"
