Example 03 · Full workflow

Recover, correct, retry.

A local submission simulation moves through pending, rejected, editing, and success states while the application—not the bridge—owns timing and resubmission.

Workspace request

The first request cannot be approved.

The default email is reserved and the selected seat count needs review.

Try it

  1. Submit the prefilled request.
  2. Read the rejection and follow focus.
  3. Change the email domain and select 10 seats.
  4. Submit again to reach the success state.
workspace.requestlocal state machine

Request a team workspace

Use a non-reserved email and no more than 10 seats for the simulated approval.

For success, replace reserved.test with another domain.

Ready to submit a local simulation.

Implementation

Keep network state outside.

Developer notes

  • The submit handler disables and restores its own button.
  • bridge.applyErrors(payload) runs only after the simulated rejection.
  • A successful retry calls bridge.clearErrors().
  • The original email hint remains in aria-describedby after errors clear.

Accessibility notes

  • The pending and result text uses a polite status region.
  • The button exposes its disabled state during the request.
  • Error focus is applied only when the rejection arrives.
  • Editing a rejected control clears that field's owned state.
  • The application must define an appropriate focus policy for its real success state.

Copy path

How to use it.

  1. Keep submission and pending-button state in your application.
  2. Apply errors only after a rejected response is available.
  3. Clear bridge-owned errors before a retry and after a successful response.

HTML

<link rel="stylesheet" href="../../dist/styles.css">

<form id="request-form" data-a11y-server-error-bridge>
  <div data-a11y-server-error-bridge-form-errors></div>
  <label for="request-email">Work email</label>
  <input id="request-email" name="email" type="email">
  <button type="submit">Submit request</button>
</form>

JavaScript

import { createServerErrorBridge } from "../../dist/index.js";

const form = document.querySelector("#request-form");
const bridge = createServerErrorBridge(form);

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  bridge.clearErrors();
  const response = await submitRequest(new FormData(form));
  if (!response.ok) bridge.applyErrors(await response.json());
});