Angular Material Radio button - Ripple effect persists until clicking away.

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

Yes

### Description

Clicking on a radio button now persists the ripple effect. This issue seems to have appeared since Angular 11 and still exists in Angular 12. This bug can be seen in angular material documentation.

Angular 10. No persistent ripple.
https://v10.material.angular.io/components/radio/overview

Angular 11. Persistent ripple issue which clears after clicking somewhere on the screen
https://v11.material.angular.io/components/radio/overview

Although not perfect I've added the following css to hide the bug as a workaround.

`
.mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-persistent-ripple {
opacity: 0;
}
`

I couldn't find a ticket regarding this issue so thought it's worth raising one.

### Please provide a link to a minimal reproduction of the bug

https://v11.material.angular.io/components/radio/overview

### Please provide the exception or error you saw

_No response_

### Please provide the environment you discovered this bug in

_No response_

### Anything else?

_No response_

Bắt đầu với các ví dụ radio của Angular Material được liên kết trong issue và so sánh hành vi của Angular 10 và Angular 11 để cô lập lỗi hồi quy. Tái hiện ripple vẫn còn sau khi chọn một nút radio, sau đó xác minh rằng nó được xóa mà không cần nhấp vào nơi khác, bao gồm cả trong ví dụ tài liệu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.