Example 05 ยท Error summary addon

Route errors into a shared overview.

The addon gives resolved field errors to an existing summary instance, while the bridge continues to render linked inline messages next to each control.

Summary contract

Start broad, then move to a field.

A local summary stand-in demonstrates the instance methods expected by the optional integration.

Try it

  1. Apply the rejected response.
  2. Confirm focus lands on the summary.
  3. Follow a summary link to its control.
  4. Edit the field and inspect cleanup.
addon.error-summaryexternal summary

Publish a contributor profile

The summary and inline errors describe the same normalized result.

Ready to demonstrate summary focus.

Implementation

Share resolved field data.

Developer notes

  • Import createErrorSummaryAddon from its addon subpath.
  • Pass an existing instance and enable focusOnApply.
  • The addon receives resolved field names, messages, elements, and IDs.
  • The bridge still owns inline rendering because this addon does not claim it.

Accessibility notes

  • The summary is a labelled section with a native list of links.
  • Focus moves only after an explicit rejected response.
  • Links move focus to the corresponding native control.
  • Inline errors remain linked to each field.
  • The actual optional peer and chosen summary policy require integration testing.

Copy path

How to use it.

  1. Provide a focusable summary root and ordinary labelled form controls.
  2. Create the external summary instance, then pass it to the addon.
  3. Enable focusOnApply when the summary should receive focus after rejection.

HTML

<form id="publish-form" data-a11y-server-error-bridge>
  <section id="error-summary" hidden tabindex="-1"></section>
  <label for="publish-email">Email address</label>
  <input id="publish-email" name="email" type="email">
  <button type="submit">Publish</button>
</form>

JavaScript

import { createServerErrorBridge } from "../../dist/index.js";
import { createErrorSummaryAddon } from
  "../../dist/addons/error-summary.js";
import { createErrorSummary } from "a11y-error-summary";

const form = document.querySelector("#publish-form");
const summary = createErrorSummary(
  document.querySelector("#error-summary")
);
const bridge = createServerErrorBridge(form, {
  addons: [createErrorSummaryAddon({
    instance: summary,
    focusOnApply: true
  })]
});