feat: consolidate legacy agency routes and add design token baseline

Author: brianfunk

docs/ACCESSIBILITY_TRACKER.md

@@ -12,3 +12,24 @@ Accessibility work is tracked in `/docs/plan/M07-ux-accessibility-and-design-sys
 
 - Manual keyboard/screen reader checks for core flows.
 - Automated checks in CI where available.
+
+## Verification Checklist (WCAG 2.1 AA)
+
+- Public docket browse/search:
+  - Keyboard-only navigation across filters, results, pagination.
+  - Visible focus indicator on all interactive controls.
+  - Search and filter inputs have programmatic labels.
+- Public comment submission:
+  - Step flow is operable by keyboard only.
+  - Error messages are announced and associated with fields.
+  - Required field requirements are conveyed in text (not color-only).
+- Agency docket operations:
+  - Docket list table headers expose valid `aria-sort` semantics.
+  - Create/edit docket forms have explicit labels and error text.
+- Moderation and admin:
+  - Role/actions are accessible without pointer-only interaction.
+  - Confirmation/destructive actions are not color-only.
+- Global:
+  - Contrast checks for text and interactive controls.
+  - Heading structure is sequential.
+  - Landmark regions (`header`, `main`, `footer`, nav) are present.

docs/plan/M07-ux-accessibility-and-design-system.md

@@ -14,10 +14,10 @@ Consolidate UX architecture and enforce accessible, coherent UI patterns.
 
 ## Implementation checklist
 
-- [ ] Consolidate overlapping route/page variants.
-- [ ] Define design token and component usage standard.
+- [x] Consolidate overlapping route/page variants.
+- [x] Define design token and component usage standard.
 - [ ] Remove critical "coming soon" production placeholders.
-- [ ] Add accessibility verification checklist.
+- [x] Add accessibility verification checklist.
 
 ## Acceptance criteria
 
@@ -35,3 +35,6 @@ Consolidate UX architecture and enforce accessible, coherent UI patterns.
 ## Progress log (append-only)
 
 - 2026-02-11: Duplicate route inventory captured during baseline analysis.
+- 2026-02-11: Consolidated legacy route variants in `src/App.tsx` by redirecting deprecated agency paths (`/agency-login`, `/agency-dashboard`, `/agency/threads*`) to canonical routes.
+- 2026-02-11: Added baseline design tokens and surface styling in `src/index.css` and applied to shared layouts (`PublicLayout`, `AdminLayout`, root app shell).
+- 2026-02-11: Expanded `docs/ACCESSIBILITY_TRACKER.md` with a concrete WCAG 2.1 AA verification checklist for primary public and agency workflows.

docs/plan/README.md

@@ -38,6 +38,6 @@ This folder tracks implementation progress for the OpenComments production roadm
 - `M04`: In progress
 - `M05`: Completed
 - `M06`: Completed
-- `M07`: Planned
+- `M07`: In progress
 - `M08`: Completed
 - `M09`: Planned

src/App.tsx

@@ -15,9 +15,7 @@ import Privacy from './pages/Privacy';
 import Terms from './pages/Terms';
 import Accessibility from './pages/Accessibility';
 import PublicLogin from './pages/PublicLogin';
-import AgencyLogin from './pages/AgencyLogin';
 import PublicDashboard from './pages/PublicDashboard';
-import AgencyDashboard from './pages/AgencyDashboard';
 import AgencyLoginNew from './pages/agency/AgencyLogin';
 import AgencySelect from './pages/agency/AgencySelect';
 import AgencyNoAccess from './pages/agency/AgencyNoAccess';
@@ -56,7 +54,7 @@ function App() {
         <Router>
           <Routes>
             <Route path="/" element={
-              <div className="min-h-screen bg-white font-sans">
+              <div className="min-h-screen oc-surface">
                 <SecurityBanner />
                 <Header />
                 <main>
@@ -93,18 +91,14 @@ function App() {
             <Route path="/comments/:id" element={<CommentDetail />} />
             <Route path="/search" element={<Navigate to="/comments/search" replace />} />
             <Route path="/login" element={<PublicLogin />} />
-            <Route path="/agency-login" element={<AgencyLogin />} />
+            <Route path="/agency-login" element={<Navigate to="/agency/login" replace />} />
             <Route path="/unauthorized" element={<Unauthorized />} />
             <Route path="/dashboard" element={
               <ProtectedRoute requiredRole="public">
                 <PublicDashboard />
               </ProtectedRoute>
             } />
-            <Route path="/agency-dashboard" element={
-              <ProtectedRoute requiredRole="agency">
-                <AgencyDashboard />
-              </ProtectedRoute>
-            } />
+            <Route path="/agency-dashboard" element={<Navigate to="/agency/dashboard" replace />} />
 
             {/* New Agency Admin Routes */}
             <Route path="/agency/login" element={<AgencyLoginNew />} />
@@ -116,16 +110,8 @@ function App() {
                 <AgencyDashboardNew />
               </AgencyProtectedRoute>
             } />
-            <Route path="/agency/threads" element={
-              <AgencyProtectedRoute>
-                <DocketList />
-              </AgencyProtectedRoute>
-            } />
-            <Route path="/agency/threads/new" element={
-              <AgencyProtectedRoute>
-                <DocketWizard />
-              </AgencyProtectedRoute>
-            } />
+            <Route path="/agency/threads" element={<Navigate to="/agency/dockets" replace />} />
+            <Route path="/agency/threads/new" element={<Navigate to="/agency/dockets/new" replace />} />
             <Route path="/agency/dockets" element={
               <AgencyProtectedRoute>
                 <DocketList />

src/components/AdminLayout.tsx

@@ -173,7 +173,7 @@ const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen oc-admin-surface">
       {/* Mobile sidebar overlay */}
       {sidebarOpen && (
         <div 
@@ -233,7 +233,7 @@ const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
       {/* Main content */}
       <div className="lg:pl-64">
         {/* Top bar */}
-        <header className="bg-blue-700 shadow-sm">
+        <header className="shadow-sm" style={{ backgroundColor: 'var(--oc-primary-strong)' }}>
           <div className="px-4 sm:px-6 lg:px-8">
             <div className="flex items-center justify-between h-16">
               {/* Mobile menu button */}
@@ -312,4 +312,4 @@ const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
   )
 }
 
-export default AdminLayout
+export default AdminLayout

src/components/PublicLayout.tsx

@@ -30,7 +30,7 @@ const PublicLayout: React.FC<PublicLayoutProps> = ({
   }, [title, description])
 
   return (
-    <div className="min-h-screen bg-white font-sans">
+    <div className="min-h-screen oc-surface">
       <SecurityBanner />
       <Header />
       <main className="min-h-screen">
@@ -42,4 +42,4 @@ const PublicLayout: React.FC<PublicLayoutProps> = ({
 }
 
 
-export default PublicLayout
+export default PublicLayout

src/index.css

@@ -1,3 +1,63 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --oc-bg: #f4f6f8;
+  --oc-surface: #ffffff;
+  --oc-surface-muted: #f8fafc;
+  --oc-text: #102a43;
+  --oc-text-muted: #486581;
+  --oc-primary: #005ea2;
+  --oc-primary-strong: #1a4480;
+  --oc-border: #d9e2ec;
+  --oc-focus: #2491ff;
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: "Public Sans", "Source Sans 3", sans-serif;
+  color: var(--oc-text);
+  background:
+    radial-gradient(circle at 0% 0%, #e7f1ff 0%, rgba(231, 241, 255, 0) 40%),
+    radial-gradient(circle at 100% 100%, #f0f9ff 0%, rgba(240, 249, 255, 0) 38%),
+    var(--oc-bg);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Merriweather", Georgia, serif;
+}
+
+.oc-surface {
+  background-color: var(--oc-bg);
+  color: var(--oc-text);
+}
+
+.oc-admin-surface {
+  background-color: #eef2f7;
+}
+
+.oc-panel {
+  background: var(--oc-surface);
+  border: 1px solid var(--oc-border);
+  border-radius: 0.75rem;
+}
+
+.oc-link-accent {
+  color: var(--oc-primary);
+}
+
+.oc-link-accent:hover {
+  color: var(--oc-primary-strong);
+}