Eslint-plugin-jsx-a11y: Incorrect report of jsx-a11y/label-has-associated-control and jsx-a11y/label-has-for

[virtualstyle]

Getting

  26:21  error  A form label must be associated with a control                                      jsx-a11y/label-has-associated-control
  26:21  error  Form label must have ALL of the following types of associated control: nesting, id  jsx-a11y/label-has-for

Even though the element is nested inside the label and the htmlfor and id are set.

                    <label htmlFor="filters">
                      Filter by
                      <select id="filters" className="form-control">
                        <option value="0" selected>
                          All Snippets
                        </option>
                        <option value="1">Featured</option>
                        <option value="2">Most popular</option>
                        <option value="3">Top rated</option>
                        <option value="4">Most commented</option>
                      </select>
                    </label>

[rpellerin]

Experiencing this as well for a nested <input>

[codebycliff]

I think I am getting false positives for this rule as well. We are using htmlFor to reference ids. If I wrap the input with a label, the lint error goes away. My ids match, so I'm not sure what's going on here. Here are a couple (of many) examples:

<label htmlFor="comment_text" className="col-sm-2 control-label text-left sr-only">Comment</label>
<textarea id="comment_text" name="comment[text]" className="form-control" required onChange={this.handleChange} autoFocus />

and

<label htmlFor="subject">Subject</label>
<input type="text" id="subject" name="subject" maxLength="141" className="form-control" required onChange={this.handleChange} value={this.state.subject} />

Am I missing something here?

[cwiemeyer]

+1

Also ran in this issue, though newest version of the plugin 6.1.1 is installed!

Occurs in combination with React 16.4.2 and eslint 5.4.0 / eslint-plugin-react 7.11.0

[ljharb]

@rpellerin @codebycliff how is your rule configured? For example, the airbnb config requires both nesting and id-linking.

[cwiemeyer]

@ljharb Thanks, that seems to be the reason in my case as I am using the airbnb config!

[codebycliff]

@ljharb That was the cause of the issue. I had the following configuration for label-has-for:

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

But no custom configuration for label-has-associated-control. I couldn't find documentation on changing the configuration for this particular rule, but copying the label-has-for configuration and changing the rule name caused my linting issues to go away. Is the custom configuration for label-has-associated-control documented anywhere? The documentation for the rule doesn't have configuration examples. Is it just assumed or common knowledge that this rule has the same configuration options as label-has-for? Thanks for your time!

[ljharb]

The docs are not yet updated for label-has-associated-control; see #457.

[codebycliff]

Sounds good. Consider my portion of this issued resolved.

[greypants]

Same issue here with label-has-forOur rules are just using plugin:jsx-a11y/recommended.

Docs say jsx-a11y/label-has-for is deprecated. If it's deprecated, should it be removed from plugin:jsx-a11y/recommended then?

[ljharb]

@greypants it will be, but doing so is a breaking change - a soft deprecation is not.

[rpellerin]

Tweaking the airbnb config did the trick, thank you guys!

[Stopa]

I'm still having problems with this. Using airbnb eslint preset, so the rule is set to "both". Minimal code to reproduce:

<label htmlFor="selectInput">
  <select id="selectInput" />
</label>

Note: only having these issues with select inputs.

[ljharb]

Are you using the latest version of the a11y plugin? If so, we might need another release, or we might still have a bug.

[jessebeach]

@Stopa thank you for the report. There are two things happening here.

One, there is indeed a bug. The rule doesn't include the <select> element as one of the default control elements. You can configure the rule to include select as a controlElement for now until a future release with a fix. Here's the fix: #503

Two, you're example code doesn't include a text for a label. You can use text content, or aria-label or aria-labelledby or define a prop that contains the label text and configure the rule to recognize that prop. But text you must have.

<label htmlFor="selectInput">
  Favorite ice creams
  <select id="selectInput" />
</label>

[teddywsi]

I stumbled on this issue today. I'm curious if it was fully resolved?
Below are some examples of code where this error is popping up for me when I don't think it should be.
I am using the latest airbnb eslint config which uses version 6.2.1 of jsx-a11y.

Select:

  <form>
    <label htmlFor="dinosaur">
      Choose a dinosaur:{' '}
      <select id="dinosaur">
        <optgroup label="Theropods">
          <option>Tyrannosaurus</option>
          <option>Velociraptor</option>
          <option>Deinonychus</option>
        </optgroup>
        <optgroup label="Sauropods">
          <option>Diplodocus</option>
          <option>Saltasaurus</option>
          <option>Apatosaurus</option>
        </optgroup>
      </select>
    </label>
  </form>

Meter:

  <form>
    <label htmlFor="fuel">
      Fuel level:{' '}
      <meter
        id="fuel"
        min={0}
        max={100}
        low={33}
        high={66}
        optimum={80}
        value={60}
      >
        at 60/100
      </meter>
    </label>
  </form>

Progress:

  <form>
    <label htmlFor="progress">
      File progress:{' '}
      <progress id="progress" max="100" value="70">
        70%
      </progress>
    </label>
  </form>