anchor-has-content should skip aria-hidden/role=presentation

[TheJaredWilcurt]

anchor-has-content

Anchors must have content and the content must be accessible by a screen reader

That makes sense for this:

<a href="#example">
  <div class="box"></div>
</a>

But if you are doing a purely presentational image with clickable zones and want screen readers to skip the section entirely, you can add role="presentation" and aria-hidden:

<a
  aria-hidden="true"
  href="#example"
  role="presentation"
  tabindex="-1"
>
  <div class="box"></div>
</a>

In this context, there is no need to add additional text inside the link, so the linter should pass.

Current workaround:

<a
  aria-hidden="true"
  href="#example"
  role="presentation"
  tabindex="-1"
>
  <div class="box">
    <span class="sr-only">Box example</span>
  </div>
</a>

This is pointless though, as the text exists for screen readers, but the screen reader will not ever see it.

Also the tabindex="-1" is important, as it takes the link out of keyboard navigation. Without this you could tab to the link, but the screenreader wouldn't be able to explain what just happened because you are in an aria-hidden element that it wants to skip.

[TheJaredWilcurt]

Moved this issue to https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/