bug(mat-radio-button): mat-radio-button node wrongly reports as a semantic node resulting in bad SR announcement

[stevenyxu]

Reproduction

Reproduced on Chrome OS X VoiceOver.

Steps to reproduce:

1. Visit https://material.angular.io/components/radio/overview
2. Use tab key navigation to navigate to a radio button

Expected Behavior

If a radio group is set, and tab navigation enters it, the name and role of the radio button should be announced followed by the group that was entered. If no radio group is set, it should just be the name and role of the radio button.

e.g. "Option 1 radio button not selected. Basic radios radio group"

Actual Behavior

The <mat-radio-button> node appears to have tabindex="-1" and possibly event handlers on it. Some combination of these is resulting in Chrome inferring it as a semantic node and VO announcing instead the following:

"Option 1 radio button not selected. Option 1 group"

Fix ideas

Investigate removing tabindex="-1" unless somebody has specifically requested it (I can't imagine why) and see if that causes for the a11y tree to correct itself. If not, role="presentation" may need to be added to hint to the a11y APIs that the mat-radio-button node is not semantic and shouldn't be considered a group.

Environment

• Angular: 11.0.2
• Browser(s): Chrome + VoiceOver
• Operating System (e.g. Windows, macOS, Ubuntu): OS X

[crisbeto]

The reason why we have the tabindex on the host node is so the element can receive programmatic focus from something like our focus trap and forward it down to the internal input. That being said, we made some changes in #21046 to work around the issue in a different way that doesn't require the tabindex so we should be able to clear it now.