Skip to content

Conversation

ronjalh
Copy link
Member

@ronjalh ronjalh commented Nov 6, 2026 •

Add a go-to-top link to every page

Closes #165

A link at the end of every page that takes a keyboard or screen reader user back to the start of the page, so they do not have to go back through everything on a long page.

How it works

Question Choice
Who sees it? A screen reader reads it. A sighted user does not see it, until it has the focus (then it shows, with an outline), like the "Skip to main content" link
What does it do? Scrolls to the top and puts the focus on the first thing that can be reached: the "Skip to main content" link. A plain # link would only scroll, and the focus would stay at the bottom
Address and history Not changed: the click is cancelled
Where is it? Once in App.tsx, after the page content, so no page has to add it
Colors Theme colors only, so it works in light and dark mode

Testing

  • Component tests: hidden until focused, scrolls and moves the focus, does not follow the link.
  • App test: the link comes after the page on the Search, About and Calculator routes.
  • tsc -b, ESLint and all 316 frontend tests pass.
  • Checked in a real browser (Chromium) on several pages: the link is 1 by 1 pixels when it does not have the focus, shows with an outline when it has, Enter goes to the top and puts the focus on the skip link, and the address does not change. axe-core finds no violations in light and dark mode with the link focused.

Not in this PR

  • A screen reader was not used; that has to be done by a person.
  • PR feat(about): add the About page #164 (the About page) first had this link and does not have it any more.
  • src/App.tsx and docs/AI_USAGE.md are also edited by other open PRs, so a small conflict is possible. Keep both sides.

🤖 Generated with Claude Code

Add a link at the end of every page that takes a keyboard or screen
reader user back to the start of the page. It is read by a screen
reader and not seen until it has the focus, like the skip link.

- scroll to the top and put the focus on the first thing that can be
  reached, the "Skip to main content" link
- do not follow the link, so the address and the history do not change
- put the component once in App.tsx, so every page has it
- add tests of the component and a test that the link comes after the
  page on each route
- add the change to docs/AI_USAGE.md

Closes #165
@ronjalh ronjalh requested a review from a team as a code owner November 6, 2026 13:37
@ronjalh ronjalh self-assigned this Nov 6, 2026
Say in the comments of SkipLink and GoToTop that the skip link is what
meets WCAG 2.4.1 Bypass Blocks (level A, technique G1), and that the
go-to-top link is the way back, which WCAG does not require.
@ronjalh ronjalh changed the title feat(a11y): add a go-to-top link to every page feat(a11y): add go-to-top link, bypass blocks (WCAG 2.4.1) Nov 6, 2026
This reverts commit 86fbf08. The skip link already existed, so the pull request only adds the go-to-top link and does not refer to WCAG 2.4.1.
@ronjalh ronjalh changed the title feat(a11y): add go-to-top link, bypass blocks (WCAG 2.4.1) feat(a11y): add a go-to-top link to every page Nov 6, 2026
Copy link
Member

@xeniag xeniag left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested both automated and manually, the feature worked. Good job!

@xeniag xeniag merged commit 80bfae8 into dev Nov 9, 2026
@xeniag xeniag deleted the 165-add-a-go-to-top-link-at-the-bottom-of-every-page branch November 9, 2026 18:52
Sign in to join this conversation on GitHub.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants