Allow bind syntax for "label-has-for"

[aKzenT]

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]

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

[RieMars]

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

[vhoyer]

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]

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]

Any updates on this topic?

[kddnewton]

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

[vhoyer]

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: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/issues/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

[cniklas]

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!