search

vue-a11y / eslint-plugin-vuejs-accessibility

An eslint plugin for checking Vue.js files for accessibility
https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/
MIT License
254 stars 27 forks source link

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

Open edfrias opened 1 year ago

edfrias commented 1 year ago

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.

vhoyer commented 1 year ago

might be related:

edfrias commented 1 year ago

Hey @vhoyer ! Thanks for the reply!

I've been reviewing all those issues and I don't feel any of those are related with what I'am describing, even though form-control-has-label might seems to be close.

The thing is, Oruga UI's o-switch component already creates a label whose have inside a proper labelled-by aria if you provide it as a prop. Which solves any accessibility issues as it creates a nesting label and then add a proper id to an element you provide through a slot.

By looking at the rules, form-control-has-label does not checks for any input type "checkbox" which is my specific case, but also neither rules, form-control-has-label nor label-has-for, are checking the resulting input having a correct id that should be matching the same string as the for value located in the label tag.

I don't know if I'm explaining myself right, but I'm going to try to create a PR in order to let you see which is the case.