radio-button: VoiceOver doesn't announce labels properly

[kittenish]

Bug

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*: https://codepen.io/jiaruigao/pen/VweGJrp?editable=true%3Dhttps%3A%2F%2Fmaterial.angularjs.org%2FHEAD%2Fdemo%2FradioButton

Detailed Reproduction Steps

1. Enable VoiceOver
2. Do not pre-select any radio button within a radio group
3. Navigate to a radio group using keyboard tab key
4. Observe the first radio button is focused
5. Observe VoiceOver announces all buttons at once without any gap.

Explain the expected behavior

In step 4, VoiceOver should only announce the focused button.

Explain the current behavior

In step 4, VoiceOver announces all buttons at once.

Discuss the use-case or motivation for changing the existing behavior

It's a bit confusing for VoiceOver to announce all buttons when only one is focused.
In WAI-ARIA example, when follow similar steps, we could see VoiceOver only announces the first radio button when entering a radio group and nothing is selected.

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1.8.0
• AngularJS Material: 1.1.24
• OS: Mac OS Version 10.15.3
• Browsers: Chrome 81.0.4044.113

[Splaktar]

We actually use the aria-activedescendant approach from the second WAI ARIA example: Radio Group Example Using aria-activedescendant.

I can reproduce this issue in master.

[Splaktar]

This was caused by aria-activedescendant not being set at all on the md-radio-group when no radio button was checked/selected, which isn't a valid state. It needs to be set to the first radio button's id.