Library

React Components / v9 (@fluentui/react-components)

System Info

https://react.fluentui.dev/?path=/docs/preview-components-field-inputfield--default

Are you reporting Accessibility issue?

yes

Reproduction

https://react.fluentui.dev/?path=/docs/preview-components-field-inputfield--default

Bug Description

Currently Field components include validation message in the description of the input element. This works well for cases where validation happens on submit and after submit focus moves to the invalid element.

Actual Behavior

If validation happens on blur as usual with validation frameworks, screen reader users are not notified about the validation failure unless they navigate back to the field.

Expected Behavior

The simple solution would be to mark validation message with role alert, however there are few points that are still unclear to me:

• do we want to always use role alert for error messages in Field components
• do we want to provide a way to announce success messages as well
• do we want special handling for revalidation - if either user fixes the error by editing, or if even after editing the error stays the same. It would be good to let the user know about the new result of validation, however role alert might not need to be sufficient here as the narration will not happen unless alert text changes.

Logs

No response

Requested priority

Blocking

Products/sites affected

Teams, this is blocking releasign Field as stable

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.