Phase 5 visual and workflow acceptance

This is a future evidence protocol, not rendered design approval. P4-06's 33 screenshots and manual review 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. 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.

12 KiB Raw Blame History Unescape Escape