a11y: respect prefers-reduced-motion for app animations

Add @media (prefers-reduced-motion: reduce) rule in globals.css that disables animations/transitions globally. Spinner role=status semantics remain intact. Document reduced-motion support in README.

Author: KarenZita01

README.md

@@ -84,6 +84,21 @@ The frontend communicates with the StableRoute API backend.
 | `npm test` | Run Jest tests |
 | `npm run lint` | Next.js ESLint |
 
+## Accessibility
+
+### Reduced Motion
+
+The app respects the user's `prefers-reduced-motion` OS setting. When enabled, all CSS animations and transitions are disabled via a global media query in [`src/app/globals.css`](src/app/globals.css). The loading spinner retains its `role="status"` semantics so screen-reader users still receive feedback.
+
+To test:
+- **Windows:** Settings → Ease of Access → Display → "Show animations in Windows"
+- **macOS:** System Settings → Accessibility → Display → "Reduce motion"
+- **Browser DevTools:** Ctrl+Shift+P → "Show Rendering" → Emulate CSS media feature `prefers-reduced-motion: reduce`
+
+### ARIA Live Regions
+
+Dynamic list updates (loading → loaded / loading → empty) on the pairs, events, api-keys, and webhooks pages are wrapped in `aria-live="polite"` regions so screen-reader users are notified when content arrives. Error messages continue to use `role="alert"` for assertive announcements.
+
 ## CI/CD
 
 On every push/PR to `main`, GitHub Actions runs:

src/app/globals.css

@@ -11,3 +11,13 @@ body {
   color: var(--foreground);
   background: var(--background);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

src/components/__tests__/Spinner.test.tsx

@@ -11,4 +11,10 @@ describe("Spinner", () => {
     render(<Spinner label="Fetching pairs" />);
     expect(screen.getByText(/Fetching pairs/)).toBeInTheDocument();
   });
+  it("still announces its status role even when reduced-motion is active", () => {
+    render(<Spinner />);
+    const status = screen.getByRole("status");
+    expect(status).toBeInTheDocument();
+    expect(status).toHaveTextContent(/Loading/);
+  });
 });