Android: Error state change (text inputs)

Description

Error text not supported.

Errors for form fields, while they can be displayed visually in many unique ways, need to have a strong association with the problematic field itself for accessibility. Otherwise, any users who can’t visually see the relation of the error to the field won’t necessarily know which field is the problem.

This issue requires #30848 to be implemented first, and may get solved as part of that implementation.

React Native version:

v0.63

Expected Behavior

On focus of a form field with an error, the error will be announced by the screen reader after the field contents. Upon changing a field and putting it into an error state, the error will immediately be announced by the screen reader.

Android Details

On Android, this behavior is dictated by the “error” property of TextView. It can be set with the setError(errorString) method, which will both visually display the error, as well as set up the right properties for accessibility.

https://developer.android.com/reference/android/widget/TextView#setError(java.lang.CharSequence)

On the accessibility side, what is technically happening is that the “error” and “contentInvalid” properties of the AccessibilityNodeInfo is being set, and an accessibility event is being fired when the component goes into this error state. Code pointer for the Android implementation here:

AccessibilityNodeInfo properties: https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/widget/TextView.java;l=11887-11888?q=setError

Accessibility event firing: https://cs.android.com/android/platform/superproject/+/master:frameworks/base/core/java/android/widget/TextView.java;l=7284?q=setError

[blavalla]

@kacieb , just a heads up as it looks like you’re working on #30848. This can likely be solved as part of that task (at least on Android), as this behavior should work automatically if you set the error prop on the TextView class.

For iOS this may require making a custom VoiceOver announcement when we get into an error state, and will likely require setting the error text in something like the AccessibilityValue to get it to read it upon focus of the input.

cc @gioneill for iOS specifics

[fabriziobertoglio1987]

I moved PR https://github.com/facebook/react-native/pull/33468 Ready for Review. I remain available for any improvement. Thanks