jsx-a11y/anchor-has-content

A link with nothing in it, or with only hidden content, is announced as "link" and nothing else. The person hearing it can't tell where it goes.

Text, an expression, a visible element, a title or an aria-label all count as content. A link that's hidden itself with aria-hidden isn't checked.

If the only child is a hidden element, --fix removes its aria-hidden and hidden attributes.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"jsx-a11y/anchor-has-content" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"jsx-a11y/anchor-has-content" = ["error", {
  components = [], # list of strings
}]

Examples#

example.jsx2 problems

const profile = <a href="/profile" />;
const settings = <a href="/settings"><span aria-hidden>Settings</span></a>;

example.jsxNo problems

const profile = <a href="/profile">{user.name}</a>;
const settings = <a href="/settings"><span>Settings</span></a>;
const close = <a href="/" aria-label="Close"><Icon name="x" aria-hidden /></a>;

Options#

Option	Default	What it does
`components`	`[]`	Components to check like `a`.

example.jsxwith { "components": ["Link"] }1 problem

const profile = <Link to="/profile" />;