eslint-plugin-jsx-a11y "anchor-is-valid" invalid href in CI
The jsx-a11y/anchor-is-valid rule flags anchors with a missing, empty, or placeholder href (like # or javascript:void(0)), or anchors used only as click handlers. Such anchors are not keyboard accessible as links.
What this error means
ESLint reports "The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value (jsx-a11y/anchor-is-valid)" and fails the lint step.
/src/components/Nav.jsx
14:7 error The href attribute is required for an anchor to be keyboard
accessible. Provide a valid, navigable address as the href value.
jsx-a11y/anchor-is-validCommon causes
An anchor is used as a button
A link with href="#" or no href, wired to an onClick, is really a button. Anchors without a navigable target are not valid keyboard links.
A router Link renders without a resolvable href
A framework Link used without a to/href, or with an empty value, produces an anchor the rule rejects.
How to fix it
Use a button for actions, an anchor for navigation
If the element performs an action, render a <button>. If it navigates, give the anchor a real, navigable href.
// action -> button
<button type="button" onClick={openMenu}>Menu</button>
// navigation -> anchor with real href
<a href="/pricing">Pricing</a>Provide a valid href on router links
- Give the router Link a resolvable
to/hrefvalue. - Avoid
#andjavascript:void(0)as href placeholders. - Re-run ESLint to confirm the anchor is valid.
<Link to="/dashboard">Dashboard</Link>How to prevent it
- Use buttons for actions and anchors only for navigation.
- Never use # or javascript:void(0) as an href.
- Keep anchor-is-valid at error so misuse fails lint.