Repository navigation
Show the focus outline on the Quick Jumps links of the published site #265
Description
What is wrong
On every page of the published site, the "Quick Jumps" links near the top of the page hide the keyboard focus outline. In scripts/build-html.js, the rule
.quick-jumps-list a:hover,
.quick-jumps-list a:focus {
background: #eaeef2;
text-decoration: underline;
outline: none;
}removes the outline that the site gives every other link (a:focus-visible { outline: 2px solid #0969da; }), and it wins because its selector is more specific. What is left is an underline and a pale grey background on a pale grey box, which is very hard to see. A sighted keyboard user, or someone using magnification, loses track of where focus is (WCAG 2.4.7 Focus Visible).
Found by a code review of the site template on 2026-10-28; not yet confirmed in a browser.
Why this is a good first issue
It is a one-line CSS change with a clear way to check it.
What to do
- In
scripts/build-html.js, removeoutline: none;from the.quick-jumps-list a:focusrule, so the site-wide focus outline applies. Check the dark-mode and high-contrast rules nearby do not remove it again. - Run
npm run build:htmland commitscripts/build-html.jswith the regeneratedhtml/styles/custom.css.
Acceptance criteria
- Opening any chapter in
html/docs/and pressing Tab until focus reaches a Quick Jumps link shows the same 2 pixel blue outline as other links, in light and dark mode. - Mouse hover still underlines the link.
- Say in the pull request which browser you checked it in.
Generated by Claude Code
Activity
accesswatch commentedon Oct 28, 2026
The CSS fix is merged in #271:
outline: noneis gone from.quick-jumps-list a:focus, so the site-widea:focus-visibleoutline applies, andhtml/styles/custom.cssis regenerated.What remains is the manual check from the acceptance criteria. No browser could be downloaded where the change was made, so nobody has looked at it yet. Open a chapter in
html/docs/and Tab to a Quick Jumps link, in light mode and in dark mode. Confirm the 2 pixel blue outline appears and that hover still underlines the link, then close this issue and say which browser you used.Generated by Claude Code
accesswatch commentedon Oct 28, 2026
Checked on the live site in a browser (Chromium, in the Claude desktop app), on docs/00-pre-workshop-setup.html after pull request 271 deployed. Keyboard focus reached "Jump to course content" with the Tab key and matched :focus-visible.
Both outlines are visible in screenshots. Not checked: Windows High Contrast (forced colors), which cannot be emulated in this browser; the dark and high-contrast rules only change colours, so the system outline should apply there. Closing as fixed.
Generated by Claude Code
docs(a11y): drop known limitations fixed in #273 (#282)