-
Notifications
You must be signed in to change notification settings - Fork 126
/
avoid-positive-index.js
47 lines (40 loc) · 1.55 KB
/
avoid-positive-index.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
43
44
45
46
47
import {
hasProp,
warnRuleDeprecated
} from '../util';
export const description = `
Keyboard users move focus from one form control to the next by using the tab
key. By default focus order is determined by source order.
The \`tabIndex\` prop allows the author to specify an alternative tab order.
Elements with a \`tabIndex\` value greater than zero will receive focus in numerical
order, ahead of focusable elements with a \`tabIndex\` of zero.
It is recommended that authors avoid positive values for the \`tabIndex\` attribute
because it is brittle (any focusable elements added to the page without an
explicit \`tabIndex\` value greater than zero will come last in the tab order) and
can easily result in a page which is extremely difficult to navigate, causing
accessibility problems.
`;
export default [{
msg: 'Avoid positive integer values for `tabIndex`.',
AX: 'AX_FOCUS_03',
test(_, props) {
warnRuleDeprecated('avoid-positive-index', 'tabindex-no-positive');
const tabIndex = hasProp(props, 'tabIndex');
return !tabIndex || props.tabIndex <= 0;
}
}];
export const pass = [{
when: 'the element has no tabIndex',
render: React => <div />
}, {
when: 'the element has a negative tabIndex',
render: React => <div tabIndex={-1} />
}, {
when: 'the element has a tabIndex of zero',
render: React => <div tabIndex="0" />
}];
export const fail = [{
when: 'the element has a positive tabIndex',
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
render: React => <div tabIndex={2} />
}];