Incorrect error for vuejs-accessibility/label-has-for?

[AustinGil]

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?

[vhoyer]

#119

check this solution, report back if you are still having trouble

[AustinGil]

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?

[vhoyer]

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 a for attribute."

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.

[AustinGil]

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.

[aitelia]

This is still not working in "eslint-plugin-vuejs-accessibility": "1.1.1". Any updates on the solution to fix this false positive issue?

[vhoyer]

This is still not working in "eslint-plugin-vuejs-accessibility": "1.1.1". Any updates on the solution to fix this false positive issue?

Have you checked the #119 yet, @aitelia?

[aitelia]

@vhoyer yes, I have found that workaround eventually.