Chrome complaining about "illegal use of labels"

[matrium0]

Description

When using <mat-form-field> with <mat-select> and <mat-label> Chrome prints out the following warning:
Incorrect use of <label for=FORM_ELEMENT>

I assume this is a new check Chrome added in a recent versions to it's dev tools. Though I guess Angular Material should probably comply to those, if at all possible.

Reproduction

This can be easily reproduced, even on the Angular Material Page, e.g. on https://material.angular.io/components/form-field/overview (though it appears on any page that uses <mat-select> and <mat-label> within <mat-form-field>

Expected Behavior

No error should be displayed

Actual Behavior

Incorrect use of <label for=FORM_ELEMENT> is printed for each mat-label within a mat-form-field

Environment

• Angular: 17.0.1
• CDK/Material: 17.0.1
• Browser(s): Chrome 117
• Operating System: Windows

[crisbeto]

It looks like it's complaining because the for attribute is pointing to <mat-select> which isn't a native input.

[matrium0]

@crisbeto You are right, I didn't not realize that it's only related to mat-select and not input (which makes sense). I updated the ticket to better reflect this.