jsx_a11y/anchor-is-valid Correctness
What it does
The HTML <a> element, with a valid href attribute, is formally defined as representing a hyperlink. That is, a link between one HTML document and another, or between one location inside an HTML document and another location inside the same document.
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 to attach logic at the click of anchors, and also makes sure that the href provided to the anchor element is valid. If the anchor has logic attached to it, 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.
Consider the following:
<>
<a href="javascript:void(0)" onClick={foo}>
Perform action
</a>
<a href="#" onClick={foo}>
Perform action
</a>
<a onClick={foo}>Perform action</a>
</>All these anchor implementations indicate that the element is only used to execute JavaScript code. All the above should be replaced with:
<button onClick={foo}>Perform action</button>`
Why is this bad?
There are many reasons why an anchor should not have a logic and have a correct 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" behaviour is prevented
- it can source of invalid links, and crawlers can't navigate the website, risking to penalise SEO ranking
Example
Valid
<>
<a href={`https://www.javascript.com`}>navigate here</a>
<a href={somewhere}>navigate here</a>
<a {...spread}>navigate here</a>
</>Invalid
<>
<a href={null}>navigate here</a>
<a href={undefined}>navigate here</a>
<a href>navigate here</a>
<a href="javascript:void(0)">navigate here</a>
<a href="https://example.com" onClick={something}>
navigate here
</a>
</>