feat: respect prefers-reduced-motion for animations and transitions (#940)

.agents/quality.md

@@ -25,17 +25,17 @@ Tracks code quality per domain. Updated by automations as a side effect of featu
 | Feedback | A | Feedback form with screenshot capture. API route with integration tests (15 tests). Feedback form design spec tests (5 tests). Screenshot hook unit tests (2 tests). |
 | App Shell | A | Collapsible sidebar (desktop: aside, mobile: Sheet), sidebar context with ⌘+\ shortcut, workspace switcher, page tree, user menu with sign-out, focus mode hint, theme toggle, skip-to-content accessibility link. Clean component decomposition. Sidebar context unit tests (21 tests): state management, keyboard shortcut registration, toggle behavior, focus mode, mobile close-on-navigate. Loading skeleton tests (25 tests): app (4), workspace (5), page (6), settings (5), settings members (5). Error boundary tests (22 tests): route-error component (6), workspace error (4), page error (4), settings error (4), settings members error (4). Focus mode hint design spec tests (3 tests). Workspace home design spec tests (5 tests). E2E specs: sidebar responsive (4 tests), theme toggle (4 tests), skip-to-content (2 tests), not-found pages (3 tests), public routes (18 tests). |
 | API Routes | A | Health endpoint (DB connectivity check, 7 tests), search endpoint (full-text search, 14 tests), account deletion endpoint (6 tests), trash purge cron endpoint (8 tests), page versions endpoints (22 tests), and feedback endpoint (17 tests). All routes use `captureApiError` for transient network error classification. Search route uses `retryOnNetworkError` for transient failure resilience. All have integration tests with mocked Supabase. Account deletion E2E spec (4 tests). |
-| UI Components | A | 16 shadcn/ui components (base-nova style): alert-dialog, badge, button, card, checkbox, context-menu, dialog, dropdown-menu, input, label, select, separator, sheet, table, textarea, tooltip. Overlay opacity regression test (2 tests). Toast error duration regression test (1 test). Dialog design spec test (3 tests). Global design-spec compliance checks (6 tests): rounded corners, hex/RGB/HSL colors, font-family, arbitrary spacing. Design tokens use oklch color space, --radius: 0 for sharp corners. Visual regression E2E spec (1 test). |
+| UI Components | A | 16 shadcn/ui components (base-nova style): alert-dialog, badge, button, card, checkbox, context-menu, dialog, dropdown-menu, input, label, select, separator, sheet, table, textarea, tooltip. Overlay opacity regression test (2 tests). Toast error duration regression test (1 test). Dialog design spec test (3 tests). Global design-spec compliance checks (6 tests): rounded corners, hex/RGB/HSL colors, font-family, arbitrary spacing. Reduced-motion accessibility test (6 tests): verifies prefers-reduced-motion media query in globals.css. Design tokens use oklch color space, --radius: 0 for sharp corners. Visual regression E2E spec (1 test). |
 | Database | A | Database CRUD, table/board/gallery/calendar/list views, inline database, row detail pages, property types (text, number, select, multi-select, date, checkbox, URL, person, formula, email, phone, files, status, computed, relation), filter engine, filter/sort toolbar, formula parser/evaluator, column drag-and-drop reorder, table keyboard navigation, calendar keyboard navigation, CSV export, database duplication, bulk row selection and delete, mobile-responsive layouts. 56 Vitest files (1034 tests): CRUD utilities (55), column helpers (65), database duplicate (11), filter engine (54), formula parser/evaluator (80), CSV export (38), property type picker (14), property type picker completeness (5), table view value format (33), table defaults (27), table cell (40), database page width (3), database view client (6), filter bar (20), filter value editor (34), sort menu (19), rename property dialog (14), row properties header (17), view tabs (24), 5 hooks (use-database-filters 18, use-database-properties 20, use-database-rows 23, use-database-views 24, use-row-selection 10), 14 property type tests (checkbox 8, computed 15, date 12, email 8, files 11, formula 6, multi-select 10, number 14, person 9, phone 10, relation 12, select 11, select-dropdown 32, status 14, text 10, url 10), 11 view tests (board-view-helpers 18, board-view 13, calendar-keyboard 25, calendar-view-helpers 35, calendar-view 15, database-empty-state 14, gallery-view 17, list-keyboard 14, list-view 22, row-count-announcer 7, row-count-status-bar 5), 6 design spec tests: formula (2), person skeleton (1), calendar view (1), gallery view (3), filter/sort toolbar (2). 29 E2E specs: database CRUD (10), database duplicate (2), database duplicate row (3), bulk select (7), add property types (10), board view (4), board keyboard (6), calendar view (4), calendar keyboard (7), column reorder (3), CSV export (3), error recovery (4), files (4), filter keyboard (6), filter types (4), formula (3), gallery view (4), gallery keyboard (5), inline database (4), list view (4), list keyboard (6), relation (3), row page (7), search (2), select options (6), table editor portal (3), table keyboard (6), view config (4), views (10) — 144 E2E tests total. |
 | Realtime | - | Deferred to post-MVP per architecture decision. |
 
 ## Test Coverage Summary
 
 | Category | Files | Tests |
 |---|---|---|
-| Unit/Integration (Vitest) | 132 | 1808 |
+| Unit/Integration (Vitest) | 133 | 1818 |
 | E2E (Playwright) | 69 | 340 |
-| **Total** | **201** | **2148** |
+| **Total** | **202** | **2158** |
 
 ### Test files by domain
 
@@ -50,7 +50,7 @@ Tracks code quality per domain. Updated by automations as a side effect of featu
 - **Members**: `invite-form.test.ts` (4 tests), `member-list.test.tsx` (14 tests), `pending-invite-list.test.tsx` (8 tests), `role-select.test.tsx` (8 tests), `e2e/members.spec.ts` (7 tests)
 - **Feedback**: `feedback/route.test.ts` (17 tests), `feedback-form-design-spec.test.ts` (5 tests), `use-screenshot.test.ts` (2 tests)
 - **API**: `health/route.test.ts` (7 tests), `search/route.test.ts` (14 tests), `account/route.test.ts` (6 tests), `cron/purge-trash/route.test.ts` (8 tests), `feedback/route.test.ts` (17 tests), `pages/[pageId]/versions/route.test.ts` (11 tests), `pages/[pageId]/versions/[versionId]/route.test.ts` (11 tests), `e2e/account-deletion.spec.ts` (4 tests)
-- **UI**: `overlay-opacity.test.ts` (2 tests), `toast-error-duration.test.ts` (1 test), `dialog-design-spec.test.ts` (3 tests), `design-spec-compliance.test.ts` (6 tests), `relative-time.test.ts` (7 tests), `e2e/visual-regression.spec.ts` (1 test)
+- **UI**: `overlay-opacity.test.ts` (2 tests), `toast-error-duration.test.ts` (1 test), `dialog-design-spec.test.ts` (3 tests), `design-spec-compliance.test.ts` (6 tests), `relative-time.test.ts` (7 tests), `reduced-motion.test.ts` (6 tests), `e2e/visual-regression.spec.ts` (1 test)
 - **Lib**: `sentry.test.ts` (4 tests), `sentry.unit.test.ts` (149 tests), `retry.test.ts` (9 tests), `track-event-server.test.ts` (6 tests), `track-event.test.ts` (4 tests), `usage-tracking-guard.test.ts` (5 tests)
 - **Infrastructure**: `migrations.test.ts` (33 tests), `build-timeseries.test.mjs` (6 tests), `supabase/client.test.ts` (7 tests)
 
@@ -110,5 +110,6 @@ Tracks code quality per domain. Updated by automations as a side effect of featu
 | 2026-05-07 | E2E test request browser context fallback (#931). Updated `sentry.unit.test.ts` (108→149 tests): added 4 regression tests for browser context fallback in `isE2ETestRequest`. Test totals: 131 Vitest files (1795 tests), 69 E2E specs (340 tests). |
 | 2026-05-07 | Client-side Supabase cookie null-safety (#933). Added null guard to `createBrowserClient` cookie options in `client.ts`, matching server-side pattern. Added 1 new Vitest file: `supabase/client.test.ts` (7 tests). Test totals: 132 Vitest files (1802 tests), 69 E2E specs (340 tests). |
 | 2026-05-07 | Transient fetch retry on search RPC (#937). Extended `retryOnNetworkError` to handle thrown transient errors. Wrapped search route RPC call with retry. Updated 2 files with grown counts: `search/route.test.ts` (11→14), `retry.test.ts` (6→9). Test totals: 132 Vitest files (1808 tests), 69 E2E specs (340 tests). |
+| 2026-05-07 | Prefers-reduced-motion accessibility (#940). Added `@media (prefers-reduced-motion: reduce)` rule to `globals.css`. Added 1 new Vitest file: `reduced-motion.test.ts` (6 tests). Test totals: 133 Vitest files (1818 tests), 69 E2E specs (340 tests). |
 
 

src/app/globals.css

@@ -229,6 +229,22 @@
   }
 }
 
+/*
+ * Reduced motion: disable or shorten animations and transitions for users
+ * who prefer reduced motion (WCAG 2.1 SC 2.3.3). Uses 0.01ms instead of 0s
+ * to avoid breaking JS animationend/transitionend event listeners.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /*
  * Lexical checklist checkbox rendering.
  * Lexical's CheckListPlugin expects ::before pseudo-elements to render checkboxes.

src/app/reduced-motion.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+/**
+ * Structural test: verifies the prefers-reduced-motion media query is present
+ * in globals.css with the required properties (WCAG 2.1 SC 2.3.3).
+ */
+describe("prefers-reduced-motion media query", () => {
+  const css = readFileSync(resolve(__dirname, "./globals.css"), "utf-8");
+
+  it("includes @media (prefers-reduced-motion: reduce) rule", () => {
+    expect(css).toContain(
+      "@media (prefers-reduced-motion: reduce)"
+    );
+  });
+
+  it("targets all elements including pseudo-elements", () => {
+    expect(css).toContain("*::before");
+    expect(css).toContain("*::after");
+  });
+
+  it("sets animation-duration to near-zero with !important", () => {
+    expect(css).toMatch(/animation-duration:\s*0\.01ms\s*!important/);
+  });
+
+  it("limits animation-iteration-count to 1 with !important", () => {
+    expect(css).toMatch(/animation-iteration-count:\s*1\s*!important/);
+  });
+
+  it("sets transition-duration to near-zero with !important", () => {
+    expect(css).toMatch(/transition-duration:\s*0\.01ms\s*!important/);
+  });
+
+  it("disables smooth scroll-behavior with !important", () => {
+    expect(css).toMatch(/scroll-behavior:\s*auto\s*!important/);
+  });
+});