Skip to content

fix(a11y): render SkipLink in Layout and add id to main content (#43) - #74

Open
ghzhost wants to merge 1 commit into
StellarSend:mainfrom
ghzhost:fix/layout-skip-link
Open

ghzhost wants to merge 1 commit into
StellarSend:mainfrom
ghzhost:fix/layout-skip-link

Conversation

@ghzhost

@ghzhost ghzhost commented Sep 2, 2026

Copy link
Copy Markdown

Closes #43

Summary of Changes:

  • Render <SkipLink />: Added <SkipLink /> at the very top of src/components/layout/Layout.tsx so keyboard and screen-reader users can skip navigation blocks directly to page content (WCAG 2.4.1).
  • Add #main-content target: Assigned id="main-content", tabIndex={-1}, and outline-none to the <main> element in Layout.tsx, allowing focus and viewport navigation to land on main content when activating the skip link.
  • Test Coverage: Created src/components/layout/Layout.test.tsx verifying that <SkipLink /> is rendered targeting #main-content and that <main id="main-content" tabIndex={-1}> exists in the rendered Layout DOM.

Verification:

  • npm test / vitest run: 28 test suites passed, 114 tests passed.
  • npm run build: production build completed with 0 errors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SkipLink is never rendered anywhere, and its #main-content target doesn't exist even if it were

1 participant