Eslint-plugin-jsx-a11y: Checkbox false negative with control-has-associated-label

[theAdhocracy]

Based on the docs I think my code should pass the control-has-associated-label checks but I'm currently getting the following warning:

warning  A control must be associated with a text label  jsx-a11y/control-has-associated-label

Here's my code:

<label htmlFor={`check_${item.label.toLowerCase()}`}>
      <input type="checkbox" onClick={(event) => userFilter(item.value, refine)} id={`check_${item.label.toLowerCase()}`} />
      {item.label}
</label>

I've just started getting this warning having upgraded to v6.2.3.

[ljharb]

That is indeed correct; i suspect the dynamic ID in a template literal is being overlooked by the rule.

[theAdhocracy]

Out of interest I tried changing both values for htmlFor and id to simply foo but the warning persisted. Obviously that wouldn't be a useable fix anyway, but could that suggest the dynamic ID isn't the issue?

[ljharb]

Yes, that would suggest that.

Can you provide the full component, and the full error message?

[theAdhocracy]

Sure. I've removed everything unnecessary from the component and still getting the error message here:

import React from "react"
import { connectRefinementList } from "react-instantsearch-dom"

import styles from "./search.module.css"

const CategoryFilter = ({ items }) => {
   return (
      <ul className={styles.category_list}>
         {items.map((item) => (
            <li key={item.label}>
               <label htmlFor={`check_${item.label.toLowerCase()}`}>
                  <input type="checkbox" id={`check_${item.label.toLowerCase()}`} />
                  {item.label}
               </label>
            </li>
         ))}
      </ul>
   )
}

export const CustomCategoryFilter = connectRefinementList(CategoryFilter)

Error message:
12:7 warning A control must be associated with a text label jsx-a11y/control-has-associated-label

[jessebeach]

@theAdhocracy, try the latest release. I tried your case as a passing case for control-has-associated-label and it's passing.