ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.39k stars 51.04k forks source link

Override the role of form field errors #52651

Closed mellis481 closed 6 hours ago

mellis481 commented 5 days ago

What problem does this feature solve?

The field-level error messages that appear when a FormItem instance is in error have the role attribute set to alert. This is the highest possible priority live region announcement which will immediately interrupt any other announcement a screen reader may be in the middle of announcing. It would be good to allow consumers of ant-design the ability to override this attribute if they do not want that user experience for their screen reader users since many accessibility experts consider role="alert" for field-level error messages a very problematic situation. In fact, upon a quick check, I couldn't find any other popular react component library that used role="alert" for their field-level errors. Lastly, it seems especially inappropriate for warnings.

Screenshot of a field-level error with role="alert".

What does the proposed API look like?

A new prop should be added to the Form component which allows for the role to be set or not set for each field in error. While it could lead to inconsistencies across form fields, it could also be a prop of Form.Item. Ultimately alert (default) and undefined (where we won't set the role attribute at all) are the only values I would expect should be used.

I don't have a preference for how the prop is implemented and would welcome suggestions from maintainers and/or community.

petercat-assistant[bot] commented 5 days ago

This feature request suggests allowing users to override the role attribute of form field error messages in Ant Design. Currently, these error messages have the role set to alert, which is a high-priority live region announcement. This can interrupt other announcements a screen reader might be making, which some accessibility experts find problematic.

The proposed solution is to introduce a new prop in the Form component, or possibly in Form.Item, that allows users to set the role for each field in error. The suggested roles are alert (default) and none.

This request has been noted and will be considered for future updates. If you have any further suggestions or need assistance, feel free to reach out.

🪧 Tips For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.
Wxh16144 commented 6 hours ago

Fix in #52661