Skip to content

Commit 12b82b9

Browse files
committed
a11y: Add skip to main content link for keyboard navigation
This adds a skip navigation link that allows keyboard users to bypass the navigation and jump directly to the main content. The link is visually hidden by default but becomes visible when focused. This addresses WCAG 2.4.1 (Level A) - Bypass Blocks. Related to #8360
1 parent 40ea071 commit 12b82b9

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

src/components/Layout/Page.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,12 @@ export function Page({
148148
routeTree={routeTree}
149149
breadcrumbs={breadcrumbs}
150150
/>
151+
{/* Skip to main content link for accessibility */}
152+
<a
153+
href="#main-content"
154+
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:dark:bg-gray-900 focus:text-primary focus:dark:text-primary-dark focus:p-3 focus:rounded focus:border focus:border-border focus:dark:border-border-dark">
155+
Skip to main content
156+
</a>
151157
<div
152158
className={cn(
153159
hasColumns &&
@@ -166,7 +172,7 @@ export function Page({
166172
)}
167173
{/* No fallback UI so need to be careful not to suspend directly inside. */}
168174
<Suspense fallback={null}>
169-
<main className="min-w-0 isolate">
175+
<main id="main-content" className="min-w-0 isolate">
170176
<article
171177
className="font-normal break-words text-primary dark:text-primary-dark"
172178
key={asPath}>

0 commit comments

Comments
 (0)