form-js icon indicating copy to clipboard operation
form-js copied to clipboard

Make error messages accessible

Open vsgoulart opened this issue 3 years ago • 1 comments

Describe the Bug

Currently, @bpmn-io/form-js shows errors, but there's nothing connecting these errors to the appropriate fields. This can be achieved by some methods described on this link

Steps to Reproduce

  1. Model a form that has a field with a validation
  2. Render this form and try to submit it with invalid
  3. The error message is shown, but it's not accessible (The field doesn't have any aria-describedby prop pointing to the error)

Expected Behavior

The error messages should be accessible

vsgoulart avatar Nov 18 '21 14:11 vsgoulart

Makes sense. Contributions are welcome to improve the situation.

nikku avatar Nov 22 '21 19:11 nikku

Some good practices in terms of accessible error feedback: https://formik.org/docs/examples/instant-feedback

pinussilvestrus avatar Oct 23 '22 15:10 pinussilvestrus