Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#15,174 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
github, javascript, sass
領域
accessibility, frontend

調査の方向性

src/resources/formats/html/bootstrap/_bootstrap-rules.scssの、pre.sourceCodeのoverflowルールと、関連する_visually-hidden.scssのスタイルの周辺から確認します。セレクターが両軸のoverflowをどのように決定するかを調べ、次に提供されたQuartoドキュメントをレンダリングして、計算済みスタイルとaxe-coreの結果を確認します。視覚的に隠されたコードブロックが両軸でクリップされたままで、axeがこの違反を報告しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
JavaScript
スター
6.1k
フォーク
471
平均マージ
17時間 35分
マージ済み PR（30日）
107

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。