useValidAnchor (since v1.0.0)
Diagnostic Category: lint/a11y/useValidAnchor
Sources:
- Same as:
jsx-a11y/anchor-is-valid
Enforce that all anchors are valid, and they are navigable elements.
The anchor element (<a></a>) - also called hyperlink - is an important element
that allows users to navigate pages, in the same page, same website or on another website.
While before it was possible to attach logic to an anchor element, with the advent of JSX libraries, it’s now easier to attach logic to any HTML element, anchors included.
This rule is designed to prevent users from attaching logic at the click of anchors when the href
provided to the anchor element is not valid. Avoid using # symbol inside the href when you are
attaching the logic to the anchor element. If the anchor has logic attached to it with an incorrect href
the rules suggests to turn it to a button, because that’s likely what the user wants.
Anchor <a></a> elements should be used for navigation, while <button></button> should be
used for user interaction.
There are many reasons why an anchor should not have a logic with an incorrect href attribute:
- it can disrupt the correct flow of the user navigation e.g. a user that wants to open the link in another tab, but the default “click” behavior is prevented
- it can source of invalid links, and crawlers can’t navigate the website, risking to penalize SEO ranking
For a detailed explanation, check out https://marcysutton.com/links-vs-buttons-in-modern-web-applications
Examples
Section titled ExamplesInvalid
Section titled Invalid<a href={null}>navigate here</a>a11y/useValidAnchor.js:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href={null}>navigate here</a>
│ ^^^^^^^^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href={undefined}>navigate here</a>a11y/useValidAnchor.js:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href={undefined}>navigate here</a>
│ ^^^^^^^^^^^^^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href>navigate here</a>a11y/useValidAnchor.js:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href>navigate here</a>
│ ^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a href="javascript:void(0)">navigate here</a>a11y/useValidAnchor.js:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Provide a valid value for the attribute href.
> 1 │ <a href="javascript:void(0)">navigate here</a>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ The href attribute should be a valid a URL
ℹ Check this thorough explanation to better understand the context.
<a onClick={something}>navigate here</a>a11y/useValidAnchor.js:1:4 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Use a button element instead of an a element.
> 1 │ <a onClick={something}>navigate here</a>
│ ^^^^^^^^^^^^^^^^^^^
2 │
ℹ Anchor elements should only be used for default sections or page navigation
ℹ Check this thorough explanation to better understand the context.
Valid
Section titled Valid<a href="https://example.com" onClick={something}>navigate here</a><a href={`https://www.javascript.com`}>navigate here</a><a href={somewhere}>navigate here</a><a {...spread}>navigate here</a>