Incorrect error for vuejs-accessibility/label-has-for?
AustinGil opened this issue · 7 comments
Getting a weird issue with form labels. ESLint is complaining:
Form label must have an associated control.eslint(vuejs-accessibility/label-has-for)
But the code is correct:
<label for="email">Email:</label>
<input id="email" name="email" type="email" required />
Am I missing something?
Thanks @vhoyer. Your comments in that thread helped me set it up correctly.
I also just saw the docs where it says "To fully cover 100% of assistive devices, you're encouraged to validate for both nesting and id."
I know sometimes nesting alone doesn't work, but I've never heard of ID not being enough. Can you share any more information around when using an ID alone fails or why?
I personally can't share any use case where I've encountered such a problem. This other issue should provide some interesting information if you are interested :D #54
The author there mentions:
"There seems to be no accessibility advantage to using
<label>as a wrapper if you've already given it aforattribute."
That said, I don't know any of this advantage neither did the author mentioned them... so... bummer, maybe you could provide more information to that discussion, or even just agree that we should change the default 🤷 (as it causes a lot of issues to appear here)
EDIT: added a blockquote because I think they were made for this kind of occasions haha.
Yeah, I just posted my comments over there. I did quite a bit of research on the subject and did not come up with anything that suggested you need both to be fully accessible. I could be wrong, but my stance is that ID is required, but not wrapping label.
This is still not working in "eslint-plugin-vuejs-accessibility": "1.1.1". Any updates on the solution to fix this false positive issue?
