Eslint-plugin-jsx-a11y: `label-has-for` doesn't pass for dynamic string values

[davidleger95]

This causes a linter error:

<label htmlFor={`InputField-${id}`}>{labelName}</label>
<input id={`InputField-${id}`} name={id} />

id is a string passed in via props to the parent component.

[ljharb]

It should, because the label doesn't wrap the input.

Is that the error message you're getting?

[davidleger95]

Why does the label have to wrap the input? Shouldn't htmlFor === id pass for this rule?

The error is Form label must have associated control

[ljharb]

For full a11y coverage, it must both be ID-linked and label-wrapped.

See the docs: if you want to configure it to require only one method (nesting vs id), or either, you can - but the default is "both".

[davidleger95]

Ahhh, that's what I need. Thanks!