eslint-plugin-vuejs-accessibility icon indicating copy to clipboard operation
eslint-plugin-vuejs-accessibility copied to clipboard

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

Open jkomusin-vetro opened this issue 2 years ago • 2 comments

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.

jkomusin-vetro avatar Dec 29 '21 21:12 jkomusin-vetro

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?

vhoyer avatar Jan 12 '22 16:01 vhoyer

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.

jkomusin-vetro avatar Jan 13 '22 16:01 jkomusin-vetro