Skip to content

Commit 3e650d5

Browse files
committed
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.
1 parent c286a94 commit 3e650d5

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)