Accessibility features on md-select #5220
Description
Bug, feature request, or proposal:
upon focusing on md-select with value already selected, the selected value is not read by screen readers. (tested using NVDA on IE and Chrome)
What is the expected behavior?
The selected item should be read upon focusing on the md-select
What is the current behavior?
The placeholder is read, followed by "list" on NVDA. On Apple VoiceOver, the results are similar. Instead of reading the selection, VoiceOver reads "no selection" even when an item is selected.
What are the steps to reproduce?
http://plnkr.co/edit/Fco0OOHNfmp1sXdp5vu3?p=preview
- Select an item in the md-select
- Using a screen reader (I'm using NVDA), focus on the md-select using the keyboard (tab key)
- Observe that what is read is the placeholder followed by "list". The selected option is not read.
NVDA is available for free here: https://www.nvaccess.org/download/
What is the use-case or motivation for changing an existing behavior?
To provide an equal level of accessibility as native select elements.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
This should be browser agnostic for the most part, but various screen readers will likely read the element different.
Is there anything else we should know?
The easiest way to resolve this issue is probably to add the selected item to the aria-label that currently exists on the md-select tab. It already has the field label... adding the selected item should satisfy the critera. Example (based on the above plunk) aria-label="Favorite Food" changes to aria-label="Favorite Food - Tacos Selected"