fix(storefront): BCTHEME-1092 Make screen reader say all errors then …

[huntario]

…each error while tabbing

Watching - #2235 - before moving forward

What?

Currently screen readers do not read out the errors until after the second submission, this seems to be do to the error not being defined within 'announceInputErrorMessage' assets/js/theme/common/utils/form-utils.js:132

So the role alert is not attached as expected. Once attached (after the second submission), the alert is too intrusive. The alerts interrupt each other causing the reading to not be audible.

Also, once the user is tabbing through each input, it should remind them of the specific error for that input field.

announceInputErrorMessage Does not seem to be firing as expected on any of the forms and should likely be replaced with different solution, but we will just replace it for the account signup for now; and remove it further from other forms on separate tickets.

Requirements

• CHANGELOG.md entry added (required for code changes only)

Tickets / Documentation

Add links to any relevant tickets and documentation.

• BCTHEME-1092

Screenshots (if appropriate)

Before:

BCTHEME-1092-announceInputErrorMessage-not-triggered-initially.mp4

BCTHEME-1092-before.mp4

After:

BCTHEME-1092-after.mp4

[bc-yevhenii-buliuk]

Hi @huntario! It seems that two similar tasks were created to solve the problems of form accessibility and the correct operation of the screen reader (1092 and 1128) .
Could you take a look at the solution to this problem in the PR that I created for my task 1128?
In my solution, I added an additional key delay: 0 to the nod validator settings so that the validator can immediately detect the error message that is in the span element:

`const errorMessage = $(activeInputContainer).find('span.form-inlineMessage');`

this should save us from double-clicking the form's submit button or losing focus twice on input elements to detect the errorMessage.
Thanks to this, we can immediately add the necessary attributes to errorMessage which will improve accessibility.
I also implemented adding focus to the first non-valid input field when submitting a form with non-valid fields. This will save us from the continuous enumeration of input field errors from the screen reader. It also looks more user friendly.
I will be grateful if you share your opinion on this matter. Thank you!

[bc-yevhenii-buliuk]

@huntario it would be nice to implement logic to set focus to the first non-valid input field when submitting the form.

[huntario]

Thanks for the review @bc-yevhenii-buliuk . I've addressed the notes you mentioned. Let me know if you have any remaining concerns. I also moved the submit code into it's own method. This code is repeated in other methods here and could be consolidated in the future.