Allow title attribute OR aria-label attribute in the anchor-has-conte…

…nt rule
jsx-eslint · May 3, 2021 · 2a36fa5 · 2a36fa5
1 parent ff93739
commit 2a36fa5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/__tests__/src/rules/anchor-has-content-test.js b/__tests__/src/rules/anchor-has-content-test.js
@@ -32,13 +32,13 @@ ruleTester.run('anchor-has-content', rule, {
     { code: '<a>{foo.bar}</a>' },
     { code: '<a dangerouslySetInnerHTML={{ __html: "foo" }} />' },
     { code: '<a children={children} />' },
+    { code: '<a title={title} />' },
+    { code: '<a aria-label={ariaLabel} />' },
     { code: '<a title={title} aria-label={ariaLabel} />' },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<a />', errors: [expectedError] },
     { code: '<a><Bar aria-hidden /></a>', errors: [expectedError] },
     { code: '<a>{undefined}</a>', errors: [expectedError] },
-    { code: '<a title={title} />', errors: [expectedError] },
-    { code: '<a aria-label={ariaLabel} />', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });
diff --git a/docs/rules/anchor-has-content.md b/docs/rules/anchor-has-content.md
@@ -2,7 +2,7 @@
 
 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.
 
-Alternatively, you may use the `title` and `aria-label` props.
+Alternatively, you may use the `title` prop or the `aria-label` prop.
 
 ## Rule details
 
@@ -43,7 +43,8 @@ return (
 <a>Anchor Content!</a>
 <a><TextWrapper /><a>
 <a dangerouslySetInnerHTML={{ __html: 'foo' }} />
-<a title='foo' aria-label='foo' />
+<a title='foo' />
+<a aria-label='foo' />
 ```
 
 ### Fail

diff --git a/src/rules/anchor-has-content.js b/src/rules/anchor-has-content.js
@@ -7,7 +7,7 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { elementType, hasEveryProp } from 'jsx-ast-utils';
+import { elementType, hasAnyProp } from 'jsx-ast-utils';
 import { arraySchema, generateObjSchema } from '../util/schemas';
 import hasAccessibleChild from '../util/hasAccessibleChild';
 
@@ -37,7 +37,7 @@ module.exports = {
       if (hasAccessibleChild(node.parent)) {
         return;
       }
-      if (hasEveryProp(node.attributes, ['title', 'aria-label'])) {
+      if (hasAnyProp(node.attributes, ['title', 'aria-label'])) {
         return;
       }