feat: add dark mode and audit viewer-frontend accessibility #59

ilia · 2026-07-14T15:25:09-05:00

ilia commented

2026-07-14 15:25:09 -05:00

Summary

Add next-themes-powered light/dark/system theming with an accessible ThemeToggle in every header (home, upload, admin users, login, register, reset-password).
Add a skip-to-content link and <main id="main-content"> landmarks + correct heading hierarchy (h1) on every top-level route.
Convert custom modal viewers (PhotoViewerClient, PhotoViewer) into real dialogs: role="dialog", aria-modal, focus trap via new useFocusTrap hook.
Add role="alert"/role="status" live regions for errors, success messages, and loading spinners so screen readers announce dynamic content.
Add missing aria-labels to icon-only buttons (close, edit, deactivate, collapse/expand filters).
Fill in missing dark: variants for previously light-only text/border/background colors across search filters, dialogs, and the photo grid.
Tighten header vertical spacing (smaller logo/padding) on the home/upload/admin headers.

Test plan

npx eslint app components hooks --ext .ts,.tsx — no new errors/warnings vs. main (pre-existing any/unused-var issues untouched)
npx tsc --noEmit — clean
npm run build — production build succeeds
Manual smoke test in browser: toggle light/dark on each page, tab through skip link + photo viewer modal focus trap

## Summary - Add `next-themes`-powered light/dark/system theming with an accessible `ThemeToggle` in every header (home, upload, admin users, login, register, reset-password). - Add a skip-to-content link and `<main id="main-content">` landmarks + correct heading hierarchy (h1) on every top-level route. - Convert custom modal viewers (`PhotoViewerClient`, `PhotoViewer`) into real dialogs: `role="dialog"`, `aria-modal`, focus trap via new `useFocusTrap` hook. - Add `role="alert"`/`role="status"` live regions for errors, success messages, and loading spinners so screen readers announce dynamic content. - Add missing `aria-label`s to icon-only buttons (close, edit, deactivate, collapse/expand filters). - Fill in missing `dark:` variants for previously light-only text/border/background colors across search filters, dialogs, and the photo grid. - Tighten header vertical spacing (smaller logo/padding) on the home/upload/admin headers. ## Test plan - [x] `npx eslint app components hooks --ext .ts,.tsx` — no new errors/warnings vs. main (pre-existing `any`/unused-var issues untouched) - [x] `npx tsc --noEmit` — clean - [x] `npm run build` — production build succeeds - [ ] Manual smoke test in browser: toggle light/dark on each page, tab through skip link + photo viewer modal focus trap

ilia added 1 commit 2026-07-14 15:25:09 -05:00

feat: add dark mode and audit viewer-frontend accessibility

CI / skip-ci-check (pull_request) Successful in 4s

Details

CI / docker-ci (pull_request) Successful in 6s

Details

CI / secret-scan (pull_request) Successful in 11s

Details

c011c8078e

Add next-themes light/dark/system theming with an accessible toggle
in every header, and close out an a11y pass across the viewer app:
skip-to-content link, main landmarks and heading hierarchy on every
route, focus-trapped dialog semantics for the photo viewer modals,
aria-label/live-region coverage for dynamic messages and icon
buttons, and dark: variants for previously light-only colors.

ilia merged commit 44f3d696e4 into dev

2026-07-14 15:25:47 -05:00

ilia referenced this issue from a commit

2026-07-14 15:25:49 -05:00

Merge pull request 'feat: add dark mode and audit viewer-frontend accessibility' (#59) from a11y/dark-mode-and-focus-management into dev

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ilia/punimtag#59