search

bbc / gel

https://bbc.github.io/gel
42 stars 16 forks source link

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

Open jfhector opened 3 years ago

jfhector commented 3 years ago

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

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

The place to fix seems to be https://github.com/bbc/gel/blob/733a0323e93d87eafb6dff85f33dab6a428d7dbd/src/_includes/js/components/gel-validation.js#L61