label-has-associated-control and label-has-for complaining in my .ts files

[MendelBak]

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.

[ljharb]

Can you share the code that’s being warned?

[clarknc]

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",

[ljharb]

@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?

[clarknc]

I've made the suggested version change to my packjage.json and removed/reinstalled the dependency, but the problem seems to still be occurring.

[kachkaev]

Same here with eslint-plugin-jsx-a11y@6.6.1 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>

[ljharb]

@kachkaev those both also need an ID and a "for" to link the label and input.

[kachkaev]

Hmm why should the last example fail? I copied it from rule docs.

[ljharb]

It depends on what the assert config is set to. "Both" requires both.