Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input error messages not read by screen reader #837

Open
3 tasks done
stuininga1 opened this issue Dec 9, 2024 · 0 comments
Open
3 tasks done

Input error messages not read by screen reader #837

stuininga1 opened this issue Dec 9, 2024 · 0 comments

Comments

@stuininga1
Copy link

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant