# Gate B3 UI/UX, Website and Docs Audit

**Status: ACCEPTED LOCALLY — 2 November 2026.** The browser acceptance and complete local verification passed. This accepts the bounded Gate B3 website/docs/sandbox work; it is not publication, testnet evidence, an independent accessibility certification or production approval.

## Baseline findings

| Area | Finding before B3 | B3 response |
|---|---|---|
| App information architecture | One long payment-centric screen made buyer, merchant, pool and reviewer tasks difficult to distinguish | Added overview, buyer, merchant, protection pool, case-review and reconciliation workspaces |
| Financial status | Payment, reserve and refund concepts were easy to conflate | Separated status labels and explanation; surfaced total/available/reserved pool coverage and refund status |
| Feedback and errors | Form/API failures were not consistently adjacent to the relevant action | Added inline status/error regions and field guidance while retaining API responses as authoritative |
| Reconciliation | Technical report details were not presented as an operator-oriented read-only result | Added an integrity workspace with explicit status and expandable evidence details; no repair action |
| Website claims | Public sections and roadmap included stale feature descriptions and remote documentation links | Replaced the remote docs embed with repository-owned documentation and rewrote current/planned boundaries |
| Developer onboarding | Existing Markdown guides were not surfaced as a navigable local documentation experience | Added a local docs portal, quickstart and guides for lifecycle, pools, disputes, ledger, API, vault, security and roadmap |
| Responsive/accessibility | No recorded full role-by-role keyboard or device review | Responsive navigation, focus-visible styling, semantic workspaces, labels and reduced-motion handling are implemented and checked within the measured scope below |

## Product and interface boundaries

- The application keeps native HTML, CSS and JavaScript; no new frontend framework or package dependency was introduced.
- The browser continues to call the loopback API for mutations. Fixed test personas, the in-memory fixture, server-side mock-provider signing and explicit simulation-clock actions remain sandbox-only.
- UI selection does not confer API permissions. Wallet connection, provider secrets in the browser, real assets and chain settlement are not implemented.
- Website product surfaces link to the local sandbox and source docs. Exchange, wallet and payment-provider integrations, testnet deployment and independent audit are marked planned/unavailable.
- Reconciliation remains read-only. `NOT_VERIFIABLE` is not a pass and no automated financial repair is available.

## Design system

| Element | Implementation |
|---|---|
| Color and themes | Existing Backstop warm neutral/green/orange brand, semantic warning/error/success states, shared `backstop-theme` preference and dark tokens |
| Typography | Existing native/system sans-serif body and monospace technical labels, fluid page headings |
| Layout | Desktop sidebar and content grid; compact/tablet and mobile breakpoints; horizontally scrollable data tables |
| Components | Consistent cards, status chips, buttons, form controls, detail lists, tables, callouts, progress indicators and empty/loading states |
| Interaction | Keyboard-operable tabs, native links/buttons/forms, visible focus, live status/error regions, reduced-motion CSS |
| Documentation | Sticky desktop table of contents, scrollable mobile navigation, source-linked guides and OpenAPI contract |

## Acceptance evidence

| Check | Result |
|---|---|
| Exact role journey in live browser | PASS: payment, pool reservation, merchant onward transfer, claim, independent decisions, appeal expiry, pool refund and read-only reconciliation |
| Form validation, rejected role action, session failure and API outage | PASS: zero amount, input focus/error, unauthorized buyer reconciliation, stale-session 401 recovery, blocked API and successful retry. Actual expiry is covered by the Node API tests; the browser exercises the same 401 recovery path. |
| Smartphone, tablet, laptop and desktop layout | PASS: 32 page/workspace combinations at 375, 768, 1280 and 1440 CSS pixels; no document overflow |
| Keyboard navigation and focus | PASS: workspace arrows/Home/End, selected panel, visible focus and Tab/Enter skip link |
| Contrast, accessibility semantics, form errors and target sizing | PASS for the measured subset: 16 light/dark page/workspace views, named Chromium accessibility-tree controls, input labels, rendered text on supported backgrounds and non-inline targets of at least 24 CSS pixels |
| Light/dark theme and reduced motion | PASS: both themes rendered; emulated reduced motion and automatic scroll behavior checked |
| Full local verify after B3 changes | PASS: 144 Node tests, 15 Solidity tests, demos, dependency audit (0 reported vulnerabilities), 11-asset static build, 32 Markdown files/OpenAPI, secret heuristic, website smoke and syntax checks |
| Gate B3 | **ACCEPTED LOCALLY** |

## Reproduction and evidence

- Run `npm run verify:browser` with an installed Chromium/Chrome/Edge executable. `BACKSTOP_BROWSER_EXECUTABLE` can specify its path. The runner uses a fresh temporary profile, loopback sandbox and only TEST-USD; it installs no browser packages and never uses a personal browser profile.
- Browser evidence: `reports/b3-browser/report.json` and screenshots in the same ignored output directory. Recorded browser: Chrome/156.0.8078.4; nine acceptance groups passed on 2 November 2026. The runner checks final painted theme colors after transitions settle.
- The runner sets `SANDBOX_RATE_LIMIT=1200` only for its own loopback test process to accommodate repeated page loads. The default sandbox and ordinary API limits remain 120 requests/minute. No authorization or financial checks are disabled.
- Full verifier evidence: `reports/b3-browser/verify.log`. This Windows environment needed Node's `--use-system-ca` for the registry audit. Certificate verification remained enabled; no TLS bypass was used.
- Chromium could not render inside the restricted execution environment, so the actual browser run used the approved local execution environment. No public deployment, remote push or chain transaction occurred.

## Corrections verified in this pass

Successful action feedback and the reconciliation summary are preserved instead of being cleared immediately. Tablet navigation/hero layout no longer overflows. Website/docs/footer links have usable target areas. Measured light/dark text contrasts were corrected, newly introduced product/developer sections receive consistent card/grid layouts, and the security-doc anchor points to an existing section. Theme controls reflect the stored preference and tolerate unavailable local storage.

## Accessibility and release limits

This is a bounded internal review, not a complete WCAG audit. The dependency-free browser runner uses Chromium's accessibility tree and DOM measurements; it does not operate NVDA, JAWS or VoiceOver. Its contrast checks exclude gradients, image backgrounds, generated text and other unsupported background/opacity combinations (96 text-node skips across the measured views); those results are not reported as verified. Inline links are excluded from the target-size check. Device tests are CSS viewport emulations, not physical-device or cross-browser tests.

The local sandbox still has fixed test identities and in-memory state. No browser wallet, linked SQLite/EVM settlement, testnet deployment, external provider, independent security audit or real-fund approval is established. Gate C remains the next engineering scope.