Toggling radio buttons makes all of them appear checked to JAWS

[jelbourn]

Have a report that, with an <md-radio-group>, all of the options are appearing checked at the same time with JAWS. We should investigate with IE11, Edge, Chrome, and Firefox.

The radio button template looks something like

<md-radio-group ng-model="ctrl.element" class="element-options"
                ng-change="ctrl.updateChoice()">
  <md-radio-button ng-value="'EARTH'" class="md-primary">
    Running on the earth
  </md-radio-button>
  <md-radio-button ng-value="'WIND'" class="md-primary">
    Dancing in the wind
  </md-radio-button>
  <md-radio-button ng-value="'WATER'" class="md-primary">
    Swimming in the water
  </md-radio-button>
</md-radio-group>

[ThomasBurleson]

_Welcome to a11y @bradrich.

[jelbourn]

AFAICT on the demo site, aria-checked is being updated correctly, so this is likely something more subtle.

[bradrich]

I will take a look at this asap.

[ThomasBurleson]

@bradrich - this will be merged in 1.1.2... so we have time.

[jelbourn]

@bradrich have you been able to reproduce?

[bradrich]

@jelbourn I plan on tackling this today. It is my #1 priority item.

[bradrich]

Running through a series of tests prove that there is indeed something wrong with our radio button system when accessed by a screen reader. Here is what I found:

Mac OS 10.11.6

• ChromeVox (installed from Chrome App Store) - Chrome (latest) - "Apple, radio button, checked, one of three"
• Apple Voice Over (default Mac screen reader) - Chrome (latest) - "Apple, selected, one of three"
• Apple Voice Over - Firefox (latest) - "Apple, radio button, selected, one of three"
• Apple Voice Over - Safari (latest) - "Apple, radio button, selected, one of three"

Windows 10 64 bit

• Narrator (default Windows 10 screen reader) - Chrome (latest) - "Group"
  • Clicking on a radio button doesn't provide any spoken messages.
  • This is not what is expected. Accessing this page: http://webaim.org/techniques/forms/controls, when you click on a radio button you get this message: "Selected, Overnight, radio button, one of three".
• Narrator - Edge (latest) - Same as Chrome
• Narrator - Internet Explorer 11 - Same as Edge

The biggest difference between our radio button structure and that of the other test website is that our radio buttons are built with one HTML element: <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>. Their radio buttons are built using the standard HTML approach of:

<input id="overnight" type="radio" name="shipping" value="overnight">
<label for="overnight">Overnight</label><br>

I am investigating ways to correct this problem. Any suggestions would be appreciated.

[ThomasBurleson]

@crisbeto - can you pair with Brad here?

[crisbeto]

I couldn't reproduce it with JAWS 17.0 on Windows @jelbourn. It properly read out everything as not checked and if I provided a pre-filled checked value it also worked.

[crisbeto]

I managed to track this one down. It's because of ngAria which overwrites the aria-checked on load, when using ng-value. The demos on the site work because they use the native value attribute. I'll push a fix.

[jelbourn]

Seems like ngAria always ends up doing the wrong thing when you're already mindful of a11y... Nice debugging.