label-has-associated-control failing for correct structure

Looks like updating to 17.1.0 enables label-has-associated-control but it seems to be failing for a correct label/input. To my understanding, the correct structure could either be a nested input within a label OR use the htmlFor prop with a valid DOM ID.

In this case, we’re using htmlFor:

const Foo () => {
  return (
        <label htmlFor="filterAll">
          ...
        </label>
        <input id="filterAll" />
  )
}

and the linter is giving us the following error

error A form label must be associated with a control jsx-a11y/label-has-associated-control

[ljharb]

No, our config requires both - not either.

To cover 100% of browsers and assistive devices, the input must BOTH be nested inside the label and also be for/ID-linked to it.

[bteng22]

Ahh I see thanks for the clarification @ljharb — does this warrant a change in the documentation here? https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md where it sounds as though either method is supported. Maybe my understanding of how these two packages relate is skewed.

Or is there an option similar to the deprecated jsx-a11y/label-has-for where either rule is accepted? i.e.

"jsx-a11y/label-has-for": [ 2, {
  "required": {
      "some": [ "nesting", "id" ]
  }
}]

Doesn’t seem to look like it based on the docs referenced above.

Thanks again in advance!