Accessibility improvements for form validation

[Doniee]

Notes from @fpapado:

• novalidate on the form, as now

• Have a hidden container for the error summary at the start of the form (inside the form)

<div class="error-summary hidden" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
  <h2 id="error-summary-title">There is a problem</h2> 
  <div>
    <ul id="error-summary-list">
    </ul>
  </div>
</div>

• On submit, go through the form fields and validate based on their attributes. Add each error description and that field's label (or fieldset) id to a list (e.g. [{description: "Fill in the cough symptoms", inputLabelId: "cough-label"}])

• If there are errors, append a list item to the #error-summary-list
<li><a href="#${inputLabelId}">{description}</a></li>

• Also for each inputLabelId add the error after the label / legend (in p) with an id of ${inputLabelId}-error. Add aria-describedby to the fieldset or the label, referencing that error id.

• Finally, display and focus #error-summary

This should give a good experience to users of different technologies and modalities.
It works without relying on the live regions on onBlur, which can be a bit disruptive.
It is all lifted from the GDS, which has the best resource I have seen on forms:
https://design-system.service.gov.uk/components/error-summary/
https://design-system.service.gov.uk/components/error-message/