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_

从 issue 中链接的 Angular Material 单选框示例开始，并比较 Angular 10 和 Angular 11 的行为，以定位回归问题。重现选择单选按钮后 ripple 持续存在的问题，然后验证无需点击其他位置即可清除它，包括文档示例中的情况。

由索引模型根据 Issue 内容生成。