jobtrackingapp/docs/redesign/phase-5/VISUAL_ACCEPTANCE.md

# Phase 5 visual and workflow acceptance

This is a **future evidence protocol**, not rendered design approval. P4-06's [33 screenshots and manual review](../phase-4/p4-06/VISUAL_REVIEW.md) are the starting reference. New captures must use actual running UI and synthetic data; no new screenshot or accessibility pass is claimed by this plan.

## Stable capture dimensions

Use the same seeded records, owner roles, column preferences, fixed reference time/timezone and browser build within before/after comparisons. Fix time only in fixtures, never product behavior. Record actual values in the evidence manifest. Capture a baseline before each slice and an after image after its final code change.

| Viewport ID | CSS viewport | Required use |
|---|---|---|
| D | 1440×900 | All migrated screens, all four theme/locale combinations |
| P | 390×844 | Same four combinations, real mobile interaction pattern |
| N | 320×740 | Minimum reflow, long NB data; each theme and long admin metadata; EN control |
| T | 768×1024 | Table/card and shell boundary, board, dialogs and charts |
| L | 1024×768 | Narrow desktop, editor split, horizontally scrollable data |
| W | 1920×1080 | Page width/line length, Settings control and Dashboard/Jobs/editor |
| B | 767/768 and CV 899/900/1024 widths | Same open draft/focused pane during resize; interaction recording rather than screenshot-only proof |

Theme/locale IDs: `light-en`, `light-nb`, `dark-en`, `dark-nb`. Comfortable default; Jobs/Trash use **both** Comfortable and Compact at D/P, with all-column/selected cases at T/N too. App density must not alter CV document density. Capture long real-looking Norwegian strings with æ/ø/å, raw custom statuses and unknown/null data. No fabricated analytical or employment facts.

Full matrix means the named representative populated screen at D and P in all four combinations, not every application route × every state. Add the state-specific coverage below; record exactly which combinations ran. If a state is not applicable (e.g. density on CV, hover on touch), mark N/A with reason instead of counting it as a pass. Expanded/rail/drawer and selected/focus are separate states. Include 430px/1280px and physical device tests when text/action boundaries justify them.

## Stable evidence sets

| Set / slices | Representative content and required states | Behavioral/manual acceptance |
|---|---|---|
| VS-SHELL — 00/01 | Existing loaded Settings as content control; Dashboard and dirty job/CV for route transitions. Expanded/rail/mobile, standard user/admin, long name/version, active child routes, hover/focus/account menu, auth resolution/error | All destinations reachable, one current child/parent, collapse reload vs mobile labels, open/close/navigate/Cancel focus, no header occlusion, skip/main/heading. Same content/draft survives theme/locale/resize; A data gone on B login |
| VS-UTILITY — 00/02 | Command blank, populated jobs/companies, selected, loading, no-match, failure/Retry; notification unread/empty/loading/error/dismiss; toast open over low page action | Actual command keyboard traversal/IME, focus return/route heading, action vs navigation; no POST from Add until review; late results discarded; read/dismiss is not task completion; toast doesn't obscure interactive content |
| VS-SETTINGS — 00/01/15 control | Retained P4 reading width/long heading/section/actions; open rule draft, notification failure/Retry, open export toast | One h1/section hierarchy, retained independent saves, long heading wrap, connected-account link while toast open. Do not “fix” concurrent SQLite with fixture retries |
| VS-JOBS — 03/04b | 35+ jobs spanning statuses, null applied date, long company/title, saved filters, all columns, row selection/bulk confirm/partial failure, sort/page, both densities; first-use/filtered-empty/loading/error/Retry; Trash restore | Table headers/sort announcement, named checkboxes/actions, selection doesn't open job, job Back restores query/page/focus; title/source/menu actions independent. Phone cards preserve data/actions. No false parity based on only the first 15/25 rows |
| VS-BOARD — 04a/04b | NotApplied/Active/Closed and custom Other, long card; empty/loading/error, drag target, selected exact status menu, failed move, keyboard focus | Keyboard pickup/drop/cancel plus no-drag menu, correct group destination/precise status, Offer remains active, Other non-droppable. Internal scroll reachable, no global clipping; compare identical filtered records only after 04b gate |
| VS-DASHBOARD — 06 | Existing next actions/counts/onboarding, five flags, current pipeline/activity/company/tags; populated/new-user/all-hidden/window-empty, independent summary/trends errors/loading; period/menu/focus | Every old group still reachable/visibility preserved per owner. Values/period/population correct, no scheduled-interview inference, no invented zeros. Chart keyboard values table, useful density, mobile hierarchy |
| VS-ANALYTICS — 07 | Existing report families, 6/12/24 selection, raw/custom statuses, top lists, separate salary currency/period, missing dates; populated/empty/error/loading/focus | Source-filter links correct; all-time/current/window scopes explicit, truncated-list labels and sample denominators; exact values without pointer; no hidden report or extra global-data crawl |
| VS-WORKSPACE — 08a/08b | Long title/status/description, next action; each existing/new section entry, Notes vs answers, saved/dirty AI review, CV attach/detach, upload consent, package draft/frozen/archive, correspondence/interview/checklist. Populated/empty/error/locked/dialog/focus | Seven sections only after package gate, all old aliases, `followMode`, Cancel/Discard, foreign/missing safe, native archive unchanged, explicit send/manual record distinction. Phone progress/sections keyboard accessible; no implicit AI or save on open |
| VS-CV — 09–14 | All five tabs, inherited/custom/omitted content, long sections/items, supported template controls/Advanced, one/multi-page A4/Letter, source/sibling/history, save failure, AI review/locked/error, print/preview and mobile panes | Retain canonical/override scope, undo/history/dirty outcomes, deliberate AI accept/reject, no omitted opacity regression, preview keyboard/fit/scroll/retry, same data after resize. Gate corpus measures preview/PDF dimensions and text, not screenshot aesthetics alone |

CV preview/template concerns remain an explicit rendering gate, not an accepted visual exception. At least defaults for every template plus documented risk-based advanced combinations are required; do not claim exhaustive combinatorial coverage. Native archive screenshots are captured only after actual capture succeeds; P2-D01 failure cannot be replaced with mocked “Submitted” content.

## Cross-screen design acceptance

- **Shell and hierarchy:** primary and secondary navigation are visibly distinct, no missing low-frequency destinations, useful page area remains. Provisional brand can be swapped without rewriting navigation. No new decorative gradient/glass or oversized nested cards.
- **Page header/content:** existing P4 PageHeader/PageSection and reading/data/editor width aliases; one h1, meaningful h2/h3, title 24/30 phone or 28/34 desktop, actions wrap or deliberately disclose. No giant marketing heading or duplicated global/detail title. Settings remains the control for rhythm/width.
- **Surfaces and typography:** semantic canvas/paper/elevated/border/text roles, legible secondary copy, consistent section rhythm and restrained elevation. Use existing Archivo/system stack; no final font/brand choice. User-facing labels localized, dates scoped explicitly. CV paper/template colors are document output, not application light-theme leakage.
- **Lists/tables/status:** same density controls/default, aligned headers/cells/actions, meaningful row hover/selection/focus distinctions. No hidden columns in Compact. Status text/icon plus color, canonical labels translated and custom text preserved. Essential information not hover-only.
- **Forms/tabs/dialogs:** existing named MUI controls/field errors, one modal trap, visible Save/Cancel/error at narrow height, route/draft owner unchanged. Consistent primary/secondary/destructive hierarchy, not a primary-colored button on every card. Tab arrows/selectors preserve active state through resize.
- **Spacing/reflow:** tokens rather than one-off spacing systems. No clipped ordinary actions/labels or body sideways scroll at 320px. Deliberate tables/boards/preview scroll are named, keyboard usable and visually obvious. Focus remains visible after scrolling; don't conceal overflow to pass a body-width check.
- **Charts:** readable explanation, exact values and source/period/sample, legend not color-only. No accessibility dependence on SVG hover. Unknown/no data differs from failure and zero.

## Accessibility evidence, without overclaiming

Use [Phase 3 accessibility targets](../phase-3/ACCESSIBILITY_PLAN.md). Check ordinary text ≥4.5:1, large text/essential boundaries/focus ≥3:1, P4 focus treatment, fine/phone target sizing and non-color status meaning. Scan **loaded, expanded** relevant content with named readiness. Record violations and incomplete rules separately with affected nodes; inspect incomplete contrast/hidden focus/table cases manually. No blanket rule disable or exception for the new design.

Retain P4-06 finite-animation readiness for settled loaded scans; record state, do not disable all animation to obtain screenshots. Inspect at least one normal transition for obscured controls plus reduced-motion behavior. Use fresh pre-axe captures as well as post-scan evidence: historical post-axe NB glyph omissions must not be mistaken for accepted typography. Check screenshot text presence against the DOM; recapture and label unexplained rendering artifacts.

Manually inspect actual rendered pages (not just axe output) and traverse keyboard focus/order/return, semantic landmarks/headings, long forms, chart alternatives and announcements. Record NVDA/Narrator/browser/version and exact primary tasks when available. Test 200%/400% browser zoom, forced colors and increased text spacing, not just small viewport emulation. Physical touch/software keyboard and mobile screen reader remain operator evidence if unavailable. An unavailable check stays a gap; it cannot be declared passed. Shared regressions block propagation to the next screen. A public accessibility claim requires its separate complete manual evidence.

## Artifact and trace protocol

Store each implementation's record under `docs/redesign/phase-5/p5-<id>/` with `README.md`, scoped trace/evidence manifest and `visual/` images as justified. Suggested stable filename:

`VS-JOBS__populated-selected__D__dark-nb__compact.png`

Manifest per image/result: evidence ID, PRES sub-workflow, baseline/implementation SHA, route/query **without tokens/private bodies**, synthetic fixture ID/version, role, viewport, theme/locale/density, state/scroll/focus, browser/OS/timezone, command/test result, actual visual reviewer observation and unresolved limitation. Reference corresponding source screenshot, not an arbitrary mockup. Redact credentials even for synthetic users; don't commit authentication storage or traces containing tokens.

Trace chain: `PRES → original requirement → P5 slice/change commit → behavioral test + result → VS evidence + review`. CSS snapshots/pixel diffs may flag changes, but expected visible redesign requires human before/after judgment. Do not approve screenshots merely because updated snapshots match. Performance/request counts should catch duplicate loads or automatic AI/PDF work after migration; no separate benchmarking platform required.