[new] - Implement onclick-has-focus rule. (#28)

* [new] - Implement onclick-has-focus

Fixes #15

* [fix] - input type="hidden" will be hidden from screenreader.

Also cleaned up onclick-uses-role to match onclick-has-focus.

Added MDN references to these docs as well.

Author: beefancohen

README.md

@@ -80,6 +80,7 @@ Then configure the rules you want to use under the rules section.
 - [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.
+- [onclick-has-focus](docs/rules/onclick-has-focus.md): Enforce that elements with onClick handlers must be focusable.
 
 ## 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/onclick-has-focus.md

@@ -0,0 +1,39 @@
+# onclick-has-focus
+
+Enforce that visible elements with onClick handlers must be focusable. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. Elements which have click handlers but are not focusable can not be used by keyboard-only users.
+
+To make an element focusable, you can either set the tabIndex property, or use an element type which is inherently focusable.
+
+Elements that are inherently focusable are as follows:
+- `<input>`, `<button>`, `<select>` and `<textarea>` elements which are not disabled
+- `<a>` or `<area>` elements with an `href` attribute.
+
+#### References
+1. [AX_FOCUS_02](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_02)
+2. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: div with onClick attribute is hidden from screen reader -->
+<div aria-hidden onClick={() => void 0} />
+<!-- Good: span with onClick attribute is in the tab order -->
+<span onClick="doSomething();" tabIndex="0">Click me!</span>
+<!-- Good: span with onClick attribute may be focused programmatically -->
+<span onClick="doSomething();" tabIndex="-1">Click me too!</span>
+<!-- Good: anchor element with href is inherently focusable -->
+<a href="javascript:void(0);" onClick="doSomething();">Click ALL the things!</a>
+<!-- Good: buttons are inherently focusable -->
+<button onClick="doSomething();">Click the button :)</a>
+```
+
+### Fail
+```jsx
+<!-- Bad: span with onClick attribute has no tabindex -->
+<span onclick="submitForm();">Submit</span>
+<!-- Bad: anchor element without href is not focusable -->
+<a onclick="showNextPage();">Next page</a>
+```

docs/rules/onclick-uses-role.md

@@ -1,6 +1,9 @@
 # onclick-uses-role
 
-Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop.The purpose of the role attribute is to identify to screenreaders the exact function of an element.
+Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. The purpose of the role attribute is to identify to screenreaders the exact function of an element.
+
+#### References
+1. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
 
 ## Rule details
 
@@ -21,5 +24,4 @@ This rule takes no arguments.
 <div onClick={() => void 0} {...props} />
 <div onClick={() => void 0} aria-hidden={false} />
 <a onClick={() => void 0} />
-<input onClick={() => void 0} type="hidden" /> // May not be hidden from screenreader ¯\_(ツ)_/¯
-```
+```

src/index.js

@@ -15,7 +15,8 @@ module.exports = {
     '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'),
-    'avoid-positive-tabindex': require('./rules/avoid-positive-tabindex')
+    'avoid-positive-tabindex': require('./rules/avoid-positive-tabindex'),
+    'onclick-has-focus': require('./rules/onclick-has-focus')
   },
   configs: {
     recommended: {

src/rules/onclick-has-focus.js

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Enforce that elements with onClick handlers must be focusable.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
+import isInteractiveElement from '../util/isInteractiveElement';
+import hasAttribute from '../util/hasAttribute';
+import getNodeType from '../util/getNodeType';
+import getAttributeValue from '../util/getAttributeValue';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+const errorMessage = 'Elements with onClick handlers must be focusable. ' +
+  'Either set the tabIndex property (usually 0), or use an element type which ' +
+  'is inherently focusable such as `button`.';
+
+module.exports = context => ({
+  JSXOpeningElement: node => {
+    const { attributes } = node;
+    if (hasAttribute(attributes, 'onClick') === false) {
+      return;
+    }
+
+    const type = getNodeType(node);
+
+    if (isHiddenFromScreenReader(type, attributes)) {
+      return;
+    } else if (isInteractiveElement(type, attributes)) {
+      return;
+    } else if (getAttributeValue(hasAttribute(attributes, 'tabIndex'))) {
+      return;
+    }
+
+    context.report({
+      node,
+      message: errorMessage
+    });
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

src/rules/onclick-uses-role.js

@@ -25,18 +25,21 @@ module.exports = context => ({
       return;
     }
 
-    const isVisible = isHiddenFromScreenReader(attributes) === false;
-    const isNonInteractive = isInteractiveElement(getNodeType(node), attributes) === false;
-    const roleAttribute = hasAttribute(attributes, 'role');
-    const noRoleAttribute = roleAttribute === false || Boolean(getAttributeValue(roleAttribute)) === false;
+    const type = getNodeType(node);
 
-    // Visible, non-interactive elements require role attribute.
-    if (isVisible && isNonInteractive && noRoleAttribute) {
-      context.report({
-        node,
-        message: errorMessage
-      });
+    if (isHiddenFromScreenReader(type, attributes)) {
+      return;
+    } else if (isInteractiveElement(type, attributes)) {
+      return;
+    } else if (getAttributeValue(hasAttribute(attributes, 'role'))) {
+      return;
     }
+
+    // Visible, non-interactive elements require role attribute.
+    context.report({
+      node,
+      message: errorMessage
+    });
   }
 });
 

src/rules/redundant-alt.js

@@ -50,7 +50,7 @@ module.exports = context => ({
     }
 
     const value = getAttributeValue(altProp);
-    const isVisible = isHiddenFromScreenReader(node.attributes) === false;
+    const isVisible = isHiddenFromScreenReader(type, node.attributes) === false;
 
     if (Boolean(value) && typeof value === 'string' && isVisible) {
       const hasRedundancy = REDUNDANT_WORDS

src/util/isHiddenFromScreenReader.js

@@ -1,17 +1,26 @@
 'use strict';
 
 import hasAttribute from './hasAttribute';
-import getAttributeValue from './getAttributeValue';
+import getAttributeValue, { getLiteralAttributeValue } from './getAttributeValue';
 
 
 
 /**
  * Returns boolean indicating that the aria-hidden prop
- * is present or the value is true.
+ * is present or the value is true. Will also return true if
+ * there is an input with type='hidden'.
  *
  * <div aria-hidden /> is equivalent to the DOM as <div aria-hidden=true />.
  */
-const isHiddenFromScreenReader = attributes => {
+const isHiddenFromScreenReader = (type, attributes) => {
+  if (type.toUpperCase() === 'INPUT') {
+    const hidden = getLiteralAttributeValue(hasAttribute(attributes, 'type'));
+
+    if (hidden && hidden.toUpperCase() == 'HIDDEN') {
+      return true;
+    }
+  }
+
   const ariaHidden = getAttributeValue(hasAttribute(attributes, 'aria-hidden'));
   return ariaHidden === true;
 };

src/util/isInteractiveElement.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import hasAttribute from './hasAttribute';
-import getAttributeValue from './getAttributeValue';
+import { getLiteralAttributeValue } from './getAttributeValue';
 import DOMElements from './attributes/DOM';
 
 
@@ -11,11 +11,13 @@ const interactiveMap = {
   a: attributes => {
     const hasHref = hasAttribute(attributes, 'href');
     const hasTabIndex = hasAttribute(attributes, 'tabIndex');
-    return (Boolean(hasHref) || !hasHref && Boolean(hasTabIndex));
+    return (Boolean(hasHref) || (!hasHref && Boolean(hasTabIndex)));
   },
+  // This is same as `a` interactivity function
+  area: attributes => interactiveMap.a(attributes),
   button: () => true,
   input: attributes => {
-    const typeAttr = getAttributeValue(hasAttribute(attributes, 'type'));
+    const typeAttr = getLiteralAttributeValue(hasAttribute(attributes, 'type'));
     return typeAttr ? typeAttr.toUpperCase() !== 'HIDDEN' : true;
   },
   option: () => true,

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

@@ -34,6 +34,7 @@ ruleTester.run('avoid-positive-tabindex', rule, {
   valid: [
     { code: '<div />;', parserOptions },
     { code: '<div {...props} />', parserOptions },
+    { code: '<div id="main" />', parserOptions },
     { code: '<div tabIndex={undefined} />', parserOptions },
     { code: '<div tabIndex={`${undefined}`} />', parserOptions },
     { code: '<div tabIndex={`${undefined}${undefined}`} />', parserOptions },