Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contrast error on invisible hash anchor link #10634

Open
6 tasks done
rebekaburnett opened this issue Oct 31, 2024 · 1 comment
Open
6 tasks done

Contrast error on invisible hash anchor link #10634

rebekaburnett opened this issue Oct 31, 2024 · 1 comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution domain: a11y Related to accessibility concerns of the default theme

Comments

@rebekaburnett
Copy link

rebekaburnett commented Oct 31, 2024

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • 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

3-wave-hash-link

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 rebekaburnett added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Oct 31, 2024
@rebekaburnett rebekaburnett changed the title Accessibility problems Contrast error on invisible hash anchor link Nov 8, 2024
@rebekaburnett
Copy link
Author

I tested it locally, and it seemed to work to add the visibility tag to the hash-link style.

:global(.hash-link) {
  opacity: 0;
  visibility: hidden;
  ...
}

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

@slorber slorber added domain: a11y Related to accessibility concerns of the default theme and removed status: needs triage This issue has not been triaged by maintainers labels Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution domain: a11y Related to accessibility concerns of the default theme
Projects
None yet
Development

No branches or pull requests

2 participants