label-has-associated-control doesn't work with global functions (like a translation function)

[wuz]

Hey there!

In our codebase we have a global translation function that is shared around components. When using label-has-associated-control the linter doesn't seem to be able to determine what that function returns and assumes that it could be an input. Is there a way to add an option for translationFunctions or similar, where a function name could be passed?

Example

// rule config
'jsx-a11y/label-has-associated-control': [
  'error',
  {
    assert: 'either',
  }
],

// t() is a global function that returns a translation string
<label>
{t('some.translation')}
</label>
<input type="text" id="id" />

The above JSX won't fail the rule, even though there isn't an htmlFor attribute and there isn't a nested input in the label.

Thanks!

[ljharb]

This seems like weird behavior to me; it should assume nothing is an input unless it's statically determined to be one.

cc @jessebeach

[grgr-dkrk]

In this case, the htmlFor test returns false, but the nested test returns true.

This problem seems to be caused by the mayContainChildComponent function unconditionally returning true when a JSXExpressionContainer is present on the Node.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/99a48682892b4d07149449fae40351e7694511d8/src/util/mayContainChildComponent.js#L31-L35

JSXExpressionContainer basically has no children. Therefore, the currently implemented recursion cannot reach the expected JSXElement.

One solution is to replace the recursion with a traverser such as estraverse-fb, traverse the AST tree of label, and check for the presence of Interactive Elements.
In this way, we do not need to set the deps option and can improve checking on the results of nested expressions.

We can also check only the expected Expression result, but I couldn't find the best solution in that.

[jessebeach]

In this case, the htmlFor test returns false, but the nested test returns true.

This problem seems to be caused by the mayContainChildComponent function unconditionally returning true when a JSXExpressionContainer is present on the Node.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/99a48682892b4d07149449fae40351e7694511d8/src/util/mayContainChildComponent.js#L31-L35

JSXExpressionContainer basically has no children. Therefore, the currently implemented recursion cannot reach the expected JSXElement.

One solution is to replace the recursion with a traverser such as estraverse-fb, traverse the AST tree of label, and check for the presence of Interactive Elements.
In this way, we do not need to set the deps option and can improve checking on the results of nested expressions.

We can also check only the expected Expression result, but I couldn't find the best solution in that.

@grgr-dkrk would you be able to put up a Pull Request with this suggestion?

[rodolfo3]

It does not have to use a global function to fail:

• This does not show the error/warning:

  const lbl = "Surname";
  return (
    <>
      <input type="text" />
      <label>{lbl}</label>
    </>
  );

• This one shows the error/warning:

  return (
    <>
      <input type="text" />
      <label>Surname</label>
    </>
  );

[crazko]

I can confirm that nesting option is failing when variable is used:

Whole example is in https://github.com/crazko/lint-label-input-example