Docusaurus: aria-hidden used on links

[7mary4]

Expected Behavior

We need to be careful with aria-hidden="true". This should not be used on interactive elements that are available to non-assistive technology users.

Current Behavior

The links that let a person bookmark a subsection have aria-hidden="true". An assistive technology user would be able to focus on the link, but it would appear to not exist.

The CSS to hide this button is using opacity to make these links invisible. There's a shift from 0 to 1 and a transition for focus and hover styles. This means the link is always in the DOM and aria-hidden is used to remove it from the Accessibility API.

The easiest solution may be to re-use the same styles as the skip to main content link. Forego the animation for accessibility.

Alternatively, we need to remove aria-hidden="true" when the link receives focus.

Steps to reproduce

Please provide detailed steps for reproducing the issue.

1. Add the bookmarklet from this article: Find aria-hidden with this bookmarklet
2. Load the tutorial page and activate the bookmarklet
3. You should not see the blocks that identify an aria-hidden attribute on the headings.
4. Alternatively, inspect the code and make sure aria-hidden="true" is not on the links when they have focus.

Current Code

<a aria-hidden="true" class="hash-link" href="#semantic-heading" title="Direct link to heading">​</a>

.codeBlockContent_hGly:hover > .copyButton_Ue-o, .codeBlockTitle_eoMF:hover + .codeBlockContent_hGly .copyButton_Ue-o, .copyButton_Ue-o:focus, .footerLogoLink_MyFc:hover, .hash-link:focus, :hover > .hash-link {
opacity: 1;
}

.hash-link {
opacity: 0;
padding-left: .5rem;
transition: opacity var(--ifm-transition-fast);
}