mat-select children do not have appropriate ARIA roles

[univern72]

Reproduction

View source of any mat-select example:
https://material.angular.io/components/select/examples

Steps to reproduce:

1. Use a mat-select
2. Look at its children in the DOM

Expected Behavior

mat-select has role=listbox, so its children should have role=option

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Description

Actual Behavior

mat-select children do not have role=option

Environment

• Angular: Whatever's on https://material.angular.io right now
• CDK/Material: Whatever's on https://material.angular.io right now
• Browser(s): Chrome 75
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

Other notes

This was caught by running the accessibility developer tools audit.

[andrewseguin]

Yes, the select's children should have that role. Ideally all the options are direct children and in the DOM, but our current design does not consider this.

We do have an open issue to rework the select with accessibility in mind - check out #11083 for details. I'll close this in favor of keeping one issue related to select's a11y but thanks for reporting the issue

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}