[fix] - Handle dynamic tabIndex expression values.

Fixes #50

Author: beefancohen

src/rules/onclick-has-focus.js

@@ -8,7 +8,7 @@ import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 import isInteractiveElement from '../util/isInteractiveElement';
 import getAttribute from '../util/getAttribute';
 import getNodeType from '../util/getNodeType';
-import getAttributeValue from '../util/getAttributeValue';
+import getTabIndex from '../util/getTabIndex';
 
 // ----------------------------------------------------------------------------
 // Rule Definition
@@ -31,7 +31,7 @@ module.exports = context => ({
       return;
     } else if (isInteractiveElement(type, attributes)) {
       return;
-    } else if (!isNaN(Number(getAttributeValue(getAttribute(attributes, 'tabIndex'))))) {
+    } else if (getTabIndex(getAttribute(attributes, 'tabIndex')) !== undefined) {
       return;
     }
 

src/util/getTabIndex.js

@@ -0,0 +1,20 @@
+'use strict';
+
+import getAttributeValue, { getLiteralAttributeValue } from './getAttributeValue';
+
+
+
+/**
+ * Returns the tabIndex value.
+ */
+export default function getTabIndex(tabIndex) {
+  // First test if we can extract a literal value
+  // to see if it's a valid tabIndex. If not, then just see if
+  // one exists as an expression.
+  const literalTabIndex = getLiteralAttributeValue(tabIndex);
+  if (literalTabIndex !== undefined || literalTabIndex !== null) {
+    return isNaN(Number(literalTabIndex)) ? undefined : literalTabIndex;
+  }
+
+  return getAttributeValue(tabIndex);
+}

src/util/isInteractiveElement.js

@@ -2,6 +2,7 @@
 
 import getAttribute from './getAttribute';
 import getAttributeValue, { getLiteralAttributeValue } from './getAttributeValue';
+import getTabIndex from './getTabIndex';
 import DOMElements from './attributes/DOM';
 
 
@@ -10,8 +11,8 @@ import DOMElements from './attributes/DOM';
 const interactiveMap = {
   a: attributes => {
     const href = getAttributeValue(getAttribute(attributes, 'href'));
-    const tabIndex = getAttributeValue(getAttribute(attributes, 'tabIndex'));
-    return Boolean(href) || !isNaN(Number(tabIndex));
+    const tabIndex = getTabIndex(getAttribute(attributes, 'tabIndex'));
+    return href !== undefined || tabIndex !== undefined;
   },
   // This is same as `a` interactivity function
   area: attributes => interactiveMap.a(attributes),

tests/src/rules/onclick-has-focus.js

@@ -54,6 +54,7 @@ ruleTester.run('onclick-has-focus', rule, {
     { code: '<area href="#" onClick={() => void 0} className="foo" />', parserOptions },
     { code: '<textarea onClick={() => void 0} className="foo" />', parserOptions },
     { code: '<a tabIndex="0" onClick={() => void 0} />', parserOptions },
+    { code: '<a tabIndex={dynamicTabIndex} onClick={() => void 0} />', parserOptions },
     { code: '<a tabIndex={0} onClick={() => void 0} />', parserOptions },
     { code: '<a role="button" href="#" onClick={() => void 0} />', parserOptions },
     { code: '<a onClick={() => void 0} href="http://x.y.z" />', parserOptions },