CMSgov
Inline error messages are dynamically appended, which breaks aria-live functionality
Describe the bug Our team is building a form with the CMS DS React components, and in testing we noticed that the inline error messages are not announced by a screen reader asynchronously or when focus is moved to the invalid field. It looks like the error markup is dynamically appended, in which case the aria-live region will not work. Live region markup needs to be rendered with the component: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions.
To Reproduce Steps to reproduce the behavior:
- Go to the Storybook page for the multiline text field: https://design.cms.gov/storybook/?path=/story/components-textfield--multiline-field
- Inspect the demo markup, and notice that there is no inline error message element in place
- In the "Controls" section, enter a value in the
errorMessagefield (hit "Set string" button, then use the text input) - Inspect the markup again and see that the inline error element was appended (
<p class="ds-c-inline-error"...>)
Expected behavior
- The inline error message markup is rendered with the component markup and remains in place.
- Only the inline error text value changes.
Screenshots
Markup rendered with the component doesn't include the error element:
The error element is dynamically appended when a text value is provided:
Desktop (please complete the following information):
- OS: Mac 14.5
- Browser Chrome
- Version 125.0.6422.78 (Official Build) (arm64)
Additional context
The documentation page should include that the error mechanism uses aria-live (currently no mention of it): https://design.cms.gov/components/inline-error/?theme=core
Thanks for flagging this. We're currently working on a wholistic pattern and guidance on form validation, so we'll make sure to address this in that set of changes.
