Skip to content

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

@clamli

Description

@clamli
Contributor

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):

Activity

added
P2The issue is important to a large percentage of users, with a workaround
AccessibilityThis issue is related to accessibility (a11y)
and removed
needs triageThis issue needs to be triaged by the team
on Jan 29, 2025
added 2 commits that reference this issue on Feb 2, 2025
57c68d4
0e14964
added 4 commits that reference this issue on Feb 2, 2025
8c949a0
92c7a6b
99d1dfd
8e7a43d
added a commit that references this issue on May 20, 2025
da2bd7c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)P2The issue is important to a large percentage of users, with a workaroundarea: material/radio

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @clamli@wagnermaciel

      Issue actions

        bug(MatRadioButton): The `required` attribute is used on a radio button · Issue #30399 · angular/components