Focus-visible does not work on MDC Radio/Checkbox while hover works

[strange briar]

Example this works .mat-mdc-radio-button .mdc-radio:hover {
outline: 1.5px solid black !important;
} but this does not .mat-mdc-radio-button .mdc-radio:focus-visible {
outline: 1.5px solid black !important;
}

[narrow vessel]

Just to confirm, why do you want use focus-visible instead of focus?

ref: https://mayashavin.com/articles/focus-vs-focus-visible-for-accessibility