-
Notifications
You must be signed in to change notification settings - Fork 126
/
hidden-uses-tabindex.js
52 lines (45 loc) · 1.58 KB
/
hidden-uses-tabindex.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
48
49
50
51
52
import {
hiddenFromAT,
devices,
isInteractive
} from '../util';
export default [{
msg: 'You have `aria-hidden="true"` applied to an interactive element but have not '
+ 'removed it from the tab flow. This could result in a hidden tab stop for '
+ 'users of screen readers.',
url: 'http://john.foliot.ca/aria-hidden',
affects: [
devices.keyboardOnly,
devices.screenReaders
],
test(tagName, props) {
const hidden = hiddenFromAT(props);
const interactive = isInteractive(tagName, props);
const tabIndex = props.tabIndex === -1;
return !hidden || !interactive || tabIndex;
}
}];
export const pass = [{
when: 'an interactive element is aria-hidden and has tabindex="-1"',
render: React => <input aria-hidden tabIndex={-1} />
}, {
when: 'the element is not interactive',
render: React => <div aria-hidden />
}, {
when: 'an interactive element is not aria-hidden',
render: React => <input />
}];
export const fail = [{
when: 'an interactive element is hidden but has no tabindex',
render: React => <input aria-hidden />
}, {
when: 'an interactive element is hidden but has a bad tabindex',
// eslint-disable-next-line jsx-a11y/tabindex-no-positive
render: React => <input aria-hidden tabIndex={2} />
}];
export const description = `
Enforce that interactive elements that have been removed from
the accessibility tree using \`aria-hidden\` are also removed from
the tab flow by setting \`tabIndex={-1}\`. If not, this could result
in a hidden tab stop for screen reader users.
`;