bug(material/checkbox): when both checked and indeterminate Inputs are true, checkbox displays indeterminate state but a11y tree has state of "checked"

[zarend]

Is this a regression?

• Look slike this regression was introduced in fix(checkbox): Set aria-checked to mixed for indeterminate checkbox #8089

The previous version in which this bug was not present was

No response

Description

In one specific edge case, mat-checkbox doesn't align with native checkbox. That's when checked and indeterminate are both set to true. On native checkbox, if indeterminate is true, then it renders indeterminate state (regardless of checked property). It also produced a sate of "mixed" in the a11y tree.

mat-checkbox handles it differently, since it only renders indeterminate state if the checked Input is false.

<mat-checkbox [checked]="true" [indeterminate]="true" />

Reproduction

Steps to reproduce:

1. Create checkbox with code <mat-checkbox [checked]="true" [indeterminate]="true" />
2. Inspect a11y tree

Expected Behavior

a11y tree has state of "mixed". This is what native checkbox does when the checked and indeterminate property (not attribute) are both set to true. Also, the aria state should match the visual state.

Actual Behavior

Checkbox visually displays the indeterminate state, but a11y tree has state of "selected".

Environment

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

[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.}