When checking Accessibility using Wave Tool for mat-select that uses mat-label , getting Orphaned form label accessibility warning.

[Viddhiyartha]

Bug, feature request, or proposal:

A drop down is created with mat-select and a label for dropdown is added with mat-label. On checking the accessibility using Wave Evaluation Tool chrome extension, getting Orphaned form label Warning. (Label not associated with proper form element)

Wave Tool : https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

What is the expected behavior?

Orphaned form label warning should not appear

What is the current behavior?

Orphaned form label warning apeard

What are the steps to reproduce?

Syntax to Reproduce the issue

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

We are trying to fix accessibility issues in our project and we are relying on Material Designs.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular - 5.2.0 , Material - 5.2.3 , OS- Windows , TypeScript - 2.5.3 , Browser - Google Chrom

Is there anything else we should know?

Tried Adding id in mat-select /adding for in mat-label

[crisbeto]

Closing since that warning doesn't get in the way of screen readers picking up and reading out the label.

[schejarla]

Hope, we don't see the issue, if we replace the label with span element.

Wave tools shows alert count as 1,

Alert position at element level,

HTML markup before replacing label with span,

Changing label element to span element.

Wave tool alerts get zero, after adding span element.

[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.}