Skip to content

Commit

Permalink
[New] anchor-has-content: Allow title attribute OR aria-label attri…
Browse files Browse the repository at this point in the history
…bute
  • Loading branch information
gorohash authored and ljharb committed Aug 12, 2023
1 parent 7b3492b commit e6bfd5c
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 0 deletions.
3 changes: 3 additions & 0 deletions __tests__/src/rules/anchor-has-content-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ ruleTester.run('anchor-has-content', rule, {
code: '<Link>foo</Link>',
settings: { 'jsx-a11y': { components: { Link: 'a' } } },
},
{ code: '<a title={title} />' },
{ code: '<a aria-label={ariaLabel} />' },
{ code: '<a title={title} aria-label={ariaLabel} />' },
].map(parserOptionsMapper),
invalid: [
{ code: '<a />', errors: [expectedError] },
Expand Down
4 changes: 4 additions & 0 deletions docs/rules/anchor-has-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

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` prop or the `aria-label` prop.

## Rule options

This rule takes one optional object argument of type object:
Expand Down Expand Up @@ -45,6 +47,8 @@ return (
<a>Anchor Content!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />
```

### Fail
Expand Down
5 changes: 5 additions & 0 deletions src/rules/anchor-has-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
// Rule Definition
// ----------------------------------------------------------------------------

import { hasAnyProp } from 'jsx-ast-utils';

import getElementType from '../util/getElementType';
import { arraySchema, generateObjSchema } from '../util/schemas';
import hasAccessibleChild from '../util/hasAccessibleChild';
Expand Down Expand Up @@ -40,6 +42,9 @@ export default {
if (hasAccessibleChild(node.parent, elementType)) {
return;
}
if (hasAnyProp(node.attributes, ['title', 'aria-label'])) {
return;
}

context.report({
node,
Expand Down

0 comments on commit e6bfd5c

Please sign in to comment.