a11y: the floating color-scheme toggle is last in reading and focus order
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 74/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- javascript
- Domain
- accessibility, frontend
Research direction
Locate the after-body script that injects the color-scheme toggle and inspect how its container is added to body. Change the insertion so the container remains a direct child while becoming the first child, then verify that its drawn position is unchanged and that focus order starts with the toggle. Check plain documents with and without a title banner, including themes with a body > *:first-child rule.
Written by the indexing model from the issue text.
Description
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.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 42
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.
More from quarto-dev/quarto-cli
-
documentation
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
quarto-dev/quarto-cli#14915 ·
-
binder bug
Difficulty 1/5 Under an hour Newbie friendliness 92/100
quarto-dev/quarto-cli#14907 · 3 comments · 1 reaction ·
-
brand bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
quarto-dev/quarto-cli#14891 ·
-
brand bug html revealjs
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
quarto-dev/quarto-cli#14882 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
quarto-dev/quarto-cli#14875 ·
All issues in quarto-dev/quarto-cli
Similar issues
-
curation good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
amponce/archive-movie-browser#186 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
clerk/javascript#9852 ·
-
bug p1 tools
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
HarperFast/skills#96 ·
-
factory-active factory-automatic task-bug-reproduction-cannot-reproduce task-identify-harness-labels-done task-identify-issue-type-done
Difficulty 2/5 1-3 hours Newbie friendliness 84/100