bug(MatRadioButton): Allow accepting null for aria-* attributes

[jmzostrowska]

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

Currently, aria-* inputs like aria-describedby for the radio button are typed as strings. If we want to conditionally show a description for the radio and associate it for SR users, then we either retain aria-describedby="myId" when the element with myId no longer exists, or we set it to an empty string aria-descirbedby="''". Both of this options result in errors reported by a11y tools like the ARC toolkit extension.

Let's allow setting null, so that we drop aria-describedby when the description gets dynamically removed.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-4hhqnzqv?file=src%2Fmain.ts,src%2Findex.html
Steps to reproduce:

1. Click the button to show/hide radio button description
2. Run ARC toolkit extension and see error that aria-describedby value is invalid.

Expected Behavior

We should be able to set aria-describedby to null so that it can be dropped from the element

Actual Behavior

ARC toolkit error

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[adolgachev]

Can you please explain what is the use-case where you need to conditionally apply the aria-describedby? I think the expectation would be that it is either set or not set for an element, and not have it dynamic as shown in the stackblitz.

[jmzostrowska]

Sure, my case is that we have a wrapper component around mat-radio-group, and the component has an aria-describedby input and passes it to the underlying mat-radio-group. Another case is when we would display an auxiliary information under mat-buttons (and would associate it with aria-describedby for accessibility) that would be shown dependent on the user choice in the preceding form controls