bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): add skip-to-content link for WCAG keyboard accessibility

Browse Source
This commit is contained in:
saravanakumardb1 2026-03-28 00:46:50 -07:00
parent 926c3b4b12
commit 0db213af1c
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/app/globals.css
View File

@ -215,6 +215,16 @@ button {
border-width: 0; border-width: 0;
} }
/* Skip-to-content link (keyboard accessibility) */
.skip-to-content {
position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999;
}
.skip-to-content:focus {
position: fixed; top: 8px; left: 8px; width: auto; height: auto;
padding: 12px 24px; background: var(--nl-bg-elevated); color: var(--nl-accent);
border: 2px solid var(--nl-accent); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
}
/* Respect user motion preference */ /* Respect user motion preference */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *::before, *::after { *, *::before, *::after {

1
web/src/app/layout.tsx
View File

@ -29,6 +29,7 @@ export default function RootLayout({
return ( return (
<html lang="en" data-theme="dark"> <html lang="en" data-theme="dark">
<body className={`${spaceGrotesk.variable} ${dmSans.variable} ${ibmPlexMono.variable} antialiased`}> <body className={`${spaceGrotesk.variable} ${dmSans.variable} ${ibmPlexMono.variable} antialiased`}>
<a href="#main-content" className="skip-to-content">Skip to content</a>
<Providers>{children}</Providers> <Providers>{children}</Providers>
</body> </body>
</html> </html>