jsx_a11y/anchor-has-content Correctness

💡 A suggestion is available for this rule for some violations.

What it does

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.

Alternatively, you may use the title prop or the aria-label prop.

Why is this bad?

Example

good

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

bad

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

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny jsx-a11y/anchor-has-content --jsx-a11y-plugin

Config (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/anchor-has-content": "error"
  }
}

References

• Rule Source