label-has-associated-control false positive with empty label

[Eschon]

I ran into this problem today. I have the rule configured like this:

"jsx-a11y/label-has-associated-control": [ 2, {
  "assert": "either"
}],

And it shows the error for the following example:

import React from 'react';

export default function Test() {
  return (
    <div>
      <label htmlFor="test" />
      <input type="checkbox" id="test" defaultChecked />
    </div>
  );
}

If I change it like this it works:

import React from 'react';

export default function Test() {
  return (
    <div>
      <label htmlFor="test">
		test
	  </label>
      <input type="checkbox" id="test" defaultChecked />
    </div>
  );
}

In my case I want no text inside my label because I set it through css with the ::before pseudo element

[ljharb]

Duplicate of #566.

[Eschon]

@ljharb I'm not sure how this is a duplicate. #566 is about the control-has-associated-label while my issue is with the label-has-associated-control. Also for me the problem specifically happens with empty labels which isn't mentioned at all in #566

[ljharb]

ah, gotcha, you’re right that it’s not a duplicate.

However, there’s no way for us to statically determine that you’ve set that css, and I’m not actually sure of the a11y impact there - I’ll reopen, but i very strongly suspect that literal text is better, and that you may want an override comment otherwise.