Error summary

Every error on the page, in one box at the top, each a link to its field. The full flow is in the errors pattern.

<div class="ag-error-summary ag-mb-0" role="alert" tabindex="-1" data-ag-no-autofocus aria-labelledby="es-ex-title">
  <h2 class="ag-error-summary__title" id="es-ex-title">There is a problem</h2>
  <ul class="ag-error-summary__list">
    <li><a href="#es-ex-title">Enter an email address in the correct format, like name@example.com</a></li>
    <li>
      <a href="#es-ex-title">Enter your <span data-docs-string="id-name">National ID number</span></a>
    </li>
  </ul>
</div>

How it works

• Put it first inside main, before the page heading.
• With afrigov.js, focus moves to it on page load. The tabindex="-1" makes that possible.
• Each link goes to the id of the field's input, so activating it moves focus into the field.
• role="alert" makes screen readers announce it immediately.
• The title is always "There is a problem". Do not vary it.

Add data-ag-no-autofocus only on documentation pages like this one, where moving focus would be wrong.