Javascript: label-has-associated-control failing for correct structure

[bteng22]

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!

[ljharb]

@bteng22 the rule certainly supports that as an option, but airbnb does not configure it that way. The docs there do need updating, see https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/457, and the allowed values for the "assert" option here, configured in our config here.

[bteng22]

@ljharb awesome! Thanks for all the clarification. Twas super helpful

[josephgrossberg]

Yes: thanks for the fast, clear response @ljharb 👍

[elliotleelewis]

@ljharb What would you suggest the best practice is for "screenreader-only" labels with these rules then?

For example, in Bootstrap, its common practice to create the following for an input:

<label class="sr-only" for="demo-input">Input Label</label>
<input class="form-control" id="demo-input" type="text" placeholder="Input Label">

If you were to nest the input element inside the label, then the input would also only be viewable when on a screenreader?

[ljharb]

Non-screenreader users need labels too.

[matheusalxds]

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!

Works for me!! :D

[guoyunhe]

Maybe you want to check this, too https://github.com/airbnb/javascript/pull/2136