iOS/Android: Text input error for screenreaders

[fabOnReact]

Issues facebook/react-native#30848 facebook/react-native#30859
PR facebook/react-native#33468
Branch facebook/react-native@main...fabriziobertoglio1987:text-input-errors
New Branch facebook/react-native@main...fabriziobertoglio1987:text-input-errors-build
Branch used for debugging with additional history facebook/react-native@main...fabriziobertoglio1987:text-input-errors-build-debug-statements-2
Docs PR facebook/react-native-website#3010
Related https://developer.android.com/reference/android/widget/TextView#setError(java.lang.CharSequence) https://developer.android.com/reference/java/lang/CharSequence https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setError(java.lang.CharSequence) facebook/react-native#29070 facebook/react-native#29063 (comment) facebook/react-native#28952 #13

[fabOnReact]

done

• publish API Proposal with examples
• prepare questions on API proposal
• prepare documentation PR for react-native-website
• consider improving facebook/react-native@fb30702
• add examples facebook/react-native@f22e1f3
• pass prop only to AndroidTextInput see commit
• move type android_errorMessage to AndroidTextInput see commit

not relevant

• fix issue with missing drawable

[fabOnReact]

fix issue with missing drawable

with drawable	without drawable

[fabOnReact]

Change of error state from onChangeText show/hides a TextInput error

Expected Result:
The Error shows next to the TextInput

Actual Result:
No Error Show next to the TextInput

Applying changes from with facebook/react-native#29070 fixes the issue.

click to open test

function ErrorExample(): React.Node {
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState(null);
  const textinput = React.useRef(null);
  return (
    <>
      <Button title="create error" onPress={() => setError('button')} />
      <TextInput
        ref={textinput}
        errorMessage={error}
        onBlur={() => setError('onBlur')}
        onChangeText={newText => {
          setText(newText);
          setError(newText === 'error' ? 'this input is invalid' : null);
        }}
        value={text}
      />
    </>
  );
}

without PR 29070

without facebook/react-native#29070

without_pr_29070.mp4

with PR 29070

with facebook/react-native#29070

with_pr_29070.mp4

[fabOnReact]

Test Cases of the functionality (Android - Fabric)

error added onChangeText

2022-04-21.17-03-38.mp4

error added on onEndEditing

2022-04-21.17-04-45.mp4

[fabOnReact]

1- Issues iOS/Android: Text input error for screenreaders #30848 and Android: Error state change (text inputs) #30859 should be solved together (as explained in Brett comment).
2- Issue Android: Error state change (text inputs) #30859 may require updates to Android API (see test case Change of error state from onChangeText show/hides a TextInput error). I found a draft solution for the issue and I think is related to updateState. I will prepare a fix for this issue in a couple of days.
3- I tested Kacie's API Proposal (videos of my tests, my draft branch). I agree with her API Proposal. The prop name would be android_errorMessage.
4- I did not yet investigate the iOS API

[fabOnReact]

understanding onChangeText callback

https://github.com/fabriziobertoglio1987/react-native-notes/blob/3b7581cd763635aad605cc175bc3cb74182f4a85/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L564-L565

onChangeText is disabled in ReactAndroid by using replace instead of setText

https://github.com/fabriziobertoglio1987/react-native-notes/blob/c5762a77a9e720e0129175afc38c7dcf23bea7bd/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L567-L567

instead this callback controls onChangeText

https://github.com/fabriziobertoglio1987/react-native-notes/blob/c5762a77a9e720e0129175afc38c7dcf23bea7bd/Libraries/Components/TextInput/TextInput.js#L1114-L1131

solved with fabOnReact/react-native@d3d54e1

[fabOnReact]

AndroidTextInputProps and AndroidTextInputState.cpp

https://github.com/fabriziobertoglio1987/react-native/blob/a7a781ff4a13e744f4eb3007ef0657740b277a72/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputProps.cpp#L268

fabOnReact/react-native@5abe584

ReactEditText - need to add the errorMessageAndroid to AndroidTextInputState
currently errorMessageAndroid is part of the props but not of the state, while underlineColorAndroid is part of state.

I added errorMessageAndroid prop to

https://github.com/fabriziobertoglio1987/react-native/blob/b5786376f4efc590386860a574d29db90f3cddaf/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputProps.cpp#L67-L70

but needs to be added also to AndroidTextInputState

https://github.com/fabriziobertoglio1987/react-native/blob/b5786376f4efc590386860a574d29db90f3cddaf/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputState.cpp#L29

so the StateWrapper

https://github.com/fabriziobertoglio1987/react-native/blob/b5786376f4efc590386860a574d29db90f3cddaf/ReactAndroid/src/main/java/com/facebook/react/uimanager/StateWrapper.java#L4

https://github.com/fabriziobertoglio1987/react-native/blob/b5786376f4efc590386860a574d29db90f3cddaf/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L1291

includes also the errorMessageAndroid

need to follow similar implementation of underlineColorAndroid

https://github.com/fabriziobertoglio1987/react-native/commits/681ed402de9d6f119cd30583ad5048e1cb75bab4/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputState.cpp