Renamed rule avoid-positive-tabindex to tabindex-no-positive to be more inline with the rule naming in eslint-plugin-jsx-a11y

Author: Erin Doyle

.eslintrc

@@ -38,15 +38,15 @@
         "no-use-before-define": [2, "nofunc"],
         "no-unused-vars": "warn",
         "object-shorthand": 1,
-        "quotes": [2, "single"],
+        "quotes": [2, "single", { "allowTemplateLiterals": true }],
         "react/forbid-prop-types": [1, { "forbid": ["any"] }], // used in conjunction with the transform-react-remove-prop-types babel plugin
         "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"]  }],
         "react/jsx-indent": ["error", 4],
         "react/jsx-indent-props": ["error", 4],
         "react/jsx-uses-react": 2,
         "react/jsx-uses-vars": 2,
         "react/no-find-dom-node": "warn", // TODO: change this to error and fix findings
-        "react/prop-types": 0, // not currently working for stateless components: https://github.com/yannickcr/eslint-plugin-react/issues/803
+        "react/prop-types": "error",
         "react/react-in-jsx-scope": 2,
         "strict": [2, "never"],
         "vars-on-top": "error"

docs/rules/tabindex-no-positive.md

@@ -0,0 +1,32 @@
+# tabindex-no-positive
+
+It is recommended that authors avoid positive values for the `tabindex` attribute because it is 
+brittle (any focusable elements added to the page without an explicit `tabindex` value greater than 
+zero will come last in the tab order) and can easily result in a page which is extremely difficult 
+to navigate, causing accessibility problems.  Only use a `tabindex` of 0 for focusable elements.
+
+
+## options
+
+*This rule takes no options*
+
+## Passes
+
+```jsx harmony
+<div tabIndex={0} />
+<div tabIndex="0" />
+<div tabIndex="-1" />
+```
+
+## Fails
+
+```jsx harmony
+<div tabIndex={1} />
+<div tabIndex="1" />
+<div tabIndex="2" />
+```
+
+## See also
+
+ - [This document](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03) 
+ from Chrome Accessibility Developer Tools.

docs/rules/tabindex-uses-button.md

@@ -2,7 +2,7 @@
 
 When an anchor has a `tabIndex`, but no `href` and no `role` properties,
 it is likely you are using it to emulate a `button`.  Prefer using `role="button"`
-or just use the `<button` element.
+or just use the `<button>` element.
 
 
 ## options
@@ -28,7 +28,7 @@ or just use the `<button` element.
 ## Fails
 
 ```js
-// fails when anchor has tabIndexbut no button
+// fails when anchor has tabIndex but no button
 <a tabindex="1"></a>
 ```
 

src/rules/index.js

@@ -12,8 +12,8 @@ export default {
     'redundant-alt': require('./redundant-alt').default,
     'use-onblur-not-onchange': require('./use-onblur-not-onchange').default,
     'valid-aria-role': require('./valid-aria-role').default,
+    'tabindex-no-positive': require('./tabindex-no-positive').default,
     'tabindex-uses-button': require('./tabindex-uses-button').default,
-    'no-unsupported-elements-use-aria': require('./no-unsupported-elements-use-aria').default,
-    'avoid-positive-tabindex': require('./avoid-positive-tabindex').default
+    'no-unsupported-elements-use-aria': require('./no-unsupported-elements-use-aria').default
 };
 

src/rules/avoid-positive-tabindex.js src/rules/tabindex-no-positive.jssrc/rules/avoid-positive-tabindex.js renamed to src/rules/tabindex-no-positive.js

@@ -32,7 +32,10 @@ export const pass = [{
     render: React => <div />
 }, {
     when: 'the element has a negative tabIndex',
-    render: React => <div tabIndex={-2} />
+    render: React => <div tabIndex={-1} />
+}, {
+    when: 'the element has a tabIndex of zero',
+    render: React => <div tabIndex="0" />
 }];
 
 export const fail = [{