feat(a11y): add skip-to-content accessibility link#17479
feat(a11y): add skip-to-content accessibility link#17479macuzi wants to merge 3 commits intogetsentry:masterfrom
Conversation
Add a keyboard-accessible "Skip to content" link that appears on Tab focus and jumps to the main content area. Resets focus navigation on client-side route changes so the link remains the first Tab stop.
|
@macuzi is attempting to deploy a commit to the Sentry Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit bf56b37. Configure here.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
| <a ref={ref} href="#main" className="skip-to-content"> | ||
| Skip to content | ||
| </a> |
There was a problem hiding this comment.
Bug: The skip-to-content link is broken on pages that don't include the DocPage component because the target element with id="main" is missing.
Severity: MEDIUM
Suggested Fix
Ensure that a main content element with id="main" is present on all pages where the SkipToContent component is rendered. This can be achieved by adding the id="main" attribute to the primary content container of pages like the home page, API category pages, and API endpoint pages.
Prompt for AI Agent
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.
Location: src/components/skipToContent.tsx#L28-L30
Potential issue: The `SkipToContent` component is rendered on all pages via the root
layout and includes a link with `href="#main"`. However, the target element with
`id="main"` is only present in the `DocPage` component. On pages that do not render
`DocPage`, such as the home page, API category pages, and API endpoint pages, the
skip-to-content link is non-functional. This fails to provide the intended accessibility
feature for keyboard users on those pages.
Did we get this right? 👍 / 👎 to inform future reviews.
There was a problem hiding this comment.
The #main anchor exists on most pages (including all doc pages). On a few edge cases like the home page, the skip link will currently have no effect, but we can expand support to additional layouts in a follow-up if needed.
Add matching #main targets to the home and 404 pages so the root skip link works outside DocPage-rendered routes. Remove the unused skip-link anchor ref.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Merge origin/master into the skip-to-content branch. Keep the incoming home page card updates while preserving the #main target needed by the skip link.
## DESCRIBE YOUR PR Adds a root-level skip-to-content link and ensures non-DocPage routes have a matching `#main` target. This keeps keyboard users from getting stuck on the home page or 404 page when using the skip link. This replaces fork PR #17479 so the Codeowner assignment workflow can run with same-repo permissions. ## IS YOUR CHANGE URGENT? - [ ] Urgent deadline (GA date, etc.): - [ ] Other deadline: - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you have added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST - [ ] Checked Vercel preview for correctness, including links - [x] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) --------- Co-authored-by: macuzi <lamberto.asghedom@sentry.io>
## DESCRIBE YOUR PR Adds a root-level skip-to-content link and ensures non-DocPage routes have a matching `#main` target. This keeps keyboard users from getting stuck on the home page or 404 page when using the skip link. This replaces fork PR #17479 so the Codeowner assignment workflow can run with same-repo permissions. ## IS YOUR CHANGE URGENT? - [ ] Urgent deadline (GA date, etc.): - [ ] Other deadline: - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you have added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST - [ ] Checked Vercel preview for correctness, including links - [x] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) --------- Co-authored-by: macuzi <lamberto.asghedom@sentry.io>
|
@macuzi I noticed that when you 'skip to content' you skip past the title and description, is that by design? |
3 participants
Add a keyboard-accessible “Skip to content” link that only appears on Tab focus, jumps directly to the main content area, and resets focus on client-side route changes so it remains the first Tab stop after navigation.
SkipToContentclient component insrc/components/skipToContent.tsxglobals.css: hidden by default, slides in on keyboard focususePathnameCleanShot.2026-04-25.at.12.24.40.mp4