Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,174 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
76/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
github, javascript, sass
Bereich
accessibility, frontend

Rechercherichtung

Beginne bei src/resources/formats/html/bootstrap/_bootstrap-rules.scss im Bereich der Overflow-Regel für pre.sourceCode und der verknüpften Styles in _visually-hidden.scss. Prüfe, wie die Selektoren den Overflow auf beiden Achsen bestimmen, rendere dann das bereitgestellte Quarto-Dokument und untersuche die berechneten Styles sowie das Ergebnis von axe-core. Das Ziel ist erreicht, wenn der visuell verborgene Codeblock auf beiden Achsen abgeschnitten bleibt und axe diesen Verstoß nicht mehr meldet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
476
Ø Merge
15 Std. 45 Min.
Gemergte PRs (30 T.)
113

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.