Comments (11)
The code will only produce invalid HTML if you assume CustomText
renders an input
element. In all other cases it's technically valid.
EG the rendered HTML that browser sees could easily be something like <label htmlFor="1"><span>text</span></label><input id="1" />
- which is valid.
The rule also works fine if the CustomText
element accepts a string child, eg this code does not error.
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 depth
layers deep you must have either:
- a
JSXExpressionContainer
as a child, JSXText
as a child, or- a configured labelling prop on a child.
To summarise the problem:
- as of 6.8.0 the rule has started enforcing that the above constraint strictly where it didn't before
- the error message when this constraint is violated reads as
A form label must be associated with a control.
- which is very misleading. - there is no way to opt-out of this new behaviour at all to configure an allowlist of "components that render valid label children" or similar.
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.
from eslint-plugin-jsx-a11y.
what’s your eslint config?
from eslint-plugin-jsx-a11y.
Sorry forgot to mention - using the default config for the rule with no settings.
from eslint-plugin-jsx-a11y.
then in that case, I'd assume CustomInput
isn't recognized as an input, which means the label does not have an associated control, and the new error is a bug fix.
If you change your settings so that CustomInput is treated as an input, I'd expect the rule to no longer warn.
from eslint-plugin-jsx-a11y.
Sorry, I just revisited to do an isolated repro outside our repo and have updated the example in the OP to match the correct repro case.
The change in behaviour occurs when you specifically have a custom component as the child for the label. In that case the rule (as of 6.8.0) ignores the htmlFor
.
from eslint-plugin-jsx-a11y.
In that case, you have two conflicting mechanisms - nesting and for/ID. What do browsers do in that case?
from eslint-plugin-jsx-a11y.
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.
from eslint-plugin-jsx-a11y.
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
from eslint-plugin-jsx-a11y.
Related Issues (20)
- jsx-a11y/label-has-associated-control gives error when for is put HOT 3
- label-has-associated-control regression
- How to configure `eslint-plugin-jsx-a11y` in `eslint.config.js` HOT 5
- jsx-a11y/control-has-associated-label triggers on TD element HOT 1
- Coordinate NodeJS version support with axe-core HOT 9
- [img-redundant-alt] `words` option does not work with double-byte character words.
- `alt-text`: missing warning for empty `alt` for `<input type="image" alt="" />`
- [label-has-associated-control] Glob format not supporting labelComponents HOT 1
- Snyk: MPL 2.0 license vulnerability in axe-core HOT 2
- anchor-has-content and aria-labelledby
- Lint error on valid way for associating a `label` to an `input` control HOT 1
- `jsx-a11y/label-has-associated-control` behavior is apparently misdocumented HOT 10
- Add support for ESLint 9 HOT 3
- heading-has-content false positive for object spread HOT 1
- [control-has-associated-label]: Does not allow for custom components that would result in accessible labels HOT 1
- `jsx-a11y/media-has-caption` Eslint Warning for Missing Captions in Media Elements HOT 1
- bug: type declaration for eslint flat config HOT 3
- Rule Idea: Enforce boolean literals for "booleanish" HTML attributes such as aria-hidden HOT 4
- [feat] `control-has-associated-label` can't be configured to support parent elements with label props HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eslint-plugin-jsx-a11y.