Merge pull request #15 from courseload/button-spaces

Ensure buttons have onKeyDown event listeners that trigger a click event for Spacebar and Enter keys

Author: kloots

lib/__tests__/index-test.js

@@ -89,7 +89,7 @@ describe('props', () => {
           <div onClick={k}><img src="#" alt="Foo"/></div>;
         });
       });
-      
+
       it('warns if there is an image with an empty alt attribute', () => {
         expectWarning(assertions.props.onClick.NO_LABEL.msg, () => {
           <div onClick={k}><img src="#" alt=""/></div>;
@@ -99,13 +99,13 @@ describe('props', () => {
 
     describe('when role="button"', () => {
       it('requires onKeyUp', () => {
-        expectWarning(assertions.props.onClick.BUTTON_ROLE_NO_KEYUP.msg, () => {
+        expectWarning(assertions.props.onClick.BUTTON_ROLE_SPACE.msg, () => {
           <span onClick={k} role="button"/>;
         });
       });
 
       it('requires onKeyDown', () => {
-        expectWarning(assertions.props.onClick.BUTTON_ROLE_NO_KEYDOWN.msg, () => {
+        expectWarning(assertions.props.onClick.BUTTON_ROLE_ENTER.msg, () => {
           <span onClick={k} role="button"/>;
         });
       });

lib/assertions.js

@@ -68,17 +68,19 @@ exports.props = {
       }
     },
 
-    BUTTON_ROLE_NO_KEYUP: {
-      msg: 'You have `role="button"` but did not define an `onKeyUp` handler. Add it, and have the "Space" key do the same thing as an `onClick` handler.',
+    // onKeyUp is too late to cancel space's default behavior of scrolling the
+    // page.
+    BUTTON_ROLE_SPACE: {
+      msg: 'You have `role="button"` but did not define an `onKeyDown` handler. Add it, and have the "Space" key do the same thing as an `onClick` handler.',
       test (tagName, props, children) {
-        return !(props.role === 'button' && !props.onKeyUp);
+        return !(props.role === 'button' && !props.onKeyDown);
       }
     },
 
-    BUTTON_ROLE_NO_KEYDOWN: {
+    BUTTON_ROLE_ENTER: {
       msg: 'You have `role="button"` but did not define an `onKeyDown` handler. Add it, and have the "Enter" key do the same thing as an `onClick` handler.',
       test (tagName, props, children) {
-        return !(props.role === 'button' && !props.onKeyUp);
+        return !(props.role === 'button' && props.onKeyDown);
       }
     }