Lint error on valid way for associating a `label` to an `input` control

[edmaala]

I encountered the error A form label must be associated with a control.eslint(jsx-a11y/label-has-associated-control) for the following code, even though these are supposed to be valid ways for associating a label with an input control.

<label>
  <span>Email</span>
  <input type="email" id="email" />
</label>

<label htmlFor="email">Email</label>
<input type="email" id="email" />

It only accepts the following as valid

<label htmlFor="email">
  <span>Email</span>
  <input type="email" id="email" />
</label>

[ljharb]

Yes, that’s the default and the most accessible. You can configure it to only require one of those mechanisms, but I’d encourage you not to.