quarto-dev / quarto-dev/quarto-cli

a11y: appendix code <details><summary> fails color-contrast

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

Nobody has claimed this yet.

accessibility bug themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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: .quarto-appendix-contents > .cell > details > summary — rendered as <summary>Code</summary>

The appendix "Code" disclosure summary is styled with a foreground color that fails WCAG AA contrast against the appendix background.

Part of #8706.

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.

Research direction

Start with the styles that affect .quarto-appendix-contents > .cell > details > summary, using the linked accessibility reprex at post/post-1 and the axe color-contrast rule to reproduce the failure. Update the appendix Code disclosure summary styling so its foreground and background meet WCAG AA contrast, then rerun the accessibility check to confirm the violation is gone.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.