-
Notifications
You must be signed in to change notification settings - Fork 126
/
label-uses-for.js
43 lines (37 loc) · 1.28 KB
/
label-uses-for.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import {
hiddenFromAT,
warnRuleDeprecated
} from '../util';
export default [{
tagName: 'label',
msg: 'Form controls using a label to identify them must be '
+ 'programmatically associated with the control using htmlFor',
url: 'https://www.w3.org/WAI/tutorials/forms/labels',
test(tagName, props) {
warnRuleDeprecated('label-uses-for', 'label-has-for');
const hidden = hiddenFromAT(props);
const hasfor = typeof props.htmlFor === 'string';
return hidden || hasfor;
}
}];
export const pass = [{
when: 'the label is hidden',
// eslint-disable-next-line jsx-a11y/label-has-for
render: React => <label aria-hidden />
}, {
when: 'the label has a valid `htmlFor` prop',
render: React => <label htmlFor="foo" />
}, {
when: 'it is not a label',
render: React => <div />
}];
export const fail = [{
when: 'a label is not hidden and has no `htmlFor`',
// eslint-disable-next-line jsx-a11y/label-has-for
render: React => <label />
}];
export const description = `
Enforce label tags have \`htmlFor\` attribute. Form controls using a \`label\` to
identify them must have only one label that is programmatically associated with
the control using: \`<label htmlFor={/* ID or name of control*/}>...</label>\`.
`;