Contrast error on invisible hash anchor link

[rebekaburnett]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

The hash links (the invisible markers immediately following each heading) are throwing contrast errors. If you add an aria label of hidden, it should fix that. (see attachment)

Reproducible demo

No response

Steps to reproduce

You can see the error by installing the WAVE extension in Chrome and enabling it (click the little W button in the header) when you're on one of the Docusaurus pages which have headers (e.g., https://docusaurus.io/docs)

Expected behavior

Expect to not get any of the errors in the scans.

Actual behavior

Your environment

• Public source code:
• Public site URL: https://developer.vippsmobilepay.com/
• Docusaurus version used: 3.5.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 130
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

• [ x ] I'd be willing to try to fix this bug myself

[rebekaburnett]

I found that it was easy to fix locally 🙈 I just overwrite the hash-link style by adding it to my own custom.css. If we use visibility instead of opacity we don't get the false alarm.

.hash-link {
  /* opacity: 0; */
  visibility: hidden;
  padding-left: 0.5rem;
  transition: opacity var(--ifm-transition-fast);
  -webkit-user-select: none;
          user-select: none;
}

.hash-link::before {
  content: '#';
}

.hash-link:focus,
*:hover > .hash-link {
  /* opacity: 1; */
  visibility: visible;
}