[new] - Add rule anchor-has-content (#70)

Fixes #68

Author: badtant

README.md

@@ -70,6 +70,7 @@ Then configure the rules you want to use under the rules section.
 
 ## Supported Rules
 
+- [anchor-has-content](docs/rules/anchor-has-content.md): Enforce all anchors to contain accessible content.
 - [aria-props](docs/rules/aria-props.md): Enforce all `aria-*` props are valid.
 - [aria-proptypes](docs/rules/aria-proptypes.md): Enforce ARIA state and property values are valid.
 - [aria-role](docs/rules/aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.

docs/rules/anchor-has-content.md

@@ -0,0 +1,52 @@
+# anchor-has-content
+
+Enforce that anchors have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the `aria-hidden` prop. Refer to the references to learn about why this is important.
+
+#### References
+1. [Deque University](https://dequeuniversity.com/rules/axe/1.1/link-name)
+
+## Rule details
+
+This rule takes one optional argument of type string or array of strings. These strings determine which JSX elements should be checked including `a` and `Link` (react-router) by default. This is a good use case when you have a wrapper component that simply renders a anchor element (like in React):
+
+```js
+// Anchor.js
+const Anchor = props => {
+  return (
+    <a {...props}>{ props.children }</a>
+  );
+}
+
+...
+
+// CreateAccount.js (for example)
+...
+return (
+  <Anchor>Create Account</Anchor>
+);
+```
+
+To tell this plugin to also check your `Anchor` element, specify this in your `.eslintrc` file:
+
+```json
+{
+    "rules": {
+        "jsx-a11y/anchor-has-content": [ 2, "Anchor" ], // OR
+        "jsx-a11y/anchor-has-content": [ 2, [ "AnchorOne", "AnchorTwo" ] ]
+    }
+}
+```
+
+
+### Succeed
+```jsx
+<a>Anchor Content!</a>
+<a><TextWrapper /><a>
+<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
+```
+
+### Fail
+```jsx
+<a />
+<a><TextWrapper aria-hidden />
+```

src/index.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   rules: {
+    'anchor-has-content': require('./rules/anchor-has-content'),
     'aria-props': require('./rules/aria-props'),
     'aria-proptypes': require('./rules/aria-proptypes'),
     'aria-role': require('./rules/aria-role'),
@@ -32,6 +33,7 @@ module.exports = {
         },
       },
       rules: {
+        'jsx-a11y/anchor-has-content': 2,
         'jsx-a11y/aria-props': 2,
         'jsx-a11y/aria-proptypes': 2,
         'jsx-a11y/aria-role': 2,

src/rules/anchor-has-content.js

@@ -0,0 +1,75 @@
+/**
+ * @fileoverview Enforce anchor elements to contain accessible content.
+ * @author Lisa Ring & Niklas Holmberg
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { elementType, hasProp } from 'jsx-ast-utils';
+import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
+
+const errorMessage =
+    'Anchors must have content and the content must be accessible by a screen reader.';
+
+const anchors = [
+  'a',
+  'Link',
+];
+
+module.exports = context => ({
+  JSXOpeningElement: node => {
+    const typeCheck = anchors.concat(context.options[0]);
+    const nodeType = elementType(node);
+
+    // Only check anchor elements and custom types.
+    if (typeCheck.indexOf(nodeType) === -1) {
+      return;
+    }
+    const isAccessible = node.parent.children.some(child => {
+      switch (child.type) {
+        case 'Literal':
+          return Boolean(child.value);
+        case 'JSXElement':
+          return !isHiddenFromScreenReader(
+              elementType(child.openingElement),
+              child.openingElement.attributes
+          );
+        case 'JSXExpressionContainer':
+          if (child.expression.type === 'Identifier') {
+            return child.expression.name !== 'undefined';
+          }
+          return true;
+        default:
+          return false;
+      }
+    }) || hasProp(node.attributes, 'dangerouslySetInnerHTML');
+
+
+    if (isAccessible) {
+      return;
+    }
+
+    context.report({
+      node,
+      message: errorMessage,
+    });
+  },
+});
+
+module.exports.schema = [
+  {
+    oneOf: [
+      { type: 'string' },
+      {
+        type: 'array',
+        items: {
+          type: 'string',
+        },
+        minItems: 1,
+        uniqueItems: true,
+      },
+    ],
+  },
+];

tests/src/rules/anchor-has-content.js

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Enforce anchor elements to contain accessible content.
+ * @author Lisa Ring & Niklas Holmberg
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import rule from '../../../src/rules/anchor-has-content';
+import { RuleTester } from 'eslint';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Anchors must have content and the content must be accessible by a screen reader.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('anchor-has-content', rule, {
+  valid: [
+    { code: '<div />;', parserOptions },
+    { code: '<a>Foo</a>', parserOptions },
+    { code: '<Link>Foo</Link>', parserOptions },
+    { code: '<a><Bar /></a>', parserOptions },
+    { code: '<a>{foo}</a>', parserOptions },
+    { code: '<a>{foo.bar}</a>', parserOptions },
+    { code: '<a dangerouslySetInnerHTML={{ __html: "foo" }} />', parserOptions },
+  ],
+  invalid: [
+    { code: '<a />', errors: [expectedError], parserOptions },
+    { code: '<Link />', errors: [expectedError], parserOptions },
+    { code: '<a><Bar aria-hidden /></a>', errors: [expectedError], parserOptions },
+    { code: '<a>{undefined}</a>', errors: [expectedError], parserOptions },
+  ],
+});