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.
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
[label-has-associated-control] regression - rule errors when a label does not directly have text, even if it has htmlFor #966
Comments
what’s your eslint config? |
Sorry forgot to mention - using the default config for the rule with no settings. |
then in that case, I'd assume If you change your settings so that CustomInput is treated as an input, I'd expect the rule to no longer warn. |
htmlFor
In that case, you have two conflicting mechanisms - nesting and for/ID. What do browsers do in that case? |
The code will only produce invalid HTML if you assume The rule also works fine if the function Foo() {
return (
<>
<label className={styles.linkLabel} htmlFor="1">
<CustomText>Text</CustomText>
</label>
<input id="1" />
</>
);
} So the rule does make some assumptions (i.e. there's no requirement that a component renders children). From what i can tell - there's also no way around this error either. There's no config option to tell the rule "hey this component renders text it's okay" - the only way to satisfy the rule is to satisfy this utility function's checks - i.e. nested no more than
To summarise the problem:
I would propose that the whole "has accessible label" check be moved to its own rule entirely - it seems very weird that a rule entitled "label has associated control" also enforces that the label has valid text too. |
Hmm, interesting problem. I agree that since a custom component may not render its children, that a custom element with a text child can't be statically assumed to render text - that's a bug in that utility, and it should be changed to not have that false assumption. I also agree that "label has associated control" should only be concerned with a label and a control, not whether either of those things is accessible. I'd appreciate PRs for either or both of those issues. |
Sorry for pinging this issue! We're just encountering issues with our CI/CD, and I wanted to link a similar issue for documentation. Still ruling out whether the issue is on our end |
Version 6.8.0 has false positives jsx-eslint/eslint-plugin-jsx-a11y#966 A form label must be associated w ith a control jsx-a11y/label-has-associated-cont rol
In 6.7.1 this code was fine and did not error.
In 6.8.0 this code results in an error.
The text was updated successfully, but these errors were encountered: