ilia/punimtag
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Merged
ilia merged 1 commits from a11y/dark-mode-and-focus-management into dev 2026-07-14 15:25:47 -05:00
Conversation 0 Commits 1 Files Changed 32
+371 -146
ilia commented 2026-07-14 15:25:09 -05:00
Owner
Copy Link
Copy Source

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
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
ira (Ira) noam tanyar09 ilia (Ilia)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ilia/punimtag#59