iOS/Android: Text input error for screenreaders

[fabOnReact]

Issues react/react-native#30848 react/react-native#30859
PR react/react-native#33468
Branch react/react-native@main...fabriziobertoglio1987:text-input-errors
New Branch react/react-native@main...fabriziobertoglio1987:text-input-errors-build
Branch used for debugging with additional history react/react-native@main...fabriziobertoglio1987:text-input-errors-build-debug-statements-2
Docs PR react/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) react/react-native#29070 react/react-native#29063 (comment) react/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 react/react-native@fb30702
• add examples react/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 react/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 react/react-native#29070

without_pr_29070.mp4

with PR 29070

with react/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

[fabOnReact]

• test onBlur
• should you pass null to ReactTextUpdate?
• apply same changes from underlineColorAndroid in .cpp
• test on the Paper renderer
• search on iOS for underlinedColorAndroid 5min
• search on iOS for android_ripple impl 10min
• Update documentation PR
• note to iOS developer needs to handle null value to clear error message
• Move PR to Ready for Review

[fabOnReact]

passing mock values to AndroidTextInputShadowNode.cpp

to pass mock value of errorMessageAndroid to the constructor, I would need to generate a string of type jsi::String

https://github.com/fabriziobertoglio1987/react-native-notes/blob/67b466f083cd32066dc289a4eaf65b1151d97e10/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.cpp#L155-L166

The method createFromAscii could be used to generate a random string.

Relevant links:

• jsi.cpp
• using jsi::String::createFromAscii to generate jsi string
• AndroidTextInputState.cpp
• AndroidTextInputState.h

Compilation error messages