a11y: active TOC link fails color-contrast

Open Beginner friendly
#14,382 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
65/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css
Domain
accessibility, frontend

Research direction

Reproduce the issue with the linked quarto-accessibility-reprex at post/post-1, then inspect the styles for #toc-section-1.nav-link.active. Use the axe color-contrast check to confirm the active state reaches WCAG AA 4.5:1 while preserving the existing contrast of non-active entries.

Written by the indexing model from the issue text.

Description

accessibility bug themes

Reported in #14373.

Repro: https://github.com/alexpghayes/quarto-accessibility-reprex (post/post-1)

axe rule: color-contrast · impact: serious · tag: wcag2aa (1.4.3)
Target: #toc-section-1.nav-link.active — the currently-scrolled TOC entry.

The active TOC link is rendered with a lighter color against the page background, falling below WCAG AA 4.5:1. The contrast of the non-active entries appears fine — only the .active state is affected.

Part of #8706.

Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 8h
Merged PRs (30d)
42

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.