eslint-plugin-jsx-a11y: control-has-associated-label error with label/input?

We are getting linting errors with this rule for simple JSX such as:

<label htmlFor="foo">Foo</label>
<input id="foo" type="text" />

// or

<label>
  Foo
  <input type="text" />
</label>

Both result in Error: A control must be associated with a text label jsx-a11y/control-has-associated-label

Our rule is setup as:

'jsx-a11y/control-has-associated-label': 'error',

Do we need to pass the second argument object to the rule? or should this be supported out of the box?

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 13
Comments: 40 (19 by maintainers)

Most upvoted comments

This is the closest I got to what I wanted (either label nests form element or uses htmlFor):

      "rules": {
        // Disabled, we only require label to nest input OR use htmlFor
        // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/b800f40a2a69ad48015ae9226fbe879f946757ed/docs/rules/label-has-associated-control.md
        "jsx-a11y/label-has-associated-control": ["off", {
          "labelComponents": [],
          "labelAttributes": [],
          "controlComponents": [],
          "assert": "both",
          "depth": 25
        }],
        // Require that Labels nest their input or uses htmlFor
        // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
        "jsx-a11y/label-has-for": ["error", {
          "components": [],
          "required": {
            "some": ["nesting", "id"]
          },
          "allowChildren": false
        }]
      }

Unfortunately it doesn’t complain if you don’t use any Label at all for a form element… but it seems the be the same with the default eslint…

OZZlE on Oct 20, 2020

cc @jessebeach - this rule might need the same “assert” options as the inverse rule.

ljharb on Mar 18, 2019

This is what I had to add to get either htmlFor or nesting:

"rules": {
        "jsx-a11y/control-has-associated-label": ["off", {
          "labelComponents": [],
          "labelAttributes": [],
          "controlComponents": [],
          "assert": "both",
          "depth": 25
        }],
        "jsx-a11y/label-has-associated-control": ["error", {
          "components": [],
          "required": {
            "some": ["nesting", "id"]
          },
          "allowChildren": false
        }]
}

creativecomposer on Nov 25, 2020

Definitely will do. Let me try manually setting the depth first so I don’t create an issue that immediately closes X-D

EDIT: It appears the default depth I’m working with is 25. I’ll create a new issue.

    "jsx-a11y/label-has-associated-control": [
      "error",
      {
        "labelComponents": [],
        "labelAttributes": [],
        "controlComponents": [],
        "assert": "both",
        "depth": 25
      }
    ],

fritogotlayed on Aug 15, 2019

We are having this warning thrown up as well:

  [
    <label key="label" htmlFor="element_id">Label</label>,
    <DatePicker {...defaultProps} key="picker" id="element_id" name="element_name" />
  ]

==> 37:5 error A form label must be associated with a control jsx-a11y/label-has-associated-control

For now, we’re turning off the jsx-a11y/label-has-associated-control rule.

soundasleep on May 20, 2019

Whoops, i think i misunderstood from the start 😃 your code seems correct.

ljharb on Mar 18, 2019

Yes that’s for ‘label-has-associated-control’, not ‘control-has-associated-label’ which is what I’m talking about 🙂

On 15 Mar 2019, at 21:26, Jordan Harband notifications@github.com wrote:

See assert here:

Available options: ‘htmlFor’, ‘nesting’, ‘both’, ‘either’

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

leepowelldev on Mar 18, 2019