Validation messages aren't read out

[ChrisBrettCA]

• Add role="alert" to validation components in order to get them read out by VoiceOver.
• Check out ARIA invalid for this purpose too.
• Use ARIA describedBy to link to a form element.

[btomy]

This has been fixed in the Benifits checker prototype - https://github.com/ChrisBrettCA/benefits-checker-poc/pull/9

[btomy]

Need to update the Validation Docs to add aria-describy. Also add icon svg for validation message

[manalishi79]

We need to resolve the two types of form validation;
a) single error on a single page (following "one thing per page" pattern)
b) when there are multiple errors on a page

For A, focus for validation goes to the next relevant selectable area (e.g. a container surrounding the form labelled with "next question")

For B, a banner is displayed at the top of the page announcing and explain errors. User then tabs through form to discover errors.