vue-a11y / eslint-plugin-vuejs-accessibility

An eslint plugin for checking Vue.js files for accessibility
https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/
MIT License
253 stars 27 forks source link

Allow custom form controls in form-control-has-label #373

Open jkomusin-vetro opened 2 years ago

jkomusin-vetro commented 2 years ago

The form-control-has-label rule currently looks for input and textinput elements, however custom input components (in our use case, bootstrap-vue's b-form-input component) don't seem to be checked for labels.

Is it reasonable to add a check for an implicit wrapping or explicit id-linked label for custom components? Configurable similar to how label-has-for can be configured to look for custom label components. I don't think deeper inspection (like this plugin does on input to determine eligibility depending on the type of input) is required for custom input types.

vhoyer commented 2 years ago

so like, just to confirm, you are saying that we should add like a controlComponents option to form-control-has-label so that the giving configuration and file results in an error?

{
  "form-control-has-label": ["error", {
    "controlComponents": ["b-form-input"]
  }]
}
<template>
  <div>
    <b-form-input /> <!-- error here because it has not a label linked to it? -->
  </div>
</template>

right? or did I miss something?

jkomusin-vetro commented 2 years ago

so like, just to confirm, you are saying that we should add like a controlComponents option to form-control-has-label so that the giving configuration and file results in an error?

right? or did I miss something?

Yes totally correct, your example is what I was hoping to be able to do.