# Accessibility, responsiveness and motion contract

Target: WCAG 2.2 AA; this build is not certified. Preserve visible focus, labels, status text and keyboard support when adapting to a framework. Test actual assistive technology before production.

| Pattern | Keyboard / focus |
|---|---|
| Native buttons, fields, checkboxes/radios | Native Tab, Space, Enter and arrow behaviour |
| Tabs | Left/right, Home/End; one tab in the Tab order; labelled active panel |
| Supplier combobox | Input retains focus; arrows update active descendant; Enter chooses; Escape closes; no results is explicit |
| Action menu | Open focuses first item; arrows/Home/End move; Escape returns trigger; Tab exits |
| Modal/drawer | Native showModal makes background inert; visible close; Escape; focus returns to captured trigger |
| Tooltip | Hover and focus show; Escape dismisses; essential instructions remain visible elsewhere |
| Resizable column | Focusable separator; arrows change 10 px; min 140 / max 420; current width exposed |
| Wizard | Required fields validated before proceeding; back preserves entries |
| Inline editing | Enter saves; Escape cancels; focus returns to Edit |
| Wide table | Horizontal scrolling preserves column structure and semantics |

Motion: 140 ms controls, 180 ms content, 220 ms dialogs. Only opacity/transform for entry effects. Skeleton pulse is finite and labelled. OS reduced-motion or the explicit preference disables animation/transitions. Success/failure remains understandable with no motion. Never animate financial totals to imply changing value.

Layout: 256 px desktop sidebar with 64 px fixed header. At narrower widths use the compact navigation; on mobile navigation becomes a row and two-column forms stack. Tables keep horizontal scroll instead of shrinking text. Important actions must remain reachable at 200% zoom and with touch.

Colour and state: semantic badges contain text; charts include descriptions; selected and disabled state use more than colour. Focus rings are explicit. Disabled controls explain their dependency. Field errors preserve values. Do not make empty, loading and failed states look identical.

Production checks still needed: screen readers; full keyboard traversal; actual OS reduced-motion preference; forced-colours; text/non-text contrast across all overrides; 200–400% zoom; long translated labels; iOS/Android; browser print; real server failures and authorisation. Automated example checks do not replace these.