Update documentation.

Author: Ethan Cohen

README.md

@@ -61,13 +61,13 @@ Then configure the rules you want to use under the rules section.
 
 ## Supported Rules
 
-- img-uses-alt: Enforce that img jsx elements use the alt attribute.
-- onClick-uses-role: Enforce that non-interactive, visible elements (such as div) that have click handlers use the role attribute.
-- mouseEvents-require-keyEvents: Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for strictly keyboard users.
-- use-onblur-not-onchange: Enforce that onBlur is used instead of onChange.
-- no-access-key: Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
-- use-label-for: Enforce that label elements have the htmlFor attribute
+- [img-uses-alt](docs/rules/img-uses-alt.md): Enforce that img jsx elements use the alt attribute.
+- [onclick-uses-role](docs/rules/onclick-uses-role): Enforce that non-interactive, visible elements (such as div) that have click handlers use the role attribute.
+- [mouse-events-map-to-key-events](docs/rules/mouse-events-map-to-key-events): Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for strictly keyboard users.
+- [use-onblur-not-onchange](docs/rules/use-onblur-not-onchange): Enforce that onBlur is used instead of onChange.
+- [no-access-key](docs/rules/no-access-key): Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
+- [use-label-for](docs/rules/use-label-for): Enforce that label elements have the htmlFor attribute
 
 ## License
 
-MIT License.
+eslint-plugin-jsx-a11y is licensed under the [MIT License](LICENSE.md).

docs/rules/img-uses-alt.md

@@ -0,0 +1,18 @@
+# img-uses-alt
+
+Enforce that an `img` element contains the `alt` prop. The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
+
+## Rule details
+
+This rule takes no arguments. However, note that passing props as spread attribute without alt explicitly defined will cause this rule to fail. Explicitly pass down alt prop for rule to pass.
+
+### Succeed
+```jsx
+<img src="foo" alt="An image of foo!" />
+```
+
+### Fail
+```jsx
+<img src="foo" />
+<img {...props} />
+```

docs/rules/mouse-events-map-to-key-events.md

@@ -0,0 +1,25 @@
+# mouse-events-map-to-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 compatability, and screenreader users.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } />
+<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } />
+<div onMouseOver={ () => void 0 } onFocus={ () => void 0 } {...otherProps} />
+<div onMouseOut={ () => void 0 } onBlur={ () => void 0 } {...otherProps} />
+```
+
+### Fail
+In example 3 and 4 below, even if otherProps contains onBlur and/or onFocus, this rule will still fail. Props should be passed down explicitly for rule to pass.
+
+```jsx
+<div onMouseOver={ () => void 0 } />
+<div onMouseOut={ () => void 0 } />
+<div onMouseOver={ () => void 0 } {...otherProps} />
+<div onMouseOut={ () => void 0 } {...otherProps} />
+```

docs/rules/no-access-key.md

@@ -0,0 +1,17 @@
+# no-access-key
+
+Enforce no accessKey prop on element. Access keys are HTML elements that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreader and keyboard only users create accessibility complications so to avoid complications, access keys should not be used.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div />
+```
+
+### Fail
+```jsx
+<div accessKey="h" />
+```

docs/rules/onclick-uses-role.md

@@ -0,0 +1,25 @@
+# onclick-uses-role
+
+Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop.The purpose of the role attribute is to identify to screenreaders the exact function of an element.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div onClick={() => void 0} role="button" />
+<input type="text" onClick={() => void 0} /> // Interactive element does not require role.
+<a tabIndex="0" onClick={() => void 0} /> // tabIndex makes this interactive.
+<button onClick={() => void 0} className="foo" /> // button is interactive.
+<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from screenreader.
+```
+
+### Fail
+```jsx
+<div onClick={() => void 0} />
+<div onClick={() => void 0} {...props} />
+<div onClick={() => void 0} aria-hidden={false} />
+<a onClick={() => void 0} />
+<input onClick={() => void 0} type="hidden" /> // May not be hidden from screenreader ¯\_(ツ)_/¯
+```

docs/rules/use-label-for.md

@@ -0,0 +1,19 @@
+# use-label-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 of control].
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<input type="text" id="firstName" />
+<label htmlFor="firstName">First Name</label>
+```
+
+### Fail
+```jsx
+<input type="text" id="firstName" />
+<label>First Name</label>
+```

docs/rules/use-onblur-not-onchange.md

@@ -0,0 +1,18 @@
+# use-onblur-not-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.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<input onBlur={updateModel} />
+<input onBlur={handleOnBlur} onChange={handleOnChange} />
+```
+
+### Fail
+```jsx
+<input onChange={updateModel} />
+```

package.json

@@ -17,7 +17,7 @@
   },
   "main": "lib/index.js",
   "scripts": {
-    "build": "babel src --out-dir lib",
+    "build": "rimraf lib && babel src --out-dir lib",
     "prepublish": "npm run lint && npm run test && npm run build",
     "coveralls": "cat ./reports/coverage/lcov.info | coveralls",
     "lint": "eslint  --config .eslintrc.js src tests",

src/index.js

@@ -3,8 +3,8 @@
 module.exports = {
   rules: {
     'img-uses-alt': require('./rules/img-uses-alt'),
-    'onClick-uses-role': require('./rules/onClick-uses-role'),
-    'mouseEvents-require-keyEvents': require('./rules/mouseEvents-require-keyEvents'),
+    'onclick-uses-role': require('./rules/onclick-uses-role'),
+    'mouse-events-map-to-key-events': require('./rules/mouse-events-map-to-key-events'),
     'use-onblur-not-onchange': require('./rules/use-onblur-not-onchange'),
     'no-access-key': require('./rules/no-access-key'),
     'use-label-for': require('./rules/use-label-for')

src/rules/img-uses-alt.js

@@ -8,7 +8,7 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import hasAttribute from '../hasAttribute';
+import hasAttribute from '../util/hasAttribute';
 
 const errorMessage = 'img elements must have an alt tag.';