select: option groups are not read by JAWS/IE

[benjiallen]

What is the expected behavior?

Option groups should be read by screen readers.

What is the current behavior?

Option groups are not read by screen readers.

Steps to reproduce the issue:

AngularJS Material Demo which shows your issue:

• Open up IE and JAWS and navigate to the right place in the page
• Open the "topping" select menu
• Observe that the option groups are not read by JAWS e.g., "meats", "veggies"

What is the use-case or motivation for changing an existing behavior?

This component is not accessible to screen reader users in it's current form.

Which versions of AngularJS, Material, OS, and browsers are affected?

• Version of AngularJS: 1.6.7 (this is the version used in the demo site)
• Version of Material: 1.1.8 (this is the version used in the demo site)
• OS: Windows 7 Enterprise
• Browsers: IE11
• Screen reader: JAWS 17

[jelbourn]

To clarify, this this only in IE11, or does it affect other browsers as well?

[Splaktar]

It appears to affect all screen readers because PR #10760 applied aria-hidden="true" to the labels in md-optgroups. The PR doesn't seem to specify why this was done.

[Splaktar]

After more investigation, it doesn't look like the aria-hidden="true" was really a problem. It's more that the md-optgroup needs to have an aria-label applied to it. It also seems useful to apply a role="group".

However, while adding this aria-label to md-optgroup gets the screen reader to announce the groups, it breaks the announcing of indexes (i.e. "1 of 8").

On VoiceOver, it just stops giving option indexes completely, but it does mention "Group 1 of 2" and "Group 2 of 2".
On ChromeVox, it mentions the options as "List item 1 of 0" and "List item 2 of 0".

I'm going to investigate if it's feasible to add aria-posinset and aria-setsize and whether this helps or not.

[Splaktar]

Applying aria-posinset and aria-setsize doesn't help VoiceOver, but it's probably better to have the groups announced than to worry about indexes being properly announced.

For ChromeVox, applying aria-posinset and aria-setsize works and allows both the option groups and indexes to be announced properly.