== Why is this an issue?

Anchors, represented by the `a` tag in HTML, usually contain a hyperlink that users can click to navigate to different sections of a website or different websites altogether.

However, when anchors do not have content or when the content is hidden from screen readers using the `aria-hidden` property,
it creates a significant accessibility issue. If an anchor's content is hidden or non-existent, visually impaired users may not be able to understand the purpose of the anchor or navigate the website effectively.

This rule checks that anchors do not use the `aria-hidden` property and have content provided either between the tags or as `aria-label` or `title` property.

== How to fix it in JSX

Ensure that anchors either have content or an `aria-label` or `title` attribute, and they should not use the `aria-hidden` property.

=== Code examples

==== Noncompliant code example

[source,javascript,diff-id=1,diff-type=noncompliant]
----
<a aria-hidden>link to my site</a>
----

==== Compliant solution

[source,javascript,diff-id=1,diff-type=compliant]
----
<a>link to my site</a>
----

== Resources
=== Documentation

* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a[``++<a>++``: The Anchor element]
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden[``++aria-hidden++`` attribute]

=== Standards

* W3C - https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context[Link purpose]