# Phase 12.2 — UI Review

**Audited:** 2026-10-02
**Baseline:** `12.2-UI-SPEC.md` (approved)
**Screenshots:** Not captured — no live admin session was driven in this pass
**Interaction captures:** off

---

## Scope Decision

UI audit of the three new controls (`DatepickerField`, `FileuploadField`, relation child/pivot modals) against the existing Direction C system. No new tokens. This pass used the committed SPA tests and a code read of the review-fix commit `516f9c9`; it did not open a browser.

---

## Pillar Scores

| Pillar | Score | Finding |
|--------|-------|---------|
| 1. Copywriting | 4 | All new strings go through `t` / phrasebook keys. No new literal UI copy in the review-fix commit. |
| 2. Visuals | 3 | Components reuse Button, FormGrid, ConfirmDialog, Reka DatePicker/Dialog/Progress. Visual fit of the calendar popover and file tiles is a human check. |
| 3. Color | 4 | Danger/soft/skel/muted tokens only; no new palette. |
| 4. Typography | 4 | DM Sans / tabular-nums for dates, times, sizes as specified. |
| 5. Spacing | 4 | Existing control heights and 4px scale; no new spacing tokens. |
| 6. Experience Design | 4 | Save blocked while uploads are in flight (CR-01). Abort deletes a stored file (CR-02). Reorder keeps the latest snapshot (WR-03). Dirty includes active uploads. |

**Overall: 4** — automated backstops pass; browser visual UAT still required.

---

## UI-SPEC backstops

| Backstop | Automated evidence | Status |
|----------|--------------------|--------|
| Esc returns focus; disabled day cannot be selected | `admin/tests/form/DatepickerField.test.ts` | pass |
| Datetime local wall clock / UTC emit; ignoreTimezone | `admin/tests/app/dateFormat.test.ts` | pass |
| Protected thumbs use X-Session-Key, object URL, revoke | `admin/tests/form/FileuploadField.test.ts` | pass |
| Keyboard reorder, focus, announce, one request | `admin/tests/form/FileuploadField.test.ts` | pass |

---

## Priority Fixes

None blocking. Human items live in `12.2-UAT.md`.

## Files Audited

- `admin/src/views/FormView.vue`
- `admin/src/components/form/fields/FileuploadField.vue`
- `admin/src/components/form/fields/DatepickerField.vue` (via tests)
- `admin/src/components/form/formContext.ts`
- `admin/src/components/relation/RelationChildModal.vue`
- `admin/src/app/dateFormat.ts`
- `admin/tests/form/FileuploadField.test.ts`
- `admin/tests/app/dateFormat.test.ts`
- `admin/tests/smoke/deferred.smoke.test.ts`