bytelyst/learning_ai_clock
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:47:03 -07:00
parent 2d0a47be92
commit c2db021568
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

@ -186,6 +186,16 @@ body {
outline-offset: 2px; outline-offset: 2px;
} }
/* 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(--cm-surface-elevated); color: var(--cm-accent);
border: 2px solid var(--cm-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

@ -55,6 +55,7 @@ export default function RootLayout({
<body <body
className={`${inter.variable} ${jetbrainsMono.variable} antialiased`} className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}
> >
<a href="#main-content" className="skip-to-content">Skip to content</a>
<Providers> <Providers>
{children} {children}
<ToastContainer /> <ToastContainer />