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

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>

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 12
Comments: 15 (5 by maintainers)

Most upvoted comments

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>

+10

teddywsi on May 17, 2019

@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>

jessebeach on Nov 18, 2018

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

rpellerin on Aug 23, 2018

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

ljharb on Aug 23, 2018

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

ljharb on Aug 23, 2018

Sounds good. Consider my portion of this issued resolved.

codebycliff on Aug 23, 2018

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

cwiemeyer on Aug 23, 2018

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

cwiemeyer on Aug 23, 2018