Renamed and modified button-role-space to click-events-have-key-events to be more consistent with the rule in the the eslint-plugin-jsx-a11y library

Author: Erin Doyle

docs/rules/button-role-space.md

@@ -0,0 +1,33 @@
+# 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

docs/rules/click-events-have-key-events.md

@@ -6,52 +6,53 @@ import {
 } from '../util';
 
 export default {
-    msg: 'You have `role="button"` but did not define an `onKeyDown` or `onKeyPress` handler. '
+    msg: 'You have an `onClick` handler but did not define an `onKeyDown`, `onKeyUp` or `onKeyPress` handler. '
      + 'Add it, and have the "Space" key do the same thing as an `onClick` handler.',
     url: 'https://www.w3.org/WAI/GL/wiki/Making_actions_keyboard_accessible_by_using_keyboard_event_handlers_with_WAI-ARIA_controls',
     affects: [
         devices.keyboardOnly
     ],
     test(tagName, props) {
         const hidden = hiddenFromAT(props);
-        const button = props.role === 'button';
+        const onClick = listensTo(props, 'onClick');
         const onKeyDown = listensTo(props, 'onKeyDown');
+        const onKeyUp = listensTo(props, 'onKeyUp');
         const onKeyPress = listensTo(props, 'onKeyPress');
 
         // rule passes when element is hidden,
-        // has role='button' and has an onKeyDown or onKeyPress prop
-        return hidden || !button || onKeyDown || onKeyPress;
+        // has onClick and has an onKeyDown, onKeyUp or onKeyPress prop
+        return hidden || !onClick || onKeyDown || onKeyUp || onKeyPress;
     }
 };
 
 export const pass = [{
-    when: 'role="button" but there is an onKeyDown handler.',
+    when: 'there is an onClick handler and there is an onKeyDown handler.',
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    render: React => <div role="button" onKeyDown={fn} />
+    render: React => <div onClick={fn} onKeyDown={fn} />
 }, {
-    when: 'role="button" but there is an onKeyPress handler.',
+    when: 'there is an onClick handler and there is an onKeyUp handler.',
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    render: React => <div role="button" onKeyPress={fn} />
+    render: React => <div onClick={fn} onKeyUp={fn} />
 }, {
-    when: 'there is no role',
-    render: React => <div >derp</div>
+    when: 'there is an onClick handler and there is an onKeyPress handler.',
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    render: React => <div onClick={fn} onKeyPress={fn} />
 }, {
-    when: 'there the role is not button',
-    // eslint-disable-next-line jsx-a11y/aria-role
-    render: React => <div role="foo" />
+    when: 'there is no onClick',
+    render: React => <div >derp</div>
 }, {
     when: 'the element is aria-hidden',
     render: React => <div aria-hidden role="button" />
 }];
 
 export const fail = [{
-    when: 'role="button" and no `onKeyDown` or `onKeyPress` is present',
-    render: React => <div role="button" />
+    when: 'there is an onClick handler but no `onKeyDown`, `onKeyUp` or `onKeyPress` is present',
+    render: React => <div onClick={fn} />
 }];
 
 export const description = `
 Enforce that elements which have the \`role="button"\`
 also have an \`onKeyDown\` or \`onKeyPress\` handler that handles Space or Enter
-(this is isn't actually checked) for poeple that are using a
+(this is isn't actually checked) for people that are using a
 keyboard-only device.
 `;

src/rules/button-role-space.js src/rules/click-events-have-key-events.jssrc/rules/button-role-space.js renamed to src/rules/click-events-have-key-events.js

@@ -1,6 +1,6 @@
 /* eslint-disable global-require */
 export default {
-    'button-role-space': require('./button-role-space').default,
+    'click-events-have-key-events': require('./click-events-have-key-events').default,
     'hidden-uses-tabindex': require('./hidden-uses-tabindex').default,
     'img-uses-alt': require('./img-uses-alt').default,
     'label-has-for': require('./label-has-for').default,