vue-a11y/eslint-plugin-vuejs-accessibility

Allow bind syntax for "label-has-for"

aKzenT opened this issue · 8 comments

aKzenT commented

We sometimes have components that combine form elements and labels:

       <label :for="id" ...>
       <input :id="id" ...>

id in this case is a property set on the custom component.

Unfortunately the plugin ignores :for completely and complains about missing for attribute.

vhoyer commented

can you provide a short reproduction of this behavior so we can try fixing it properly?

RieMars commented

This is yet another barrier to Vue3 adoption. If Vue allows binding with :for then this should be part of the linting rules.

vhoyer commented

As far as I could tell, it is a problem both in vue@2 and vue@3, but anyway, could you, then, provide a reproduction link?

RieMars commented

There's an example - Vue SFC Link

And regarding the Vue3 comment, I just started encountering this issue as I was forced to upgrade to Vue3 and used the ESLint AirBnB preset. That preset required me to get familiar with disabling a lot of rules that just didn't work with legit code like this one.

cniklas commented

Any updates on this topic?

kddnewton commented

A PR would be merged if someone wants to put one together.

vhoyer commented

So, I just gave this a look, and I'm pretty sure that this is an issue with your configuration, also it should be related to this other issue: #54 (in this other issue there are some recommendations of workarounds, but PRs are still welcomed to fix that issue).

and as far as I can tell, it does not have anything to do with Vue@3.

The reproduction I made is here: https://github.com/vhoyer-bug-reproductions/eslint-plugin-vuejs-accessibility

if you think there was a mistake in my judgement feel free to re-open this issue

EDIT: as the reproduction link provided didn't have any information about the configuration used, I assumed the recommended

  • 👍1
cniklas commented

So, I just gave this a look, and I'm pretty sure that this is an issue with your configuration, also it should be related to this other issue: #54 (in this other issue there are some recommendations of workarounds, but PRs are still welcomed to fix that issue).

and as far as I can tell, it does not have anything to do with Vue@3.

The reproduction I made is here: https://github.com/vhoyer-bug-reproductions/eslint-plugin-vuejs-accessibility

if you think there was a mistake in my judgement feel free to re-open this issue

EDIT: as the reproduction link provided didn't have any information about the configuration used, I assumed the recommended

Thanks for sharing the reproduction code example. Going along your configuration over there fixed the issue for me!

  • 👍1