jsx-eslint
label-has-associated-control and label-has-for complaining in my .ts files
I have .ts services/data store files in my React projects where I'm receiving complaints about the above linting errors. I literally cannot fix those issues to the satisfaction of ESLint, as I haven't written any JSX in those files, only JS/TS.
I am having this problem as well. I am receiving the following linting errors:
Line 46:9: A form label must be associated with a control jsx-a11y/label-has-associated-control
Line 51:9: A form label must be associated with a control jsx-a11y/label-has-associated-control
which correspond to the following lines in my "offending" tsx file:
<label htmlFor="input1">
Input 1
<input id="input1" />
</label>
<label htmlFor="input2">
Input 2
<input id="input2" />
</label>
My dependency version is
"eslint-plugin-jsx-a11y": "6.4.1",
@clarknc i agree, that should be valid. You should be using ^, so that you get the latest in-range - can you try updating to ^6.6.0 and see if the problem is fixed?
I've made the suggested version change to my packjage.json and removed/reinstalled the dependency, but the problem seems to still be occurring.
Same here with [email protected] in a tsx file. Here are the two code snippets that trigger false positives:
// real app code
<label style={{ marginLeft: 20 }}>
<input
type="checkbox"
onChange={(evt) => setReadonly(evt.target.checked)}
/>
Read only mode
</label>
// from docs
<label>
Surname
<input type="text" />
</label>
@kachkaev those both also need an ID and a "for" to link the label and input.