From 8df370663c757ba8bfeaa7ca4fb468debb4e660e Mon Sep 17 00:00:00 2001
From: tapheret2 <tapheret2@users.noreply.github.com>
Date: Wed, 15 Jul 2026 12:00:25 +0700
Subject: [PATCH] a11y: focus-visible and skip link for forms/nav

See PR body.
---
 src/App.tsx         |  3 +++
 src/styles/a11y.css | 29 +++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 src/styles/a11y.css

diff --git a/src/App.tsx b/src/App.tsx
index ded79fb..022fa8c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,9 @@ import RequestPage from "./pages/Request";
 
 export default function App() {
   return (
+    <>
+      <a className="skip-link" href="#main">Skip to content</a>
+
     <div className="min-h-screen bg-rock-900 text-white">
       <Navbar />
       <main className="max-w-5xl mx-auto p-6">
diff --git a/src/styles/a11y.css b/src/styles/a11y.css
new file mode 100644
index 0000000..8137531
--- /dev/null
+++ b/src/styles/a11y.css
@@ -0,0 +1,29 @@
+/* Accessibility pass: forms + navigation (GFI) */
+:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+.skip-link {
+  position: absolute;
+  left: -999px;
+  top: 0;
+  background: #fff;
+  color: #000;
+  padding: 8px;
+  z-index: 1000;
+}
+.skip-link:focus {
+  left: 8px;
+}
+nav a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+label {
+  display: inline-block;
+  margin-bottom: 0.25rem;
+}