quarto-dev / quarto-dev/quarto-cli
a11y: scrollable code blocks and output pre lack tabindex=0 (keyboard inaccessible)
Nobody has claimed this yet.
- 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: scrollable-region-focusable · impact: serious · tag: wcag2a (2.1.1, 2.1.3)
Targets: <div class="sourceCode cell-code" id="cb...">, <pre> inside .cell-output
When code blocks or cell output overflow the viewport width they become scrollable, but Quarto doesn't add tabindex="0" — so keyboard-only users cannot scroll to see the hidden content. The fix should conditionally add tabindex="0" when the element's scrollWidth exceeds its clientWidth, or unconditionally for .sourceCode / .cell-output pre.
Part of #8706.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the post/post-1 reproduction at https://github.com/alexpghayes/quarto-accessibility-reprex and inspect the generated .sourceCode and .cell-output pre elements with the scrollable-region-focusable axe rule. Trace where these elements are produced, then verify that overflowing code blocks and output pre elements can receive keyboard focus and scroll to their hidden content.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 62/100