The error messages for incorrect date entry is visually provided but focus is not directed

[sachajudd]

Note: I'm not sure if we've done this issue or not but raising here incase we accidentally missed it.

High priority: The error messages for incorrect date entry is visually provided but focus is not directed to the notifications to alert non-sighted users.

Impact: Non-sighted users will not know if their submission was successful or why their entry failed to submit if focus is not sent directly to the error message. They will be forced to manually search for the error message, which may be frustrating and time-consuming.

Use an aria alert region on the div container. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission. Example:

<div class="invalid-feedback" id="message-Form_DateRangeForm_from" role="alert" aria-atomic="true">  Please enter a valid date format (y-MM-dd)</div>

For more information on this technique, please refer to:  https://www.w3.org/WAI/WCAG21/working-examples/aria-alert-identify-errors/  https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html

cc @Cheddam @ScopeyNZ @brynwhyman @clarkepaul

[brynwhyman]

It might make sense to track this work in this theme, given it relates to a wider review of the theme, but I believe these 'event filter' date fields are implemented in cwp/cwp as part of providing generic functionality around handling events.

[brynwhyman]

Kind of related: silverstripe/cwp#190