You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.3 KiB
56 lines
1.3 KiB
# 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. |
|
|
|
## Rule details |
|
|
|
This rule takes one optional object argument of type object: |
|
|
|
```json |
|
{ |
|
"rules": { |
|
"jsx-a11y/anchor-has-content": [ 2, { |
|
"components": [ "Anchor" ], |
|
}], |
|
} |
|
} |
|
``` |
|
|
|
For the `components` option, these strings determine which JSX elements (**always including** `<a>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `a` 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> |
|
); |
|
``` |
|
|
|
|
|
### Succeed |
|
```jsx |
|
<a>Anchor Content!</a> |
|
<a><TextWrapper /></a> |
|
<a dangerouslySetInnerHTML={{ __html: 'foo' }} /> |
|
``` |
|
|
|
### Fail |
|
```jsx |
|
<a /> |
|
<a><TextWrapper aria-hidden /></a> |
|
``` |
|
## Accessibility guidelines |
|
- [WCAG 2.4.4](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) |
|
- [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) |
|
|
|
### Resources |
|
- [axe-core, link-name](https://dequeuniversity.com/rules/axe/3.2/link-name)
|
|
|