jsx-a11y/anchor-has-content Correctness
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.
Anchors passed directly as JSX prop values to custom components are ignored, since the receiving component may supply their content.
Why is this bad?
Anchor elements without content can be confusing for users relying on screen readers to understand.
Examples
Examples of correct code for this rule:
<a>Anchor Content!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />
<Button render={<a href='/home' />}>Home</Button>Examples of incorrect code for this rule:
<a />
<a><TextWrapper aria-hidden /></a>Configuration
This rule accepts a configuration object with the following properties:
components
type: string[]
default: []
Additional custom component names to treat as anchor elements.
How to use
To enable this rule using the config file or in the CLI, you can use:
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/anchor-has-content": "error"
}
}import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/anchor-has-content": "error",
},
});oxlint --deny jsx-a11y/anchor-has-content --jsx-a11y-pluginVersion
This rule was added in v0.0.18.