Add skip-to-content link to Bootstrap-themed HTML output#14685
Open
cscheid wants to merge 2 commits into
Open
Conversation
Inject a "Skip to main content" link as the first element of the body for all bootstrap-themed HTML output (documents, websites, books, dashboards) so keyboard users can bypass navigation blocks (WCAG 2.4.1 Bypass Blocks). The link is visually hidden until focused, targets the main content container (assigning an id and tabindex="-1" where missing), and its text is localizable via the new language key skip-to-content. Dashboards additionally mark their content container with role="main". Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Via `quarto dev-call build-artifacts`. Includes some unrelated churn in the editor tooling files from schema description edits that had not been regenerated on main. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Member
Author
|
@cwickham, we should figure out how to document this on quarto-web. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #14684.
What this does
Adds a "Skip to main content" link as the first element of
<body>for all Bootstrap-themed HTML output — standalone documents, websites, books, manuscripts, and dashboards — so keyboard and switch users can bypass navigation blocks (WCAG 2.2 SC 2.4.1 "Bypass Blocks", Level A). No JavaScript involved.theme: none/minimaloutput is untouched.#quarto-document-content→ first<main>→div.page-layout-custom(dashboards, standalone custom layouts) →#quarto-content(website custom layouts). If the target has no id it is assignedquarto-document-content, and it getstabindex="-1"so activating the link moves focus, not just scroll position..visually-hidden-focusablehelper (already compiled into every theme); when focused it appears as a fixed-position pill above the fixed/headroom navbar ($zindex-skip-link: 1070), styled from theme variables so it works in light and dark themes.languagekeyskip-to-content, with seeded translations for fr, de, es, pt, pt-BR, it, ja, zh, zh-TW, nl (other languages fall back to English; regional variants inherit their base language).role="main", addressing the missing main-landmark note in the issue.Behavior
On any page: first Tab reveals the link; Enter moves focus to the main content; the next Tab lands on the first focusable inside the content, bypassing navbar/sidebar/TOC entirely.
Tests
theme: none(asserts no link),page-layout: custom.lang: fr).Notes for review
dev-call build-artifactsregeneration; it picked up some unrelated stale churn in the editor tooling files (schema description texts edited on main without regenerating). Happy to split or drop that if preferred.skip-link: false) will be filed and linked here, per discussion in No skip-to-content link: keyboard users must tab through all navigation on every page (WCAG 2.4.1, Level A) #14684 review.🤖 Generated with Claude Code