Merge pull request #19 from evcohen/bugfix

Bugfix for onclick-uses-role failing on non-DOM components.

Author: beefancohen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-jsx-a11y",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
   "keywords": [
     "eslint",

src/util/isInteractiveElement.js

@@ -3,6 +3,25 @@
 import hasAttribute from './hasAttribute';
 import getAttributeValue from './getAttributeValue';
 
+const DOMElements = [
+  "a", "abbr", "address", "area", "article",
+  "aside", "audio", "b", "base", "bdi", "bdo", "big",
+  "blockquote", "body", "br", "button", "canvas", "caption",
+  "cite", "code", "col", "colgroup", "data", "datalist",
+  "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt",
+  "em", "embed", "fieldset", "figcaption", "figure", "footer",
+  "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header",
+  "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins",
+  "kbd", "keygen", "label", "legend", "li", "link", "main", "map",
+  "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript",
+  "object", "ol", "optgroup", "option", "output", "p", "param",
+  "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s",
+  "samp", "script", "section", "select", "small", "source", "span",
+  "strong", "style", "sub", "summary", "sup", "table", "tbody",
+  "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr",
+  "track", "u", "ul", "var", "video", "wbr"
+];
+
 const interactiveMap = {
   a: attributes => {
     const hasHref = hasAttribute(attributes, 'href');
@@ -26,6 +45,12 @@ const interactiveMap = {
  * it's intention is to be interacted with on the DOM.
  */
 const isInteractiveElement = (tagName, attributes) => {
+  // Do not test higher level JSX components, as we do not know what
+  // low-level DOM element this maps to.
+  if (DOMElements.indexOf(tagName) === -1) {
+    return true;
+  }
+
   if (interactiveMap.hasOwnProperty(tagName) === false) {
     return false;
   }

tests/src/rules/onclick-uses-role.js

@@ -52,7 +52,8 @@ ruleTester.run('onclick-uses-role', rule, {
     { code: '<a tabIndex="0" onClick={() => void 0} />', parserOptions },
     { code: '<a role="button" onClick={() => void 0} />', parserOptions },
     { code: '<a onClick={() => void 0} href="http://x.y.z" />', parserOptions },
-    { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />', parserOptions }
+    { code: '<a onClick={() => void 0} href="http://x.y.z" tabIndex="0" />', parserOptions },
+    { code: '<TestComponent onClick={doFoo} />', parserOptions }
   ],
   invalid: [
     { code: '<div onClick={() => void 0} />;', errors: [ expectedError ], parserOptions },