Skip to content
Permalink
9bfb9ba527
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time

jsx-a11y/anchor-has-content

💼 This rule is enabled in the following configs: ☑️ recommended, 🔒 strict.

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 options

This rule takes one optional object argument of type object:

{
    "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):

// Anchor.js
const Anchor = props => {
  return (
    <a {...props}>{ props.children }</a>
  );
}

...

// CreateAccount.js (for example)
...
return (
  <Anchor>Create Account</Anchor>
);

Succeed

<a>Anchor Content!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />

Fail

<a />
<a><TextWrapper aria-hidden /></a>

Accessibility guidelines

Resources