Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
jkomusin-vetro opened this issue Dec 29, 2021 · 2 comments
Open

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

jkomusin-vetro opened this issue Dec 29, 2021 · 2 comments
Labels
good first issue Good for newcomers

Comments

@jkomusin-vetro
Copy link

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
Copy link
Collaborator

vhoyer commented Jan 12, 2022

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
Copy link
Author

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.

vhoyer added a commit to vhoyer/eslint-plugin-vuejs-accessibility that referenced this issue Jan 25, 2022
@vhoyer
✨ Allow custom form controls in form-control-has-label
9155f65 
Closes vue-a11y#373
vhoyer added a commit to vhoyer/eslint-plugin-vuejs-accessibility that referenced this issue Jan 25, 2022
@vhoyer
✨ Allow custom form controls in form-control-has-label
c82af1e 
Closes vue-a11y#373
@vhoyer vhoyer mentioned this issue Jan 25, 2022
Closed
vhoyer added a commit to vhoyer/eslint-plugin-vuejs-accessibility that referenced this issue Jan 25, 2022
@vhoyer
✨ Allow custom form controls in form-control-has-label
7c2ac4b 
Closes vue-a11y#373
@vhoyer vhoyer added the good first issue Good for newcomers label Oct 4, 2022
@vhoyer vhoyer mentioned this issue Apr 24, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

✨ Allow custom form controls in form-control-has-label vhoyer/eslint-plugin-vuejs-accessibility
2 participants
@vhoyer @jkomusin-vetro