Material: radio-group: radio buttons don't work with iOS VoiceOver

[jelbourn]

Once focus moves to a radio group, it is stuck there until tapping out of the group.

[benjiallen]

Adding more detail.

• Components with the issue:
  
  
  
  • md-radio-group and md-radio-button
  
  
• AngularJS Material Version
  
  
  
  • 1.1.5
  
  
• Browsers and Operating System
  
  
  
  • iOS 11.2.1, Safari, VoiceOver
  
  
• Reproduce the Error
  
  
  
  • Issue can reproduced at the Angular Material demo https://material.angularjs.org/latest/demo/radioButton
  
  

[Splaktar]

This is mentioned in the docs as a "benefit", but it clearly isn't a benefit for a11y.

[SammyJoeOsborne]

It appears the aria-activedescendant variation of the Radio Group Design Pattern was used (example from WCAG), which doesn't work properly with iOS Voiceover.

A solution that worked for me in my custom implementation was the roving tab index design pattern instead. Example from WCAG:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/radio/radio-1/radio-1.html

[Splaktar]

I've verified that this is no longer a problem in Safari 12 (12.4.1 is what I tested against) on iOS or macOS using VoiceOver. All of the interactions that I tried worked as expected.

I'm going to close this as a Webkit/Safari issue that has been resolved.