bug(checkbox): aria-label and aria-labelledby result in duplicate attributes and verbose screen reader experience

[mfairchild365]

Reproduction

1. Use NVDA 2020 and Chrome 81
2. Navigate to https://angular-kjejjn-2lxw6j.stackblitz.io
3. Tab to the second example "two labels"
4. Observe that the output is "clickable Check me! hello Check me! hello check box not checked"
5. Inspect the rendered DOM and observe that aria-labelledby is on both the <mat-checkbox> and <input type="checkbox>.

Expected Behavior

• NVDA should only announce the labels once, and should not announce "clickable". For example "Check me! hello check box not checked".
• This is occurring because of the duplicated attribute on the container. The aria-labelledby attribute should not exist on the containing <mat-checkbox>

Actual Behavior

Very verbose output in NVDA.

Environment

• Angular: 9.2.4
• CDK/Material: 9.2.4
• Browser(s): Chrome 81
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, with NVDA 2020.1

[devversion]

Great report. Thanks! Looks like there is a PR for this: #17092. There is also a PR pending for button-toggle: #17086.

[Ckolhari5353]

Hi,

I'm facing the same issue, any specific release date for this bug fix?

[crisbeto]

Should be resolved now by #17092.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}