eslint-plugin-vuejs-accessibility
eslint-plugin-vuejs-accessibility copied to clipboard
Allow custom form controls in form-control-has-label
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.
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?
so like, just to confirm, you are saying that we should add like a
controlComponents
option toform-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.