# Done-Test Checks: Front-End and Design

**Check library, version 1.** Rows to lift into the [done-test template](https://mangrove.co.uk/templates/done-test-template.md). Take what applies, delete the rest, and put a number in every threshold.

## The problem this solves

Front-end work is where acceptance goes wrong most often, because the thing everybody actually cares about, whether it looks right, cannot be a done-test row. "Looks right" is not binary and never will be.

**So split it in two. Taste is approved upstream; compliance is tested downstream.** Before the build, someone signs off named design frames. After the build, the check is whether the implementation matches what was signed, at the breakpoints and on the browsers you agreed. Everything below assumes that sign-off happened. If it did not, no set of checks will save the engagement.

## Fidelity

| ID | Check | Evidence | Pass |
|---|---|---|---|
| V1 | Implemented screens match the approved frames at [named file/version] for the breakpoints in V2. Deviations are listed and approved in writing | Side-by-side walkthrough | |
| V2 | Renders correctly at [list breakpoints, e.g. 360, 768, 1024, 1440], with no horizontal scroll at any of them | Live at each width | |
| V3 | Supported browsers: [list, with oldest version]. Primary journey completes on each | Live on each | |
| V4 | Design tokens (colour, type scale, spacing) come from [named source]; no hard-coded values outside it | Code walkthrough | |

## Accessibility

Not optional, and cheap to specify. It is expensive only when retrofitted.

| ID | Check | Evidence | Pass |
|---|---|---|---|
| X1 | WCAG 2.2 AA on the primary journey, zero critical or serious automated findings | axe or equivalent output | |
| X2 | Primary journey completable using the keyboard alone, with a visible focus indicator at every step | Live keyboard walkthrough | |
| X3 | Screen reader announces form labels, errors and dynamic updates on the primary journey | Live with [named reader] | |
| X4 | Text contrast meets AA, and the interface remains usable at 200% zoom | Audit output + live | |
| X5 | Motion respects reduced-motion preferences | Live with the setting on | |

## Performance

| ID | Check | Evidence | Pass |
|---|---|---|---|
| W1 | On [named page] at [network profile, e.g. 4G throttled]: LCP under [N]s, CLS under [N], INP under [N]ms | Lighthouse or field data | |
| W2 | Initial JavaScript payload at or under [N]kb compressed for [named route] | Build output | |
| W3 | Images served responsively, correctly sized, and lazy-loaded below the fold | Network panel walkthrough | |

## Behaviour

The states that get skipped in a demo built on perfect data.

| ID | Check | Evidence | Pass |
|---|---|---|---|
| B1 | Every asynchronous surface has a defined loading state, empty state and error state, and each is reachable in the demo | Live walkthrough of all three | |
| B2 | Form validation messages are specific, appear next to the field, and survive a failed submit without losing entered data | Live | |
| B3 | The application behaves correctly on slow and interrupted connections: no duplicate submissions, no silent failures | Live with throttling | |
| B4 | Content that can be long or missing ([names, titles, lists]) renders without breaking layout | Live with edge-case data | |