|
| 1 | +import { |
| 2 | + hasProp, |
| 3 | + warnRuleDeprecated |
| 4 | +} from '../util'; |
| 5 | + |
| 6 | + |
| 7 | +export const description = ` |
| 8 | +Keyboard users move focus from one form control to the next by using the tab |
| 9 | +key. By default focus order is determined by source order. |
| 10 | +
|
| 11 | +The \`tabIndex\` prop allows the author to specify an alternative tab order. |
| 12 | +Elements with a \`tabIndex\` value greater than zero will receive focus in numerical |
| 13 | +order, ahead of focusable elements with a \`tabIndex\` of zero. |
| 14 | +
|
| 15 | +It is recommended that authors avoid positive values for the \`tabIndex\` attribute |
| 16 | +because it is brittle (any focusable elements added to the page without an |
| 17 | +explicit \`tabIndex\` value greater than zero will come last in the tab order) and |
| 18 | +can easily result in a page which is extremely difficult to navigate, causing |
| 19 | +accessibility problems. |
| 20 | +`; |
| 21 | + |
| 22 | +export default [{ |
| 23 | + msg: 'Avoid positive integer values for `tabIndex`.', |
| 24 | + AX: 'AX_FOCUS_03', |
| 25 | + test(_, props) { |
| 26 | + warnRuleDeprecated('avoid-positive-index', 'tabindex-no-positive'); |
| 27 | + const tabIndex = hasProp(props, 'tabIndex'); |
| 28 | + return !tabIndex || props.tabIndex <= 0; |
| 29 | + } |
| 30 | +}]; |
| 31 | + |
| 32 | +export const pass = [{ |
| 33 | + when: 'the element has no tabIndex', |
| 34 | + render: React => <div /> |
| 35 | +}, { |
| 36 | + when: 'the element has a negative tabIndex', |
| 37 | + render: React => <div tabIndex={-1} /> |
| 38 | +}, { |
| 39 | + when: 'the element has a tabIndex of zero', |
| 40 | + render: React => <div tabIndex="0" /> |
| 41 | +}]; |
| 42 | + |
| 43 | +export const fail = [{ |
| 44 | + when: 'the element has a positive tabIndex', |
| 45 | + // eslint-disable-next-line jsx-a11y/tabindex-no-positive |
| 46 | + render: React => <div tabIndex={2} /> |
| 47 | +}]; |
0 commit comments