bug(MAT-SELECT): Incorrect use of <label for=FORM_ELEMENT> Angular Material

[Dilhando]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When I'm using a <mat-select> associated with a <mat-label> inside a <mat-form-field>, my Chrome browser's console outputs a Incorrect use of <label for=FORM_ELEMENT> Angular Material error (click this to open the related StackOverflow question).

Reproduction

Steps to reproduce:

1. Navigate to 'https://material.angular.io/components/select/overview' using Google Chrome
2. Open Chrome's console and click on '12 issues', you should see the error in your console (cf. Screenshot).

Expected Behavior

I expect <mat-select> and <mat-label> standard use case to be error-less in Chrome.

Actual Behavior

My console outputs an error.

Environment

• Angular: 16.0.4
• CDK/Material: 16.0.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS Ventura 13.6

[zarend]

Hello folks,

Thank you for reporting this. I was wondering if we could get more information from you so I can know if action is needed to be taken.

We prioritize accessibility issues that are a problem for users. If you have an explaination why this does not meet an a11y criteria (such as WCAG), we can consider that.

Angular components doesn't have a hard requirement to cleanly pass automated accessibility checks.

Which select example is having issues? Are you having accessibility or autocomplete issues in your application?

Best Regards,

Zach

[Dilhando]

Hello zarend,

Thank you for your support. The official Angular Material <mat-select> documentation page actually has 12 of these errors (https://material.angular.io/components/select/overview). As far as I know, these errors does not harm the application I built. I'm using multiple <mat-select> in a commercial application and whenever I want to assign a <mat-label> I have this error popping in the console. I have been trying to resolve the problem but none of the solutions I found worked as good as letting the error message in the console.

If you have time, you can give a look at the StackOverflow question I opened on this: https://stackoverflow.com/questions/77316536/incorrect-use-of-label-for-form-element-angular-material/

This is still an issue for me as I find this console error highly irrelevant and annoying for my users.

[zarend]

Hello,

thank you for sharing the SO link. Looking in the dev tools, I can see that the label with for attribute correctly points to the mat-select. What is maybe happening is that the for or id attribute is blank for a frame or two on initial render. I believe this is a false positive with the checker and it's safe to ignore this.

Closing send components doesn't have a hard requirement to cleanly pass automated a11y checks. Please let us know if you are having an a11y issue in your application.

Best Regards,

Zach

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