docs(roadmap): record mobile accessibility audit

This commit is contained in:
Saravana Achu Mac 2026-05-05 10:30:14 -07:00
parent f9903fec7c
commit f692a94d25

View File

@ -157,7 +157,7 @@ Goal: remove local visual drift and meet interaction accessibility expectations.
- [x] **P4.1** Replace web hardcoded hex/RGBA colors and token fallbacks in `web/src/app` and `web/src/components` with `--nl-*` tokens or shared component primitives. Commit: `6ede2be`; Verified: `rg -n "#[0-9a-fA-F]{3,8}|rgba?\\(|var\\(--nl-[^)]+," web/src/app web/src/components --glob '!**/*.test.*'` returned no matches; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run test`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run typecheck` after building linked `@bytelyst/billing-client`; `git diff --check`. Added semantic CSS token aliases for overlays, translucent surfaces, muted accent/status backgrounds, and command shadows, then replaced app/component hex, RGB/RGBA, and `--nl-*` fallback values with tokens.
- [x] **P4.2** Replace mobile hardcoded colors in screens and label mappings with `NoteLettTheme`, token-derived values, or named semantic mappings. Commit: `6bbbac8`; Verified: `rg -n "#[0-9a-fA-F]{3,8}|rgba?\\(" mobile/src --glob '!**/*.test.*'` returned no matches; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/mobile run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/mobile run test`; `git diff --check`. Added token-derived `colors.onAccent` and `colors.overlayBackdrop`, replaced white button text and modal overlay literals, and moved intake content-type badge colors to semantic theme mappings.
- [x] **P4.3** Audit web interactive elements for visible text or `aria-label`, including icon buttons, modals, editor controls, review actions, prompt actions, and settings. Commit: `01c2d31`; Verified: `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/web run test`; `rg -n "<button[^>]*>\\s*(&times;|✕|×|<X|<Menu|<Chevron|<Search|<Trash|<Share|<More)" web/src/app web/src/components --glob '!**/*.test.*'` now only reports the survey dismiss button, which has `aria-label="Dismiss survey"`; `git diff --check`. Added explicit accessible names for survey controls, editor toolbar and dismiss controls, note/workspace/link modals, settings form controls, artifact controls, and task review description.
- [ ] **P4.4** Audit mobile pressables/buttons for accessibility labels, roles, disabled states, and Dynamic Type tolerance. Commit:
- [x] **P4.4** Audit mobile pressables/buttons for accessibility labels, roles, disabled states, and Dynamic Type tolerance. Commit: `f9903fe`; Verified: `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/mobile run typecheck`; `GITEA_NPM_TOKEN=dummy pnpm --filter @notelett/mobile run test`; TypeScript AST audit confirmed `Pressable`/`TouchableOpacity` controls use labels and button roles, disabled controls expose disabled state, and `TextInput` fields are labeled; `git diff --check`. Added shared mobile accessibility helpers, applied accessible role/label/state coverage across auth, capture, intake, inbox, settings, note detail, prompt result, broadcast, and survey surfaces, and capped dense control text scaling while allowing content text to continue scaling.
- [ ] **P4.5** Replace custom web buttons/cards/badges with `@bytelyst/ui` or `@bytelyst/dashboard-components` where the shared component is appropriate. Keep notes editor-specific UI local. Commit:
- [ ] **P4.6** Run visual checks for desktop and mobile web widths. Fix overlapping text, unstable toolbar dimensions, nested cards, or clipped controls. Commit: