Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Render <FormErrorMessage> at render time instead of dispatch time

See original GitHub issue

🐛 Bug report

The <FormErrorMessage>-component only adds the error message to the DOM at message dispatch time instead of at site render time. This causes some screen readers to not see the aria-live attributes present when they appear. I tested this using VoiceOver and NVDA, the aria-live messages worked great in VoiceOver but failed using NVDA. I do not have access to test this on JAWS.

I have encountered this issue before, some assistive technologies fail to detect aria-live regions that are added to a page dynamically.

MDN tells us "Including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using JavaScript.". I’m not sure what they mean by “dynamically” but they state that the element should have the attribute before the change occours.

I found some more info on this here https://almerosteyn.com/2017/09/aria-live-regions-in-react

💥 Steps to reproduce

Create a form Have your errors in <FormErrorMessage/ > Form error messages with aria-live are not available in the DOM until they are dispatched.

💻 Link to reproduction

🧐 Expected behavior

Form error messages are loaded into the DOM at site render time and visually hidden using CSS and if needed aria-hidden (depending on how this is solved)

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:10 (1 by maintainers)

Top GitHub Comments

2reactions

k-hoangcommented, Feb 16, 2021

@with-heart Yeh, multiple live regions don’t play well with each other. Ideally <FormErrorMessage> should not use aria-live and instead be associated to the element with aria-describedby . On top of this, there should be a separate live region component with all the errors to be used in one place for the entire form. This component needs to be permanently mounted so that screen readers are aware of any changes.

1reaction

stale[bot]commented, Nov 16, 2021

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

Top Results From Across the Web

reactjs - Why does component renderer perform 3 times when ...

I have a function component that uses hook useEffect() for dispatch action from redux. I get the action from props, it comes there...

FAQs | React Hook Form - Simple React forms validation

React Hook Form relies on uncontrolled form, which is the reason why the register function capture ref and controlled component has its re-rendering...

Blender 3.0 Render Settings - Optimize Render Time - YouTube

Hope you like it. Please consider supporting me with Like and Subshare in the comments your thoughts on this course.

React Redux: performance considerations when dispatching ...

React re-renders multiple times. By default, React will re-render once for each dispatched action, including for actions that are dispatched ...

<ErrorMessage /> | Formik

<ErrorMessage /> is a component that renders the error message of a given field if that field has been visited (i.e. touched[name] ===...