Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 21, 2025

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented May 20, 2025

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.

@crisbeto crisbeto requested a review from a team as a code owner May 20, 2025 12:50
@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label May 20, 2025
@crisbeto crisbeto requested review from adolgachev and mmalerba and removed request for a team May 20, 2025 12:50
@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label May 21, 2025
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 angular#30761.
@crisbeto crisbeto force-pushed the 30761/button-aria-required branch from c570057 to 3e650d5 Compare May 21, 2025 05:55
@crisbeto crisbeto removed the request for review from adolgachev May 21, 2025 10:32
@crisbeto
Copy link
Member Author

I changed the approach here a bit, because there was an internal check requiring that aria-required and the required attribute to be in sync which is what we're trying to avoid.

@crisbeto crisbeto merged commit cf83272 into angular:main May 21, 2025
20 of 22 checks passed
@crisbeto
Copy link
Member Author

The changes were merged into the following branches: main, 19.2.x, 20.0.x

crisbeto added a commit that referenced this pull request May 21, 2025
#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)
crisbeto added a commit that referenced this pull request May 21, 2025
#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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/radio target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(RadioButton): Enter a required radio group, SR announces "required invalid data"
3 participants