Skip to content
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.

Sign up for GitHub

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

Jump to bottom

bug(MatRadioButton): The required attribute is used on a radio button #30399

Open
1 task
clamli opened this issue Jan 27, 2025 · 0 comments · May be fixed by #30434
Open
1 task

bug(MatRadioButton): The required attribute is used on a radio button #30399

clamli opened this issue Jan 27, 2025 · 0 comments · May be fixed by #30434
Labels
Accessibility This issue is related to accessibility (a11y) area: material/radio P2 The issue is important to a large percentage of users, with a workaround

Comments

@clamli
Copy link
Contributor

clamli commented Jan 27, 2025 •
edited
Loading

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When used in a radio group, the required attribute is used on a radio button. All the radio buttons under the group have required attributes. This attribute should not be used on individual radio buttons, because that creates illogical meta-data, which may be confusing for assistive technology users. It's not the individual controls that are required, it's the group as a whole that must have one choice made from it.

Code reference: https://source.corp.google.com/piper///depot/google3/third_party/javascript/angular_components/src/material/radio/radio.ts;l=250-257;bpv=1;bpt=1

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

When a radio button is used inside a radio group, if the group is required and does not have a default selection, then add aria-required="true" to the wrapping element, not aria-required/required to the individual controls. We can leave it unchanged when a radio button is used outside a radio group, though I am unsure if that is a valid use case.

Actual Behavior

The required attribute is applied to each radio button in a group.

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
@clamli clamli added the needs triage This issue needs to be triaged by the team label Jan 27, 2025
@wagnermaciel wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround Accessibility This issue is related to accessibility (a11y) area: material/radio and removed needs triage This issue needs to be triaged by the team labels Jan 29, 2025
naaajii added a commit to naaajii/components that referenced this issue Feb 2, 2025
@naaajii
fix(material/radio): required attribute being set on buttons
57c68d4 
fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton'
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes angular#30399
naaajii added a commit to naaajii/components that referenced this issue Feb 2, 2025
@naaajii
fix(material/radio): required attribute being set on buttons
0e14964 
fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton`
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes angular#30399
@naaajii naaajii linked a pull request Feb 2, 2025 that will close this issue
Open
naaajii added a commit to naaajii/components that referenced this issue Feb 2, 2025
@naaajii
fix(material/radio): required attribute being set on buttons
8c949a0 
fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton`
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes angular#30399
naaajii added a commit to naaajii/components that referenced this issue Feb 3, 2025
@naaajii
fix(material/radio): required attribute being set on buttons
92c7a6b 
fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton`
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes angular#30399
naaajii added a commit to naaajii/components that referenced this issue Feb 3, 2025
@naaajii
fix(material/radio): required attribute being set on buttons
99d1dfd 
fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton`
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes angular#30399
naaajii added a commit to naaajii/components that referenced this issue Feb 3, 2025
@naaajii
fix(material/radio): required attribute being set on buttons
8e7a43d 
fixes when `MatRadioGroup` is set to be required it was setting all of its `MatRadioButton`
to be required as-well which is confusing for assistive technologies, this commit ensures
we only set aria-required on group rather than all buttons unless button is being used
standalone of `MatRadioGroup`

fixes angular#30399
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/radio P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/radio): required attribute being set on buttons naaajii/components
2 participants
@clamli @wagnermaciel