Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

a11y: `pre.sourceCode` overflow rule breaks `.visually-hidden` code blocks

Open Beginner friendly
  • Is something wrong?
#15,174 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
github, javascript, sass
Domain
accessibility, frontend

Research direction

Start with src/resources/formats/html/bootstrap/_bootstrap-rules.scss around the pre.sourceCode overflow rule and the linked _visually-hidden.scss styles. Check how the selectors determine overflow on both axes, then render the provided Quarto document and inspect the computed styles and axe-core result. Done means the visually hidden code block stays clipped on both axes and axe no longer reports this violation.

Written by the indexing model from the issue text.

Description

accessibility bug code-blocks
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

A code block with the class .visually-hidden is meant to be clipped to 1px and read only by assistive technology.
Quarto's own pre.sourceCode rule overrides part of that clipping, so the block stays a 1px box that scrolls.
axe-core reports scrollable-region-focusable (serious, WCAG 2.1.1 and 2.1.3) on it.

Bootstrap's .visually-hidden sets overflow: hidden !important on both axes.

Quarto sets overflow-y: visible !important on pre.sourceCode, and that selector is more specific, so it wins on the y axis.

When one axis is hidden, CSS computes visible on the other axis as auto.
The block ends up with overflow-x: hidden, overflow-y: auto, a 1px by 1px box and about 49px of content.

The scrollable regions module skips regions of 1px or less, so the block gets no tabindex.
That choice is deliberate, and the module's comment describes this case.

So the block is neither clipped nor focusable, and axe keeps reporting it.
#14378 and its fix cover blocks that are visible and overflow, not this case.

Steps to reproduce
---
title: "Visually hidden code"
format: html
---

Text before.

```{.python .visually-hidden}
for i in range(3):
    print(i)
```

Text after.

Render it, then run axe-core on the page, for example with axe: output: document or with the axe.min.js that ships with Quarto.

Actual behavior

The rendered block is <pre class="sourceCode python visually-hidden code-with-copy">.
Its computed style is overflow: hidden / auto, its box is 1px by 1px, and scrollHeight is 49 against a clientHeight of 1.
It has no tabindex.
axe-core reports one scrollable-region-focusable violation, with impact serious.

Expected behavior

A .visually-hidden code block stays clipped on both axes, so it is not a scroll container and axe has nothing to report.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Dominant language
JavaScript
Stars
6.1k
Forks
471
Avg merge
16h 41m
Merged PRs (30d)
102

Getting set up

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.