eslint-plugin-vuejs-accessibility icon indicating copy to clipboard operation
eslint-plugin-vuejs-accessibility copied to clipboard

label-has-for is not checking if input has the correct id

Open edfrias opened this issue 1 year ago • 2 comments

Hi everyone,

First of all thanks for creating this tool, it really helps too much!

I recently came to an issue about how labels should control the addition of id/for to the combo of label-input.

So, right now the rule only checks if the input is nested inside a label, or if a label has a for attribute but not if the input component has indeed the correct id.

Here is how I define the configuration inside eslintrc:

Captura de pantalla 2023-04-24 a las 12 14 30

So you could have a properly created label without an id on the following input like so: Captura de pantalla 2023-04-24 a las 12 48 56

Also the rule complains if the id is set but not the for: Captura de pantalla 2023-04-24 a las 12 53 15

So my guest is that the validate function shouldn't only been looking for the for attribute on labels, but also should be looking for the same string inside the for into the input's id that is nested or following the label node.

I'm based on how W3C tells us how to define properly our form components.

edfrias avatar Apr 24 '23 11:04 edfrias