Eslint-plugin-jsx-a11y: No associated control detected even with `htmlFor`

[astorije]

Hi there,

I'm 99% sure this is a PEBKAC and not a bug with this plugin, but opening here just in case.

I am using the eslint-config-airbnb config, which enables jsx-a11y/label-has-for (using eslint-plugin-jsx-a11y v6.0.3).

Given my JSX code:

<div className="form-group col-md-2">
  <label htmlFor="type-select">Type</label>
  <select id="type-select" className="form-control">
    <option>Foo</option>
    <option>Bar</option>
  </select>
</div>

I am still getting the following error:

error    Form label must have associated control    jsx-a11y/label-has-for

I am confused because if I read the doc for label-has-for correctly, and specifically the first 2 code blocks on that page, this should pass... no?

Thanks!

[ljharb]

Labels must wrap inputs also.

[astorije]

Oh, that's unfortunate (in my situation) as doing so breaks Bootstrap styling. Thanks for the precision, @ljharb!

As far as I know, best practices suggest to always set the for attribute, even in nested situations, but do not recommend to always nest. So either nest+for, or simply for, but not necessarily always both.
I am not aware of the background history of this rule, so forgive me if this is a stupid question, but is there any chance the default behavior could be changed towards this direction?

Thanks!

[ljharb]

The best practice is in fact to both nest and for-ID link, which is why that's the default for the rule.

You can configure it from "every" to "some" semantics; see the docs.