From 3e650d59269427b8a41d3266910bf229d22738d6 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 21 May 2025 07:54:49 +0200
Subject: [PATCH] fix(material/radio): assistive technology announcing button
 as invalid

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.
---
 src/material/radio/radio.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html
index 796d7e8708c0..cdcdbc436cc1 100644
--- a/src/material/radio/radio.html
+++ b/src/material/radio/radio.html
@@ -2,6 +2,13 @@
   <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"
@@ -9,6 +16,7 @@
            [attr.name]="name"
            [attr.value]="value"
            [required]="required"
+           aria-invalid="false"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"