bug(mat-checkbox): Wrong appearance when inside a disabled fieldset

[coder925]

trafficstars

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

The material checkbox is not styled correctly when inside a disabled fieldset.

The appearance should be the same as when outside a fieldset:

Reproduction

StackBlitz link: Steps to reproduce:

1. https://stackblitz.com/edit/components-issue-penyki

Expected Behavior

1. When checked, a grey background within the tick box
2. The font color is light gray
3. Not clickable (disabled)

Actual Behavior

1. When checked, no background within the tick box
2. The font color is black
3. Clickable. Possible to change checked state.

Environment

• Angular: 16.0.0
• CDK/Material: 16.0.3
• Browser(s): Chrome, Firefox, Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The problem is that MDC's styles use :disabled to style the checkbox. This will have to be fixed on the MDC side.

[muneebkq]

@crisbeto [disabled] ="true" doesn't work

<mat-checkbox [disabled]="true ></mat-checkbox>

is the issue similar

[coder925]

This is an usability concern if your app has a white background. Then there is no way for the user to tell the difference between the checked and unchecked state as the "tick" is always white. The provided example may not fully highlight this issue due to its pink background.