Skip to content

Improve Form Error Accessibility #450

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

Merged
merged 2 commits into from
Nov 16, 2023
Merged

Improve Form Error Accessibility #450

merged 2 commits into from
Nov 16, 2023

Conversation

delbaoliveira
Copy link
Collaborator

@delbaoliveira delbaoliveira commented Nov 16, 2023

The aria-live region for form errors needs to be present in the DOM to allow screen readers to monitor changes. This PR updates the structure, and moves the label outside the conditional.

More context: #418
See also: https://dev.to/abbeyperini/live-regions-in-react-4dmd

PR to update the chapter: https://github.com/vercel/front/pull/27101

Copy link

vercel bot commented Nov 16, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
next-learn-dashboard ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 16, 2023 1:56pm
next-learn-starter ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 16, 2023 1:56pm
next-seo-starter ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 16, 2023 1:56pm

@Tan-Aki
Copy link

Tan-Aki commented Nov 16, 2023

Great job, and swift!
I added one comment.
Thank you!

Btw, this problem is also present on the app/ui/login-form.tsx in chapter 15

image

Cheers!

@delbaoliveira
Copy link
Collaborator Author

Thank you for taking the time @Tan-Aki! 🖤

@Tan-Aki
Copy link

Tan-Aki commented Nov 16, 2023

Great job!
Everything LGTM now!

Cheers.

@leerob leerob merged commit 45fcde4 into main Nov 16, 2023
@leerob leerob deleted the improve-form-accessibility branch November 16, 2023 14:27
@MonkeyNinja
Copy link

The documentation for this part, says "Add a ternary operator that checks for each specific error. For example, after the customer's field, you can add:"

Whilst the updated code does not use a ternary op anymore

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

Successfully merging this pull request may close these issues.

4 participants