Skip to content

Commit 8a45ec9

Browse files
committed
fix(material/radio): assistive technology announcing button as invalid (#31160)
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)
1 parent e5eb939 commit 8a45ec9

File tree

1 file changed

+8
-0
lines changed

1 file changed

+8
-0
lines changed

src/material/radio/radio.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,21 @@
22
<div class="mdc-radio" [class.mdc-radio--disabled]="disabled">
33
<!-- Render this element first so the input is on top. -->
44
<div class="mat-mdc-radio-touch-target" (click)="_onTouchTargetClick($event)"></div>
5+
<!--
6+
Note that we set `aria-invalid="false"` on the input, because otherwise some screen readers
7+
will read out "required, invalid data" for each radio button that hasn't been checked.
8+
An alternate approach is to use `aria-required` instead of `required`, however we have an
9+
internal check which enforces that elements marked as `aria-required` also have the `required`
10+
attribute which ends up re-introducing the issue for us.
11+
-->
512
<input #input class="mdc-radio__native-control" type="radio"
613
[id]="inputId"
714
[checked]="checked"
815
[disabled]="disabled && !disabledInteractive"
916
[attr.name]="name"
1017
[attr.value]="value"
1118
[required]="required"
19+
aria-invalid="false"
1220
[attr.aria-label]="ariaLabel"
1321
[attr.aria-labelledby]="ariaLabelledby"
1422
[attr.aria-describedby]="ariaDescribedby"

0 commit comments

Comments
 (0)