[new] - Implement avoid-positive-tabindex (#26)

Fixes #16

Author: beefancohen

README.md

@@ -79,6 +79,7 @@ Then configure the rules you want to use under the rules section.
 - [valid-aria-proptype](docs/rules/valid-aria-proptype.md): Enforce ARIA state and property values are valid.
 - [role-requires-aria](docs/rules/role-requires-aria.md): Enforce that elements with ARIA roles must have all required attributes for that role.
 - [no-unsupported-elements-use-aria](docs/rules/no-unsupported-elements-use-aria.md): Enforce that elements that do not support ARIA roles, states and properties do not have those attributes.
+- [avoid-positive-tabindex](docs/rules/avoid-positive-tabindex.md): Enforce tabIndex value is not greater than zero.
 
 ## Contributing
 Feel free to contribute! I am currently using [Google Chrome's Audit Rules](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules) to map out as rules for this plugin.

docs/rules/avoid-positive-tabindex.md

@@ -0,0 +1,26 @@
+# avoid-positive-tabindex
+
+Avoid positive tabIndex property values to synchronize the flow of the page with keyboard tab order.
+
+#### References
+1. [AX_FOCUS_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<span tabIndex="0">foo</span>
+<span tabIndex="-1">bar</span>
+<span tabIndex={0}>baz</span>
+```
+
+### Fail
+```jsx
+<span tabIndex="5">foo</span>
+<span tabIndex="3">bar</span>
+<span tabIndex="1">baz</span>
+<span tabIndex="2">never really sure what goes after baz</span>
+```
+

src/index.js

@@ -14,7 +14,8 @@ module.exports = {
     'valid-aria-proptypes': require('./rules/valid-aria-proptypes'),
     'no-invalid-aria': require('./rules/no-invalid-aria'),
     'role-requires-aria': require('./rules/role-requires-aria'),
-    'no-unsupported-elements-use-aria': require('./rules/no-unsupported-elements-use-aria')
+    'no-unsupported-elements-use-aria': require('./rules/no-unsupported-elements-use-aria'),
+    'avoid-positive-tabindex': require('./rules/avoid-positive-tabindex')
   },
   configs: {
     recommended: {
@@ -36,7 +37,8 @@ module.exports = {
         'jsx-a11y/valid-aria-proptypes': 2,
         'jsx-a11y/no-invalid-aria': 2,
         'jsx-a11y/role-requires-aria': 2,
-        'jsx-a11y/no-unsupported-elements-use-aria': 2
+        'jsx-a11y/no-unsupported-elements-use-aria': 2,
+        'jsx-a11y/avoid-positive-tabindex': 2
       }
     }
   }

src/rules/avoid-positive-tabindex.js

@@ -0,0 +1,41 @@
+/**
+ * @fileoverview Enforce tabIndex value is not greater than zero.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { getLiteralAttributeValue } from '../util/getAttributeValue';
+
+const errorMessage = 'Avoid positive integer values for tabIndex.';
+
+module.exports = context => ({
+  JSXAttribute: attribute => {
+    const name = attribute.name.name;
+    const normalizedName = name.toUpperCase();
+
+    // Check if tabIndex is the attribute
+    if (normalizedName !== 'TABINDEX') {
+      return;
+    }
+
+    // Only check literals because we can't infer values from certain expressions.
+    const value = Number(getLiteralAttributeValue(attribute));
+
+    if (isNaN(value) || value <= 0) {
+      return;
+    }
+
+    context.report({
+      node: attribute,
+      message: errorMessage
+    });
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

tests/src/rules/avoid-positive-tabindex.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Enforce tabIndex value is not greater than zero.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import rule from '../../../src/rules/avoid-positive-tabindex';
+import { RuleTester } from 'eslint';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Avoid positive integer values for tabIndex.',
+  type: 'JSXAttribute'
+};
+
+ruleTester.run('avoid-positive-tabindex', rule, {
+  valid: [
+    { code: '<div />;', parserOptions },
+    { code: '<div {...props} />', parserOptions },
+    { code: '<div tabIndex={undefined} />', parserOptions },
+    { code: '<div tabIndex={`${undefined}`} />', parserOptions },
+    { code: '<div tabIndex={`${undefined}${undefined}`} />', parserOptions },
+    { code: '<div tabIndex={0} />', parserOptions },
+    { code: '<div tabIndex={-1} />', parserOptions },
+    { code: '<div tabIndex={null} />', parserOptions },
+    { code: '<div tabIndex={bar()} />', parserOptions },
+    { code: '<div tabIndex={bar} />', parserOptions },
+    { code: '<div tabIndex={"foobar"} />', parserOptions },
+    { code: '<div tabIndex="0" />', parserOptions },
+    { code: '<div tabIndex="-1" />', parserOptions },
+    { code: '<div tabIndex="-5" />', parserOptions },
+    { code: '<div tabIndex="-5.5" />', parserOptions },
+    { code: '<div tabIndex={-5.5} />', parserOptions },
+    { code: '<div tabIndex={-5} />', parserOptions }
+  ],
+
+  invalid: [
+    { code: '<div tabIndex="1" />', errors: [ expectedError ], parserOptions },
+    { code: '<div tabIndex={1} />', errors: [ expectedError ], parserOptions },
+    { code: '<div tabIndex={"1"} />', errors: [ expectedError ], parserOptions },
+    { code: '<div tabIndex={`1`} />', errors: [ expectedError ], parserOptions },
+    { code: '<div tabIndex={1.589} />', errors: [ expectedError ], parserOptions }
+  ]
+});