a11y: the floating color-scheme toggle is last in reading and focus order
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 74/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- javascript
調査の方向性
color-schemeトグルを挿入するafter-bodyスクリプトを特定し、そのコンテナがbodyにどのように追加されているかを確認します。コンテナが直接の子要素のまま、かつ最初の子要素になるように挿入方法を変更し、その後、描画位置が変わらないことと、フォーカス順がトグルから始まることを確認します。タイトルバナーがある場合とない場合のプレーンなドキュメントを、body > *:first-childルールを持つテーマも含めて確認します。
索引モデルが issue の本文から書いたものです。
説明
Split from the review of #14739.
On a document with no navbar, the color-scheme toggle is injected by the after-body script and its container is appended to body, so it is the last element in the DOM. Reading order and focus order both follow DOM order here, since nothing sets tabindex. The toggle is drawn at the top right of the page, so it is the first control a sighted user sees and the last one a keyboard or screen reader user reaches.
Measured on a document with a title block banner (author link, affiliation link, DOI link):
visual order TOGGLE (top=17) -> title (top=42) -> A Person (226) -> Example Org (226) -> DOI (284)
focus order now A Person -> Example Org -> DOI -> body link -> TOGGLE
A website is not affected. There the toggle sits in the navbar and is reached in navbar order, matching where it is drawn.
This is not a WCAG failure. Focus order still preserves meaning and operability, and axe reports nothing. It is a usability wrinkle, and it predates #14739: the toggle was appended to body before that change as well.
Inserting the container at the start of body instead of appending it corrects the order and leaves the drawn position untouched:
prepended -> position: {"top":17,"fromRight":17} (unchanged)
prepended -> focus : TOGGLE -> A Person -> Example Org -> DOI -> body link
The container must stay a direct child of body: the toggle is positioned against the page, so any ancestor that establishes a containing block captures it (see #14739).
Two things to check before making the change:
- It alters focus order for every existing plain document with a light/dark theme pair.
- The container would become
body's first child, so anybody > *:first-childrule in a theme could pick it up.
On a plain document without a banner the toggle is drawn level with the title but to its right, so prepending puts it one position early rather than exactly right. That is still much closer than last on the page.
Part of #8706.
- 主要言語
- JavaScript
- スター
- 6k
- フォーク
- 458
- 平均マージ
- 1日 9時間
- マージ済み PR(30日)
- 41
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
quarto-dev/quarto-cli のほかの issue
-
binder bug
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
quarto-dev/quarto-cli#14907 · コメント 3 件 ·
-
brand bug
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
quarto-dev/quarto-cli#14891 ·
-
brand bug html revealjs
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
quarto-dev/quarto-cli#14882 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
quarto-dev/quarto-cli#14875 ·
-
Percent scripts: accept raw-string (r""") and '''-delimited markdown cells, as jupytext writes them オープンengines-jupyter enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
quarto-dev/quarto-cli#14850 · コメント 2 件 ·
quarto-dev/quarto-cli の issue をすべて見る
似ている issue
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
babalae/bettergi-scripts-list#3674 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
vadimdemedes/ink#1029 ·
-
code-quality refactoring
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
langchain-ai/deepagents#6450 ·
-
optimization optimization:agents-md-curator
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
githubnext/gh-aw-cao#13143 ·