06 / States & behavior
States & behavior
Input, feedback, motion, and responsive transformations
Behavior inventory
| Pattern | Observed states | Evidence boundary |
|---|---|---|
| ASCII landscape runtime | default; reduced motion | Source-derived homepage canvas with ambient animation, pointer response, and a reduced-motion still frame. Other specimens retain the static export. / · /company-data · /refer · /documents |
| Lead capture form | empty form; unchecked optional consent; collapsed tool picker | Source default observed; submit outcomes are local fixtures |
| Document upload | empty upload area; shared-link inputs; rights unchecked | Source default observed; no production upload attempted |
| Sortable benchmark table | default table; sort affordance | Production content observed; local sort uses explicit fixture data |
| Long-form editorial | default reading; mobile wrapping | Observed |
| Marketing CTA | announcement; outlined reach-out action | Observed source action; local contact dialog is an explicitly labelled safety adaptation / · /company-data · /refer |
| Back-to-parent navigation | Back link | Observed; destinations adapted to static reference /company-data · /refer · /documents · /about · /terms |
| Section-anchor navigation | report section navigation | Observed |
| Long-form legal text | long document; mobile wrapping | Observed public text; not legal guidance |
| Segmented count choice | 1k / 10k / 100k choices | Source choice group observed; local estimate is a fixture |
| Metric toggle | Language-specific WER / CER labels | Source units observed; local results explicitly labelled |
| Chart selector | native chart select | Source selector observed; local chart state reconstructed |
| Privacy contact | Contact and policy reading | Observed public links; no contact initiated |
| Responsive desktop/mobile layout | 390 / 768 / 1440 / 1920 layouts | Measured production widths; local reflow also checked at 320px / · /company-data · /refer · /benchmarks · /benchmarks/speech-to-text · /benchmarks/real-swe · /documents · /about · /privacy · /terms |
Forms are local fixtures
Do not send real company data, documents, contact information, or consent records through this reference. Field values live only in the current page. Reloading clears them. The examples replace network mutation with deterministic status messages.
| Transition | Trigger and output | Focus / recovery |
|---|---|---|
| Empty → invalid | Submit without required fields. Keep entered values; show field-specific guidance and aria-invalid. | Move focus to the first invalid field or error summary. Correcting the field clears its own error. |
| Closed → tool picker open | Click or activate the trigger. aria-expanded becomes true; choices appear. | Checkboxes use Space. Escape closes; return focus to trigger. Selection persists until page reset. |
| Unchecked → consent checked | Native checkbox, independent from form success. Optional measurement consent is not a prerequisite. | Use a visible label. Never precheck consent or merge permission with marketing. |
| Valid → loading → success | Local fixture only. Guard duplicate activation and announce the result in role=status. | No false “sent” claim. Explain that no data left the browser. |
| Network error → retry | Fixture simulates a failed operation without deleting values. | Error describes what was preserved and offers a retry. Do not promise production recovery semantics. |
| File absent → local selection | Only synthetic test files. Names may be shown locally, never uploaded. | File input has a keyboard route; drop gesture is an optional alternative. Clear selection is available. |
| Metric changed → chart/table updated | Native select or labeled button controls the current metric. | Expose units and direction; keep a table alternative. Announce the selected measure. |
Responsive transformations
| Width | Public source | Local verification |
|---|---|---|
| 390 px | 20 px gutters; compact title and action text; single-column lead form | No document horizontal overflow. Labels wrap; focus remains visible. |
| 640 px | Source small breakpoint changes gutters, text, and paired fields | Fields remain in source order. Reading width does not depend on a fixed viewport. |
| 768 px | Medium capture; 768 px outer reading container has 48 px side insets | Full recipes remain navigable without hover. |
| 1024 px | Lead pages become a split editorial-and-form grid | Form width and maximum readable copy remain bounded. |
| 1440 / 1920 px | Large and wide captures retain bounded reading measure | Whitespace grows outside the container rather than increasing line length. |
| Reduced motion / print | Static background or no decorative motion | Guide removes animation. Print keeps semantic content and hides reference navigation. |
Content extremes and inclusion
- Long organization names and localized strings wrap. Email and URL strings may break anywhere inside field messages.
- Use native labels, headings, lists, form controls, and table headers before ARIA. Required status must not depend on color.
- Native disabled controls require nearby text explaining how to enable them. Loading is distinct from disabled eligibility.
- No permission-denied or authenticated empty-state UI is invented for the source website. Private-product states are outside this scope.
- The reference supports keyboard and pointer. Speech output on real assistive technology remains a separate test boundary.