apply jsx-a11y/anchor-is-valid rule to Astro components

This rule is the same rule as jsx-a11y/anchor-is-valid rule but it applies to the Astro components.
You must have eslint-plugin-jsx-a11y installed to use this rule.

The following is a partial excerpt from the jsx-a11y/anchor-is-valid rule documentation. See original documentation for more details.

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.

In fact, the interactive, underlined <a> element has become so synonymous with web navigation that this expectation has become entrenched inside browsers, assistive technologies such as screen readers and in how people generally expect the internet to behave. In short, anchors should navigate.

The use of JavaScript frameworks and libraries, like React, has made it very easy to add or subtract functionality from the standard HTML elements. This has led to anchors often being used in applications based on how they look and function instead of what they represent.

Whilst it is possible, for example, to turn the <a> element into a fully functional <button> element with ARIA, the native user agent implementations of HTML elements are to be preferred over custom ARIA solutions.

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-astro v0.11.0

🔍 Implementation

Taken with ❤️ from eslint-plugin-jsx-a11y

Edit this page