Jsx-a11y returning form label must have associated control when there is htmlFor
I have this component:
// @flow
import React, { Element } from 'react';
import styles from './Label.scss';
import cs from 'classnames';
export const Label = ({
id,
htmlFor,
invalid,
required,
children
}: {
id: string,
htmlFor: string,
invalid: boolean,
required: boolean,
children: Element<*>
}) =>
<label
htmlFor={htmlFor}
id={id}
required={required}
className={cs(
styles.label,
required ? styles.required : '',
invalid ? styles.invalid : ''
)}
>
{children}
</label>;
Label.displayName = 'Label';
When I run eslint I get this error message even though there is htmlFor
:
error: the form label must have an associated control (jsx-a11y / label-has-for) in Packages / DS-component-library / src / components / atoms / label / Label.js: 19: 3:
+3
source to share
1 answer
In your .eslintrc, try this:
"rules": {
"jsx-a11y/label-has-for": [ 2, {
"components": [ "Label" ],
"required": {
"some": [ "nesting", "id" ]
},
"allowChildren": false,
}]
}
This comes from: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
Good luck!
+3
source to share