Skip to content

Commit

Permalink
Added back in all of the previous rules that had been renamed with de…
Browse files Browse the repository at this point in the history
…precation warnings to allow for a smoother transition for consuming applications.
  • Loading branch information
Erin Doyle committed Nov 3, 2018
1 parent be9b7b6 commit 9acfd3f
Show file tree
Hide file tree
Showing 20 changed files with 809 additions and 2 deletions.
32 changes: 32 additions & 0 deletions docs/rules/deprecated/avoid-positive-index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# tabindex-no-positive (deprecated - use tabindex-no-positive)

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. Only use a `tabindex` of 0 for focusable elements.


## options

*This rule takes no options*

## Passes

```jsx harmony
<div tabIndex={0} />
<div tabIndex="0" />
<div tabIndex="-1" />
```

## Fails

```jsx harmony
<div tabIndex={1} />
<div tabIndex="1" />
<div tabIndex="2" />
```

## See also

- [This document](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03)
from Chrome Accessibility Developer Tools.
33 changes: 33 additions & 0 deletions docs/rules/deprecated/button-role-space.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# button-role-space (deprecated - use click-events-have-key-events)

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown,
onKeyPress. Coding for the keyboard is important for users with physical disabilities
who cannot use a mouse, AT compatibility, and screenreader users.


## options

*This rule takes no options*

## Passes

```jsx harmony
// passes when there is an `onClick` handler and there is an `onKey*` handler.
<div onClick={fn} onKeyDown={this.handleKeyDown} />
<div onClick={fn} onKeyUp={this.handleKeyUp} />
<div onClick={fn} onKeyPress={this.handleKeyPress} />

// passes when the element is aria-hidden
<div onClick={fn} aria-hidden="true"></div>
```

## Fails

```jsx harmony
// fails when there is an `onClick` handler and no `onKey*` is present
<div onClick={fn}></div>
```

## See also

- [This document](https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls) from w3.org
34 changes: 34 additions & 0 deletions docs/rules/deprecated/label-uses-for.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# label-uses-for (deprecated - use label-has-for)

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>`.


## options

*This rule takes no options*

## Passes

```jsx harmony
// passes when the label is hidden
<label aria-hidden="true"></label>

// passes when the label has a valid `htmlFor` prop
<label for="foo"></label>

// passes when it is not a label
<div></div>
```

## Fails

```jsx harmony
// fails when a label is not hidden and has no `htmlFor`
<label></label>
```

## See also

- [This document](https://www.w3.org/WAI/tutorials/forms/labels) from w3.org
39 changes: 39 additions & 0 deletions docs/rules/deprecated/mouse-events-map-to-key-events.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# mouse-events-map-to-key-events (deprecated - use mouse-events-have-key-events)

Enforce `onMouseOver`/`onMouseOut` are accompanied by
`onFocus`/`onBlur`. Coding for the keyboard is important for users with
physical disabilities who cannot use a mouse, AT compatibility, and screenreader
users.


## options

*This rule takes no options*

## Passes

```jsx harmony
// passes when there is no `onMouseOver` or `onMouseOut`
<div></div>

// passes when there is `onMouseOver` and `onFocus`
<div onMouseOver={someFunction} onFocus={someFunction}></div>

// passes when there is `onMouseOut` and `onBlur`
<div onMouseOut={someFunction} onBlur={someFunction}></div>
```

## Fails

```jsx harmony
// fails when there is `onMouseOver` but no `onFocus`
<div onMouseOver={someFunction}></div>

// fails when there is `onMouseOut` but no `onBlur`
<div onMouseOut={someFunction}></div>
```

## See also

- [This document](http://webaim.org/techniques/javascript/eventhandlers#onmouseover) from webaim.org
- [This document](http://webaim.org/techniques/javascript/eventhandlers#onmouseover) from webaim.org
35 changes: 35 additions & 0 deletions docs/rules/deprecated/no-unsupported-elements-use-aria.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# no-unsupported-elements-use-aria (deprecated - use aria-unsupported-elements)


Certain reserved DOM elements do not support ARIA roles, states and properties.
This is often because they are not visible, for example `meta`, `html`, `script`,
`style`. This rule enforces that these DOM elements do not contain the `role` and/or
`aria-*` props.


## Options

*This rule takes no options*

## Passes

These elements are passed by this rule
```jsx harmony
// no problem when the reserved element is not given an illegal prop
<meta/>

