Merge pull request #39 from rackt/device-type-filtering

Add filtering for different device types. Fixes #37.

Author: angus-c

README.md

@@ -63,3 +63,11 @@ All failures are also accessible via the `getFailures()` method.
 ```
 a11y.getFailures();
 ```
+
+Some test are only relevant for certain device types. For example,
+if you are building a mobile web app, you can filter out
+desktop-specific rules by specifying a specific device type:
+
+```
+a11y(React, { device: ['mobile'] });
+```

lib/__tests__/index-test.js

@@ -276,5 +276,30 @@ describe('getFailures()', () => {
       assert(a11y.getFailures().length == 2);
     });
   });
+});
+
+describe('device is set to mobile', () => {
+  var createElement = React.createElement;
+
+  before(() => {
+    a11y(React, { device: ['mobile'] });
+  });
+
+  after(() => {
+    React.createElement = createElement;
+  });
+
+  describe('when role="button"', () => {
+    it('does not require onKeyDown', () => {
+      doNotExpectWarning(assertions.props.onClick.BUTTON_ROLE_SPACE.msg, () => {
+        <span onClick={k} role="button"/>;
+      });
+    });
 
+    it('does not require onKeyDown', () => {
+      doNotExpectWarning(assertions.props.onClick.BUTTON_ROLE_ENTER.msg, () => {
+        <span onClick={k} role="button"/>;
+      });
+    });
+  });
 });

lib/assertions.js

@@ -13,6 +13,8 @@ var INTERACTIVE = {
   }
 };
 
+const DEVICE = { 'DESKTOP': 'desktop', 'MOBILE': 'mobile' };
+
 var hasAlt = (props) => {
   return typeof props.alt === 'string';
 };
@@ -51,6 +53,7 @@ exports.props = {
     },
 
     NO_TABINDEX: {
+      device: DEVICE.DESKTOP,
       msg: 'You have a click handler on a non-interactive element but no `tabIndex` DOM property. The element will not be navigable or interactive by keyboard users. http://www.w3.org/TR/wai-aria-practices/#focus_tabindex',
       test (tagName, props, children) {
         return !(
@@ -73,13 +76,15 @@ exports.props = {
     },
 
     BUTTON_ROLE_SPACE: {
+      device: DEVICE.DESKTOP,
       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.onKeyDown);
       }
     },
 
     BUTTON_ROLE_ENTER: {
+      device: DEVICE.DESKTOP,
       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.onKeyDown);

lib/index.js

@@ -1,20 +1,27 @@
 var assertions = require('./assertions');
 
-var assertAccessibility = (tagName, props, children) => {
+var deviceMatches = (test, deviceFilter) => {
+  if (!test.device) {
+    return true;
+  }
+
+  return (deviceFilter.indexOf(test.device) != -1);
+};
+
+var assertAccessibility = (tagName, props, children, deviceFilter) => {
   var key;
   var failures = [];
-
   var tagTests = assertions.tags[tagName] || [];
   for (key in tagTests)
-    if (tagTests[key] && !tagTests[key].test(tagName, props, children))
+    if (tagTests[key] && deviceMatches(tagTests[key], deviceFilter) && !tagTests[key].test(tagName, props, children))
       failures.push(tagTests[key].msg);
 
   var propTests;
   for (var propName in props) {
     if (props[propName] === null || props[propName] === undefined) continue;
     propTests = assertions.props[propName] || [];
     for (key in propTests)
-      if (propTests[key] && !propTests[key].test(tagName, props, children))
+      if (propTests[key] && deviceMatches(propTests[key], deviceFilter) && !propTests[key].test(tagName, props, children))
         failures.push(propTests[key].msg);
   }
   return failures;
@@ -104,13 +111,14 @@ var reactA11y = (React, options) => {
   totalFailures = [];
   var _createElement = React.createElement;
   var includeSrcNode = options && !!options.includeSrcNode;
+  var deviceFilter = options && options.device || ['desktop'];
 
   React.createElement = (type, _props, ...children) => {
     var props = _props || {};
     var reactEl;
 
     if (typeof type === 'string') {
-      let failures = assertAccessibility(type, props, children);
+      let failures = assertAccessibility(type, props, children, deviceFilter);
       if (failures.length) {
         // Generate an id if one doesn't exist
         props.id = (props.id || 'a11y-' + nextId++);