Merge pull request #211 from jessebeach/update-docs

Update no-static-element-interactions docs; various other improvements

Author: jessebeach

README.md

@@ -113,6 +113,9 @@ You can also enable all the recommended rules at once. Add `plugin:jsx-a11y/reco
 - [no-access-key](docs/rules/no-access-key.md): Enforce that the `accessKey` prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
 - [no-autofocus](docs/rules/no-autofocus.md): Enforce autoFocus prop is not used.
 - [no-distracting-elements](docs/rules/no-distracting-elements.md): Enforce distracting elements are not used.
+- [no-interactive-element-to-noninteractive-role](docs/rules/no-interactive-element-to-noninteractive-role.md): Interactive elements should not be assigned non-interactive roles.
+- [no-noninteractive-element-interactions](docs/rules/no-noninteractive-element-interactions.md): Non-interactive elements should not be assigned mouse or keyboard event listeners.
+- [no-noninteractive-element-to-interactive-role](docs/rules/no-noninteractive-element-to-interactive-role.md): Non-interactive elements should not be assigned interactive roles.
 - [no-onchange](docs/rules/no-onchange.md): Enforce usage of `onBlur` over `onChange` on select menus for accessibility.
 - [no-redundant-roles](docs/rules/no-redundant-roles.md): Enforce explicit role property is not the same as implicit/default role property on element.
 - [no-static-element-interactions](docs/rules/no-static-element-interactions.md): Enforce that non-interactive, visible elements (such as `<div>`) that have click handlers use the role attribute.

__tests__/src/rules/no-noninteractive-element-interactions-test.js

@@ -26,7 +26,7 @@ const expectedError = {
   type: 'JSXOpeningElement',
 };
 
-ruleTester.run('no-noninteractive-element-handlers', rule, {
+ruleTester.run('no-noninteractive-element-interactions', rule, {
   valid: [
     { code: '<TestComponent onClick={doFoo} />' },
     { code: '<Button onClick={doFoo} />' },

docs/rules/no-noninteractive-element-handlers.md renamed to docs/rules/no-noninteractive-element-interactions.md

@@ -42,6 +42,19 @@ Move the event handler function to an inner element like `<div>` and give that e
 
 Marking an element with the role `presentation` indicates to assistive technology that this element should be ignored; it exists to support the web application and is not meant for humans to interact with directly.
 
+### Case: This is a heading that expands/collapses content on the package
+
+Headers often double as expand/collapse controls for the content they headline. An accordion component is a common example of this pattern. Rather than assign the interaction handling code to the heading itself, put a button inside the heading instead. This pattern retains the role of the heading and the role of the button.
+
+```jsx
+<h3>
+  <button onClick={this._expandSection}>News</button>
+</h3>
+<ul id="articles-list">
+  <li>...</li>
+</ul>
+```
+
 ### References
 
   1. [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)