Skip to content

Commit 8df3706

Browse files
committed
a11y: focus-visible and skip link for forms/nav
See PR body.
1 parent ad3bf94 commit 8df3706

2 files changed

Lines changed: 32 additions & 0 deletions

File tree

src/App.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import RequestPage from "./pages/Request";
66

77
export default function App() {
88
return (
9+
<>
10+
<a className="skip-link" href="#main">Skip to content</a>
11+
912
<div className="min-h-screen bg-rock-900 text-white">
1013
<Navbar />
1114
<main className="max-w-5xl mx-auto p-6">

src/styles/a11y.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/* Accessibility pass: forms + navigation (GFI) */
2+
:focus-visible {
3+
outline: 2px solid #2563eb;
4+
outline-offset: 2px;
5+
}
6+
.skip-link {
7+
position: absolute;
8+
left: -999px;
9+
top: 0;
10+
background: #fff;
11+
color: #000;
12+
padding: 8px;
13+
z-index: 1000;
14+
}
15+
.skip-link:focus {
16+
left: 8px;
17+
}
18+
nav a:focus-visible,
19+
button:focus-visible,
20+
input:focus-visible,
21+
select:focus-visible,
22+
textarea:focus-visible {
23+
outline: 2px solid #2563eb;
24+
outline-offset: 2px;
25+
}
26+
label {
27+
display: inline-block;
28+
margin-bottom: 0.25rem;
29+
}

0 commit comments

Comments
 (0)