label-has-for fails for bound id/label

[sem4phor]

When using a dynamic for / id attribute on label / input elements the rule label-has-for fails.

error: Form label must have associated control (vue-a11y/label-has-for)

<template>
  <label :for="_uid">
    <input :id="_uid">
  </label>
</template>

Expected behaviour: The rule passes.

[sem4phor]

same for vue-a11y/alt-text rule

[maranran]

lastest version ? I fail to reappear this bug @sem4phor

[sem4phor]

yes on the latest version. Did you test it with input nested in label and a bound for?

[venikman]

I got it work. The problem that looks like that rule was taken from react rules. You can see it in documentation for rule. Name of rule for react. jsx-a11y/label-has-for". So what I had to do it to add options for it.

"vue-a11y/label-has-for": [ 2, {
            "components": [ "label" ],
            "required": {
                "every": [ "nesting", "id" ]
            },
            "allowChildren": false
        }]

I changed jsx to vue and Label to label I will probably can open a PR to fix it.

[andresdameson]

I changed the rule made by venikman to support nesting OR id:

  "vue-a11y/label-has-for": [ 2, {
        "components": [ "label" ],
        "required": {
            "some": [ "nesting", "id" ]
        },
        "allowChildren": false
 }]

[ZebulanStanphill]

It's worth noting that eslint-plugin-jsx-a11y's label-has-for has recently been deprecated and replaced by label-has-associated-control. This plugin should probably follow suit.