Skip to content

Commit c570057

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. Switching it to `aria-required` seems to resolve the issue. Fixes #30761.
1 parent c286a94 commit c570057

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

src/material/radio/radio.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[disabled]="disabled && !disabledInteractive"
99
[attr.name]="name"
1010
[attr.value]="value"
11-
[required]="required"
11+
[attr.aria-required]="required ? true : null"
1212
[attr.aria-label]="ariaLabel"
1313
[attr.aria-labelledby]="ariaLabelledby"
1414
[attr.aria-describedby]="ariaDescribedby"

src/material/radio/testing/radio-harness.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export class MatRadioButtonHarness extends ComponentHarness {
217217

218218
/** Whether the radio-button is required. */
219219
async isRequired(): Promise<boolean> {
220-
const required = (await this._input()).getAttribute('required');
220+
const required = (await this._input()).getAttribute('aria-required');
221221
return coerceBooleanProperty(await required);
222222
}
223223

0 commit comments

Comments
 (0)