form-fields: After a first failed submission, if user submits again before resolving all errors, no live announcement gets made
Opened this issue · 3 comments
How to reproduce
- Go to https://bbc.github.io/gel/components/demos/form-fields/
- Turn on screen reader
- Activate the 'Submit' button (without filling in any of the fields)
- Correct one of the errors (but not all of them)
- 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.
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.
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/
The place to fix seems to be