Input error messages not read by screen reader

[stuininga1]

Flux version

1.0.23

Livewire version

3.5.12

What is the problem?

The error field within Flux doesn't announce to screenreaders when an error is triggered. It just pops into visibility onto the page, which is works for the average user, but anyone using a screenreader doesn't know that the error was triggered.

Originally reported in this discussion #441 by @lonebadger99

Code snippets

You can recreate this by using any <flux:error name="foo" /> component on the page then attempting to move through a form using a screenreader. Anytime you try to validate the screenreader won't announce the errors when they're triggered.

How do you expect it to work?

I expect that any errors that are triggered within a Livewire form are alerted to screenreaders automatically.

e.g. in flux/error.blade.php
I published this component then added the following aria-live and aria-atomatic in my code to make this accessible within the site I'm working on!

<div aria-live="polite" aria-atomic="true" >
    <?php if ($message) : ?>
        ... default flux error code here ...
    <?php endif; ?>
</div>

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@stuininga1 thanks for the report! I've submitted a PR to fix this.

PR description below.

The scenario

Currently if a validation error happens on a form, it won't be announced to screen readers.

The problem

The issue is that our validation error component won't actually announce itself to screen readers when added to the page.

The solution

I reviewed a few different solutions for how to solve this. A lot of solutions involved adding ID attributes to the error messages and updating aria-describedby to the input referencing the error ID when it has been added to the page.

React Aria does this, which can be viewed here https://react-spectrum.adobe.com/react-aria/forms.html#built-in-validation

One of the benefits of doing this is that whenever a screenreader focuses an input that is currently invalid, the error message will be read out every time.

The disadvantage is we now need to start tracking IDs for error messages so that they can be referenced from the input.

An alternative solution, which has been implemented in this PR, is to use role="alert" aria-live="polite" aria-atomic="true".

• role="alert" - ensures that the screen reader reads it out when it is added to the page.
• aria-live="polite" - ensures that validation messages are read one after the other, otherwise with assertive only the last one will be read.
• aria-atomic="true" - ensures that the whole error message element is read out if ever it changes, instead of just reading the changes.

What this does is announces the validation error to the screen reader when it gets added to the screen. When I tested what happens with multiple validation errors, when they get added at the same time, it will read through each of them starting from the top of the page first.

I felt like this was the simpler solution to get working validation support for screen readers, so it's what I have implemented. We can add the extra aria-describedby in another PR if we feel it should be added.

Fixes #837