label-has-for does not handle binding for attribute

[bertmckay79]

When using attribute binding to associate the for attribute the plugin does not detect rasies the label-has-for error

This use case is typical when creating enterprise component libraries.

Below is an example of a textbox where the id is being passed as a prop:

<template>
  <div
    class="form-group"
    :class="invalid ?'form-group-error' : ''"
  >
    <h3
      v-if="labeltext"
      class="label-wrapper"
    >
      <label
        :id="`lbl${uniqueid}`"
        class="input-label"
        :for="uniqueid"
      >
        {{ labeltext }}
      </label>
    </h3>
    <div
      v-if="helptext"
      :id="`${uniqueid}-hint`"
      class="govuk-hint"
    >
      {{ helptext }}
    </div>
    <span
      v-if="invalid"
      id="event-name-error"
      class="input-error-message"
    >
      <span class="sr-only">Error:</span> {{ validationtext }}
    </span>
    <input
      :id="uniqueid"
      :name="uniqueid"
      v-bind="$attrs"
     :type="text"
      :value="value"
      :aria-labelledby="`lbl${uniqueid}`"
      :aria-describedby="helptext ? `${uniqueid}-hint` : undefined"
      :autocomplete="autocomplete"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  name: 'Textbox',
  props: {
    uniqueid: {
      type: String,
      required: true
    }
....
}
</script>

Would it be possible to handle this?
Thanks
Bert

[vhoyer]

Sorry to point this out when it's not the point of the issue, but an h3 as label? wouldn't it be bad for the heading structure to force a h3 in a input controller? Well, anyway.

---

It seems there might be a problem around this lines.

Could you send a reproduction link? with the correct versions and stuff?

[vhoyer]

Actually, this might be a problem with your configuration of the rule, could you send here what the configuration it is that you are using?

[bertmckay79]

Actually, this might be a problem with your configuration of the rule, could you send here what the configuration it is that you are using?

This is all I'm doing, not adding any custom rules

  'extends': [
    'plugin:vue/recommended',
    'plugin:vuejs-accessibility/recommended'
  ]

[vhoyer]

Yeah, after my first comment I remembered that the default config for label-has-for requires, both, nesting of the input element, and id/for for it to pass. Maybe this could be explained better, but for now, try changing your configuration to add this custom rule:

{
  "rules": {
    "vuejs-accessibility/label-has-for": ["error", {
      "required": {
        "some": ["nesting", "id"]
      }
    }]
  }
}

https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/master/docs/label-has-for.md

The some keyword there, tells the rule to only check one of the conditions, or it has nesting, or it has id/for.

[vhoyer]

thinking about it, the name label-has-for is a terrible name for including the nesting check as well... probably a better name would be label-has-control or something, but that would be a breaking change, so not that easy to do.

[bertmckay79]

Yeah, after my first comment I remembered that the default config for label-has-for requires, both, nesting of the input element, and id/for for it to pass. Maybe this could be explained better, but for now, try changing your configuration to add this custom rule:

{
  "rules": {
    "vuejs-accessibility/label-has-for": ["error", {
      "required": {
        "some": ["nesting", "id"]
      }
    }]
  }
}

https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/master/docs/label-has-for.md

The some keyword there, tells the rule to only check one of the conditions, or it has nesting, or it has id/for.

This worked for me, thanks for your help.

[kddnewton]

Thanks @vhoyer!

[vhoyer]

no problems :D

---

But just to keep track of the problem, this can be considered related to #54

[smndhm]

Had the same "issue" today.
But from what I understand, if I'm using this rule I won't be able to use the "extends": ["plugin:vuejs-accessibility/recommended"]
Just wanted to know if there is a way to enable all recommended rules and customizing some of the rules ? (like this one)

[vhoyer]

Just simply by extending, and then reconfiguring the rule under the "rules" property of the configuration you are already using all of the recommended and customizing only what you want

[smndhm]

This is what I did, did not update my message. Thanks.

[glass-ships]

I realize this is a couple years old at this point, but is there another known solution or workaround?

<input id="log_y" v-model="log_y" type="checkbox" class="form-check-input" @change="draw_plot" />
<label for="log_y" class="form-check-label">Log y</label>

eslint is still throwing error Form label must have an associated control vuejs-accessibility/label-has-for but I have included the override rule mentioned in vhoyer's comment.

Relevant package versions:

    "eslint": "^9.14.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-vue": "^9.31.0",
    "eslint-plugin-vuejs-accessibility": "^2.4.1",
    "prettier": "^3.3.3",
    "prettier-plugin-css-order": "^2.1.2",
    "prettier-plugin-jsdoc": "^1.3.0",
    "@ianvs/prettier-plugin-sort-imports": "^4.4.0"