Form label must have associated control on compliant markup

[sppatel]

This example markup is compliant.

<label htmlFor="firstName">First Name</label>
<input id="firstName" type="text" />

Why is linting failing with..

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

[sppatel]

Nevermind I needed to change the config from every to some

"required": {
                "some": [ "nesting", "id" ]
            }

[captDaylight]

Could you elaborate on why it needs to be some?

[ljharb]

@captDaylight the default is "every" - you should both for-id-link and label-wrap your inputs. "some" means it will pass if you do either one of those.

[captDaylight]

@ljharb hey thanks for the quick response, though I don't follow. I have a label and and input as at the top of the issue, htmlFor in label and id in input and it's throwing this error. What do you mean by for-id-link and label-wrap?

[ljharb]

@captDaylight i mean that a) the label's "for" matches the input's "id", and also b) the input must be inside the label.

[captDaylight]

GOTCHA, ok, that makes sense. Thanks for the time!

[mdrideout]

Just to help others that may find there way here, I simply did not realize that for my babel and jsx-a11y to work correctly together, I needed to use <label htmlFor... rather than just <label for...

The following format passed all the linter rules. This did not require me to make the adjustment to my config / eslintrc rules.
<label htmlFor="email">Email<input id="email" name="email" type="email" placeholder="Email Address" /></label>

[skirankumar7]

Nevermind I needed to change the config from every to some

"required": {
                "some": [ "nesting", "id" ]
            }

Could you please tell me what is config, where it is to change every to some?

[Christopotamus]

@skirankumar7
I ran into this issue as well, here's what my eslintrc.json looks like after I got it working:

{
    "extends": "airbnb",
    "env": {
      "browser": true,
      "jest": true
    },
    "rules": {
      "jsx-a11y/label-has-associated-control": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }],
      "jsx-a11y/label-has-for": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }]
    }
}

As you can see, I had to add the new stuff under "Rules" for the two rules that I was getting errors from.

[NishargShah]

@skirankumar7
I ran into this issue as well, here's what my eslintrc.json looks like after I got it working:

{
    "extends": "airbnb",
    "env": {
      "browser": true,
      "jest": true
    },
    "rules": {
      "jsx-a11y/label-has-associated-control": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }],
      "jsx-a11y/label-has-for": [ "error", {
        "required": {
          "some": [ "nesting", "id"  ]
        }
      }]
    }
}

As you can see, I had to add the new stuff under "Rules" for the two rules that I was getting errors from.

Restart your local server and its works fine

[jeojoe]

label-has-for was deprecated in eslint-plugin-jsx-a11y v6.1.0 in favor of label-has-associated-control rule and required.some rule config has changed to assert.

Available values for assert config are 'htmlFor', 'nesting', 'both', 'either'

{
  // ...
  rules: {
    'jsx-a11y/label-has-associated-control': [
      2,
      {
        assert: 'either', // either check for `htmlFor` or `nesting`
      },
    ],
  }
}