bug(Material Checkbox): focused styles works only for keyboard-focused checkboxes

[platon-rov]

Reproduction

https://stackblitz.com/edit/components-issue-zyqjwi

Steps to reproduce:

1. Place Material Checkbox after Material Menu Trigger button. (Maybe exist more scenarios)
2. Tab out from menu

Expected Behavior

Material Checkbox focused and has focused styles.

Actual Behavior

Material Checkbox focused but but does not have any focused styles.

Current behavior based on the next rule from src/material/checkbox/checkbox.scss:

.mat-checkbox.cdk-keyboard-focused & {
    opacity: 0.12;
}

Environment

• Angular: 9.1.0-next.4
• CDK/Material: 9.1.3
• Browser(s): It does not matter
• Operating System (e.g. Windows, macOS, Ubuntu): It does not matter

[crisbeto]

Usually we have a cdk-program-focused together with cdk-keyboard-focused, but I think that's not the case for mat-checkbox, because the FocusMonitor incorrectly detects clicks as programmatic focus.

[2paedev]

Hi! I fix this issue adding this in our app styles:

.mat-checkbox-persistent-ripple { .mat-checkbox.cdk-focused & { opacity: 0.12; } }