form-fields: After a first failed submission, if user submits again before resolving all errors, no live announcement gets made

[jfhector]

How to reproduce

1. Go to https://bbc.github.io/gel/components/demos/form-fields/
2. Turn on screen reader
3. Activate the 'Submit' button (without filling in any of the fields)
4. Correct one of the errors (but not all of them)
5. Activate the 'Submit' button again

Expected behaviour

I expected the "Error: Please fix the errors in the form before continuing" live announcement to be made again.

Actual behaviour

No live announcement happens.

Tested in

macOS 10.15.5 Safari + VoiceOver

Likely cause

If the user doesn't correct all the errors, the content of the live region is unchanged.
So no new live announcement gets made when the user attempts Submit again.

Why that's a UX issue

We can't assume that a user would solve all errors before attempting submission again.

Potential solutions

Option A: Empty the content of the live region when users press 'Submit', before populating it again if there's an error

Example: https://www.kooth.com/login
(Note: I realise that this example has other problems – e.g. HTML5 validation when fields are empty).

Downsides of Option A

• Small layout shift
• I imagine that the live region will need to stay empty for some time (I think it's 100ms, if I remember well from the DequeUniversity courses, but it might be longer).

Other ideas

There are probably other ways to solve this issue.

Note

I've taking the time to report and think of solutions, because I like your work and I'd need to figure out a way to solve that issue as I implement that pattern on kooth.com too.

[micmath]

To clarify, text and the visual display of the message are working as expected, the issue to fix is the fact that the message is not re-announced by SR on subsequent failed submits.

[micmath]

The suggestion of emptying the live region for a moment before setting the new text seems to work in forcing the SR to re-announce the text, even if it is the same text. see https://jsfiddle.net/qvy9Lxwj/

[micmath]

The place to fix seems to be

gel/src/_includes/js/components/gel-validation.js

Line 61 in 733a032

var message = allErrors.length > 0 ? settings.prefix + ' ' + settings.warning : '';