// no problem when an illegal props is given to a non-reserved elemeent
<div aria-hidden="true"></div>
```

## Fails

These elements are *not* passed by this rule
```jsx harmony
// warns when the element should not be given any ARIA attributes
<meta aria-hidden="false"/>
```

## See also

- Google Audit defs [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-defs#ax_aria_12)
34 changes: 34 additions & 0 deletions docs/rules/deprecated/onclick-uses-tabindex.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# onclick-uses-tabindex (deprecated - use interactive-supports-focus)

Enforce that elements that have an `onClick` handler also have
a `tabIndex` property. If not, they will not be navigable by
keyboard users.


## options

*This rule takes no options*

## Passes

```jsx harmony
// passes when when there is an `onClick` with a `tabIndex`
<span onClick={someFunction} tabindex="0"></span>

// passes when the element is hidden from aria
<span onClick={someFunction} aria-hidden="true"></span>

// passes when the element is interactive
<button onClick={someFunction}></button>
```

## Fails

```jsx harmony
// fails when there is an `onClick` with no `tabIndex`
<span onClick={someFunction}></span>
```

## See also

- [This document](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) from w3.org
41 changes: 41 additions & 0 deletions docs/rules/deprecated/redundant-alt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# redundant-alt (deprecated - use img-redundant-alt)

Enforce img alt attribute does not contain the word image, picture, or photo.
Screenreaders already announce `img` elements as an image. There is no need to use
words such as *image*, *photo*, and/or *picture*.


## options

This rule takes the following options:
1. Words to look for when looking for redundant words. (**Array(String)**)
default: `["image","picture","photo"]`

## Passes

```jsx harmony
// passes when the `alt` does not contain redundant words
<img src="foo" alt="nice"/>

// passes when the `alt` does not contain redundant words (different opts)
// (using options: ["warn",["foto"]])
<img src="foo" alt="image"/>

// passes when the element is aria-hidden
<img src="foo" alt="nice" aria-hidden="true"/>
```

## Fails

```jsx harmony
// fails when is a redundant alt message
<img src="foo" alt="bar image foo"/>

// fails when is a redundant alt message (different opts)
// (using options: ["warn",["foto"]])
<img src="foo" alt="bar foto"/>
```

## See also

- [This document](http://webaim.org/techniques/alttext) from webaim.org
40 changes: 40 additions & 0 deletions docs/rules/deprecated/use-onblur-not-onchange.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# use-onblur-not-onchange (deprecated - use no-onchange)

Enforce usage of onBlur over onChange for accessibility. onBlur must be used
instead of onChange, unless absolutely necessary and it causes no negative
consequences for keyboard only or screen reader users.


## options

*This rule takes no options*

## Passes

```jsx harmony
// passes when there is no `onChange` prop
<input/>

// passes when the element is aria-hidden
<input onChange={fn} aria-hidden="true"/>

// passes when the element is aria-disabled
<input onChange={fn} aria-disabled="true"/>

// passes when the element is aria-readonly
<input onChange={fn} aria-readonly="true"/>

// passes when there is an `onChange` prop and an `onBlur` prop
<input onChange={fn} onBlur={fn}/>
```

## Fails

```jsx harmony
// fails when the `onChange` prop is present without an `onBlur` prop
<input onChange={fn}/>
```

## See also

- [This document](http://webaim.org/techniques/javascript/eventhandlers#onchange) from webaim.org
36 changes: 36 additions & 0 deletions docs/rules/deprecated/valid-aria-role.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# valid-aria-role (deprecated - use aria-role)

The ARIA roles model requires that elements with a role attribute use a valid,
non-abstract ARIA role. Each non-abstract ARIA role is mapped on to a known set
of behavior by the user agent or assistive technology, so using an unknown role
will result in the desired behavior not being available to the user.

You can find a list of valid ARIA roles, along with descriptions and information
on additional required attributes, on the
[WAI-ARIA](http://www.w3.org/TR/wai-aria/roles#roles_categorization) site.


## options

*This rule takes no options*

## Passes

```jsx harmony
// passes when there is a role and it is valid
<div role="button"></div>

// passes when there is no `role`
<div></div>
```

## Fails

```jsx harmony
// fails when there is an invalid `role`
<div role="foo"></div>
```

## See also

- [This document](https://www.w3.org/TR/wai-aria/roles) from w3.org - Google Audit defs [AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-defs#ax_aria_01)
47 changes: 47 additions & 0 deletions src/rules/avoid-positive-index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,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} />
}];
Loading

0 comments on commit 9acfd3f

Please sign in to comment.