-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1/2 TextInput accessibilityErrorMessage (Talkback, Android) #33468
Conversation
calling setError does not display an error if the TextInput is a controlled component. https://reactnative.dev/docs/textinput#value >The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker. ```javascript function ErrorExample(): React.Node { const [text, setText] = React.useState(''); const [error, setError] = React.useState(null); return ( <TextInput errorMessage={error} onChangeText={newText => { setText(newText); setError(newText === 'error' ? 'this input is invalid' : null); }} value={text} /> ); } ``` The solution from pr facebook#28952 fixes this issue and forces the update by invalidating the TextInput instance which triggers onAttachedToWindow() To be noticed that there is logic to trigger this updates in the ReactTextInputManager https://github.com/fabriziobertoglio1987/react-native/blob/60b6c9be8e811241039a6db5dc906a0e88e6ba82/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L1291-L1292 The PR was previously accepted and could be an acceptable solution for this issue
…: folly_json ``` /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:651: Android NDK: Module react_codegen_rncore depends on undefined modules: folly_json /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:664: *** Android NDK: Note that old versions of ndk-build silently ignored this error case. If your project worked on those versions, the missing libraries were not needed and you can remove those dependencies from the module to fix your build. Alternatively, set APP_ALLOW_MISSING_DEPS=true to allow missing dependencies. . Stop. ``` I applied solution in https://stackoverflow.com/a/48897133/7295772 but now caused this error ``` make: *** [/home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:725: /home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/obj/local/x86/libreact_codegen_rncore.so] Error 1 make: *** Waiting for unfinished jobs.... ``` Full Logs ``` FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':ReactAndroid:configureNdkBuildDebug[x86]'. > [CXX1405] error when building with ndkBuild using /home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/jni/react/jni/Android.mk: Build command failed. Error while executing process /home/fabrizio/Android/Sdk/ndk/21.4.7075529/ndk-build with arguments {NDK_PROJECT_PATH=null APP_BUILD_SCRIPT=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/jni/react/jni/Android.mk NDK_GRADLE_INJECTED_IMPORT_PATH=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/.cxx/Debug/83t124q6/prefab/x86 APP_ABI=x86 NDK_ALL_ABIS=x86 NDK_DEBUG=1 APP_PLATFORM=android-21 NDK_OUT=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/obj NDK_LIBS_OUT=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/lib NDK_APPLICATION_MK=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/jni/Application.mk THIRD_PARTY_NDK_DIR=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/third-party-ndk REACT_COMMON_DIR=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/../ReactCommon REACT_GENERATED_SRC_DIR=/home/fabrizio/.gradle/build/react-native-github/ReactAndroid/generated/source REACT_SRC_DIR=/home/fabrizio/Documents/sourcecode/opensource/react-native/ReactAndroid/src/main/java/com/facebook/react APP_STL=c++_shared -j8 APP_SHORT_COMMANDS=false LOCAL_SHORT_COMMANDS=false -B -n} /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:651: Android NDK: Module react_codegen_rncore depends on undefined modules: folly_json /home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:664: *** Android NDK: Note that old versions of ndk-build silently ignored this error case. If your project worked on those versions, the missing libraries were not needed and you can remove those dependencies from the module to fix your build. Alternatively, set APP_ALLOW_MISSING_DEPS=true to allow missing dependencies. . Stop. ``` ``` ../ReactCommon/react/nativemodule/core/../../../react/renderer/core/RawValue.h:249: error: undefined reference to 'folly::dynamic::size() const' /home/fabrizio/.gradle/build/react-native-github/ReactAndroid/third-party-ndk/folly/folly/dynamic-inl.h:356: error: undefined reference to 'folly::dynamic::operator=(folly::dynamic&&)' ../ReactCommon/react/nativemodule/core/../../../react/renderer/core/RawValue.h:249: error: undefined reference to 'folly::dynamic::size() const' clang++: error: linker command failed with exit code 1 (use -v to see invocation) make: *** [/home/fabrizio/Android/Sdk/ndk/21.4.7075529/build/core/build-binary.mk:725: /home/fabrizio/.gradle/build/react-native-github/ReactAndroid/intermediates/cxx/Debug/83t124q6/obj/local/x86/libreact_codegen_rncore.so] Error 1 make: *** Waiting for unfinished jobs.... ```
… modules: folly_json" This reverts commit 06c4908.
allow to display error message on TextInput triggered in a onChangeText callback. Fixes issue explained in: fabOnReact/react-native-notes#12 (comment) Related links: fabOnReact/react-native-notes#12 (comment) d3d54e1
Following same implementation used with underlineColorAndroid https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/TextInput/TextInput.js#L470 https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js#L203 While with other components (for example prop android_ripple), we use the android_ prefix to denote platform specific props. facebook#29157 (comment) https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/Pressable/Pressable.js#L177 In the case of TextInput we already have Platform Logic that detects Android/iOS platform. https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/TextInput/TextInput.js#L1268 For this reason TextInput component does not use android_ props and instead uses this naming convention underlineColorAndroid. To be noted that the prop underlineColorAndroid is passed to both iOS and Android version, while other props have platform specific logic for android and iOS. https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/TextInput/TextInput.js#L1334 https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/TextInput/TextInput.js#L1293 Example of a prop that have a specific value on Android and is different from iOS https://github.com/fabriziobertoglio1987/react-native/blob/15810e96d90e18dbd424666338fdec0127d403ed/Libraries/Components/TextInput/TextInput.js#L1271 I decided to follow the same solution used in underlineColorAndroid.
Base commit: 25a25ea |
@lunaleaps I moved the iOS functionalities to #35908. I further tested the PR #33468 (iOS and Android), and I did not detect issues. PR #33468 is ready for review. I remain available. Thanks a lot 🙏 |
@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
@lunaleaps merged this pull request in cbe934b. |
Summary: This diff is reverting PR #33468 Due to an increase of java.lang.IllegalStateException caused by the PR Original commit changeset: cd80e9a1be8f Original Phabricator Diff: D38410635 Changelog: [Android][Fixed] - removed logic that calls the [AccessibilityNodeInfo#setError][10] and [#setContentInvalid][13] method to display the error message in the TextInput - Revert of PR #33468 Reviewed By: NickGerleman, makovkastar Differential Revision: D44032331 fbshipit-source-id: 732ed0cf23e4f30ae00c51dace851a3fdfe65c01
This pull request has been reverted by ca0d565. |
…#33468) Summary: **Android**: The functionality consists of calling the [AccessibilityNodeInfo#setError][10] and [#setContentInvalid][13] method to display the error message in the TextInput. **Fixes [https://github.com/facebook/react-native/issues/30848][51] - Adding an accessibilityErrorMessage prop to the TextInput Component**: **Android**: The prop accessibilityErrorMessage triggers the AccessibilityNodeInfo method [setError][10] which automatically sets the correct properties on the AccessibilityNodeInfo that will inform screen readers of this state. The method calls setContentInvalid(true) and setError(youErrorString) on the AccessibilityNodeInfo. **Fixes [https://github.com/facebook/react-native/issues/30859][52] - Detecting changes in the Error state (text inputs)** **Fabric - Android** - Adding accessibilityErrorMessage to field AndroidTextInputState. ReactTextInputManager and ReactEditText receive state updates both from [Javascript][32] and [cpp (fabric)][34]. - accessibilityErrorMessage is added to the fabric AndroidTextInputState field - The updates are received in the ReactAndroid API with method updateState from ReactTextInputManager - After updating the TextInput text with onChangeText, the update of the accessibilityErrorMessage is triggered with method maybeSetAccessibilityError which triggers [setError][10]. More info: - An explanation of [state updates between fabric and ReactAndroid for the TextInput component][34] - [ReactNative renderer state updates][35] **Paper - Android** - Adding accessibilityErrorMessage to ReactTextInputShadowNode to trigger updates in Paper renderer when accessibilityErrorMessage is changed within the onChange callback. Related Links (Android): - [In this diff I'm shipping and deleting mapBufferSerialization for Text measurement][101] - [This diff implement and integrates Mapbuffer into Fabric text measure system][39] - [Refactor ViewPropsMapBuffer -> general MapBuffer props mechanism][100] - [TextInput: support modifying TextInputs with multiple Fragments (Cxx side)][24] - [TextInput: keep C++ state in-sync with updated AttributedStrings in Java][23] - [AccessibilityNodeInfo#setError][11] - [Explanation on how TextInput calls SET_TEXT_AND_SELECTION in Java API][32] - [Fabric: convertRawProp was extended to accept an optional default value][27] - [understanding onChangeText callback][31] - [Editable method replace()][12] - [Change of error state from onChangeText show/hides a TextInput error][30] - [AndroidTextInput: support using commands instead of setNativeProps (native change)][25] - [TextInput: support editing completely empty TextInputs][26] - [[Android] Fix letters duplication when using autoCapitalize https://github.com/facebook/react-native/issues/29070][40] - [Support optional types for C++ TurboModules][28] - [discussion on using announceForAccessibility in ReactEditText][36] - [ fix annoucement delayed to next character][61] - [Announce accessibility state changes happening in the background][29] - [Refactor MountingManager into MountingManager + SurfaceMountingManager][37] iOS Functionalities are included in separate PR facebook#35908 Documentation PR facebook/react-native-website#3010 Next PR [2/2 TextInput accessibilityErrorMessage (VoiceOver, iOS) https://github.com/facebook/react-native/issues/35908](https://github.com/facebook/react-native/pull/35908) Related facebook/react-native-deprecated-modules#18 ## Changelog [Android] [Added] - Adding TextInput prop accessibilityErrorMessage to announce with TalkBack screenreaders Pull Request resolved: facebook#33468 Test Plan: **Android - 20 Jan 2023** facebook#33468 (comment) **iOS - 20 Jan 2023** facebook#33468 (comment) <details><summary>CLICK TO OPEN OLD VIDEO TEST CASES</summary> <p> **PR Branch - Android and iOS 24th June** [88]: Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric) ([link][88]) **PR Branch - Android** [1]. Test Cases of the functionality (Fabric) ([link][1]) [2]. Test Cases of the functionality (Paper) ([link][2]) **Main Branch** [6]. Android - Runtime Error in main branch when passing value of 1 to TextInput placeholder prop ([link][6]) **Issues Solved** [7]. TalkBack error does not clear error on the next typed character when using onChangeText ([link][7]) **Other Tests** [8]. Setting the TextInput errorMessage state with setTextAndSelection Java API from JavaScript ([link][8]) [9]. Setting the TextInput errorMessage state from fabric TextInput internal state to Java ReactTextUpdate API ([link][9]) </p> </details> [1]: fabOnReact/react-native-notes#12 (comment) "Test Cases of the functionality (Android - Fabric)" [2]: fabOnReact/react-native-notes#12 (comment) "Test Cases of the functionality (Android - Paper)" [3]: fabOnReact/react-native-notes#12 (comment) "Test Cases of the functionality (iOS - Fabric)" [6]: fabOnReact/react-native-notes#12 (comment) "Runtime Error in main branch when passing value of 1 to TextInput placeholder prop" [7]: fabOnReact/react-native-notes#12 (comment) "TalkBack error announcement done on next typed character with onChangeText" [8]: fabOnReact/react-native-notes#12 (comment) "setting the TextInput errorMessage state with setTextAndSelection Java API from JavaScript" [9]: fabOnReact/react-native-notes#12 (comment) "Setting the TextInput errorMessage state from fabric TextInput internal state to Java ReactTextUpdate API" [10]: https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setError(java.lang.CharSequence) "AOSP setError" [11]: https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setError(java.lang.CharSequence) "AccessibilityNodeInfo#setError" [12]: https://github.com/aosp-mirror/platform_frameworks_base/blob/1ac46f932ef88a8f96d652580d8105e361ffc842/core/java/android/text/Editable.java#L28-L52 "Editable method replace" [13]: https://developer.android.com/reference/android/view/accessibility/AccessibilityNodeInfo#setContentInvalid(boolean) "setContentInvalid" [20]: facebook@60b6c9b "draft implementation of android_errorMessage " [21]: facebook@012d92d "add errorMessage to ReactTextUpdate and maybeSetAccessibilityError" [22]: fabOnReact@cad239b "rename android_errorMessage to errorMessageAndroid" [23]: fabOnReact@0bae474 "TextInput: keep C++ state in-sync with updated AttributedStrings in Java" [24]: fabOnReact@0556e86 "TextInput: support modifying TextInputs with multiple Fragments (Cxx side)" [25]: fabOnReact@7ab5eb4 "AndroidTextInput: support using commands instead of setNativeProps (native change)" [26]: fabOnReact@b9491b7 "TextInput: support editing completely empty TextInputs" [27]: fabOnReact@7f1ed68 "Fabric: convertRawProp was extended to accept an optional default value" [28]: facebook@6e0fa5f "Support optional types for C++ TurboModules" [29]: fabOnReact@baa66f6 "Announce accessibility state changes happening in the background" [30]: fabOnReact/react-native-notes#12 (comment) "Change of error state from onChangeText show/hides a TextInput error" [31]: fabOnReact/react-native-notes#12 (comment) "understanding onChangeText callback" [32]: facebook#29063 (comment) "Explanation on how TextInput calls SET_TEXT_AND_SELECTION in Java API" [33]: facebook#33468 (comment) "Explanation of TextInput state management with fabric C++ and JAVA API" [34]: facebook#33468 (comment) "state updates between fabric and ReactAndroid for the TextInput component" [35]: https://reactnative.dev/architecture/render-pipeline#react-native-renderer-state-updates "ReactNative renderer state updates" [35]: fabOnReact/react-native-notes#12 (comment) "Analysis on how AndroidTextInputState.cpp sends updates to ReactTextInputManager" [36]: facebook#33468 (comment) "discussion on using announceForAccessibility in ReactEditText" [37]: fabOnReact@29eb632 "Refactor MountingManager into MountingManager + SurfaceMountingManager" [38]: fabOnReact@733f228 "Diff C++ props for Android consumption" [39]: fabOnReact@91b3f5d "This diff implement and integrates Mapbuffer into Fabric text measure system" [40]: facebook#29070 "[Android] Fix letters duplication when using autoCapitalize facebook#29070" [50]: fabOnReact/react-native-notes#12 "Notes from work on iOS/Android: Text input error for screenreaders facebook#12" [51]: facebook#30848 "iOS/Android: Text input error for screenreaders facebook#30848" [52]: facebook#30859 "Android: Error state change (text inputs) facebook#30859" [61]: facebook@eb33c93 "fix annoucement delayed to next character" [70]: fabOnReact/react-native-notes#12 (comment) "iOS - Paper renderer does not update the accessibilityValue" [71]: fabOnReact/react-native-notes#12 (comment) "Test Cases of the functionality (Fabric) after removing changes to .cpp libs" [72]: fabOnReact/react-native-notes#12 (comment) "Test Cases of the functionality (Paper) after removing changes to .cpp libs" [73]: fabOnReact/react-native-notes#12 (comment) "iOS - announcing error onChangeText and screenreader focus" [74]: fabOnReact/react-native-notes#12 (comment) "iOS - The screenreader announces the TextInput value after the errorMessage is cleared" [75]: fabOnReact/react-native-notes#12 (comment) "iOS - Exception thrown while executing UI block: - [RCTTextView setOnAccessibiltyAction:]: unrecognized selector sent to instance (Paper) (main branch)" [76]: facebook#30859 (comment) "iOS - announce lastChar (not entire text) onChangeText and avoid multiple announcements (Fabric)" [77]: facebook#30859 (comment) "iOS - announces or does not announce the accessibilityError through Button onPress (not onChangeText) (Fabric)" [78]: facebook#30859 (comment) "iOS - the error is announced with accessibilityInvalid true and does not clear after typing text (onChangeText) (Fabric)" [79]: facebook#30848 (comment) "iOS - Exception thrown while executing UI block: - RCTUITextView setAccessibilityErrorMessage:]: unrecognized selector sent to instance (iOS - Paper on main branch)" [80]: fabOnReact@e13b9c6 "RCTTextField was spliited into two classes" [81]: fabOnReact@ee9697e "Introducing RCTBackedTextInputDelegate" [82]: fabOnReact@2dd2529 "Add option to hide context menu for TextInput" [83]: https://github.com/fabriziobertoglio1987/react-native/blob/343eea1e3150cf54d6f7727cd01d13eb7247c7f7/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentAccessibilityProvider.mm#L48-L72 "RCTParagraphComponentAccessibilityProvider accessibilityElements" [84]: https://github.com/fabriziobertoglio1987/react-native/blob/c8790a114f6f21774c43f0e9b9210e7b35d1c243/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm#L613 "RCTTextInputComponentView method _setAttributedString" [85]: https://github.com/fabriziobertoglio1987/react-native/blob/c8790a114f6f21774c43f0e9b9210e7b35d1c243/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm#L146 "RCTTextInputComponentView method updateProps" [86]: https://github.com/fabriziobertoglio1987/react-native/blob/c8790a114f6f21774c43f0e9b9210e7b35d1c243/Libraries/Text/TextInput/RCTBaseTextInputView.m#L150 "RCTBaseTextInputView setAttributedText" [87]: facebook#30859 (comment) "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event" [88]: facebook#30859 (comment) "Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event" [89]: facebook#30859 (comment) "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric)" [100]: fabOnReact@110b191 "Refactor ViewPropsMapBuffer -> general MapBuffer props mechanism" [101]: fabOnReact@22b6e1c "In this diff I'm shipping and deleting mapBufferSerialization for Text measurement" Reviewed By: blavalla Differential Revision: D38410635 Pulled By: lunaleaps fbshipit-source-id: cd80e9a1be8f5ca017c979d7907974cf72ca4777
Summary: This diff is reverting PR facebook#33468 Due to an increase of java.lang.IllegalStateException caused by the PR Original commit changeset: cd80e9a1be8f Original Phabricator Diff: D38410635 Changelog: [Android][Fixed] - removed logic that calls the [AccessibilityNodeInfo#setError][10] and [#setContentInvalid][13] method to display the error message in the TextInput - Revert of PR facebook#33468 Reviewed By: NickGerleman, makovkastar Differential Revision: D44032331 fbshipit-source-id: 732ed0cf23e4f30ae00c51dace851a3fdfe65c01
Summary
Android: The functionality consists of calling the AccessibilityNodeInfo#setError and #setContentInvalid method to display the error message in the TextInput.
Fixes #30848 - Adding an accessibilityErrorMessage prop to the TextInput Component:
Android: The prop accessibilityErrorMessage triggers the AccessibilityNodeInfo method setError which automatically sets the correct properties on the AccessibilityNodeInfo that will inform screen readers of this state. The method calls setContentInvalid(true) and setError(youErrorString) on the AccessibilityNodeInfo.
Fixes #30859 - Detecting changes in the Error state (text inputs)
Fabric - Android - Adding accessibilityErrorMessage to field AndroidTextInputState.
ReactTextInputManager and ReactEditText receive state updates both from Javascript and cpp (fabric).
More info:
Paper - Android - Adding accessibilityErrorMessage to ReactTextInputShadowNode to trigger updates in Paper renderer when accessibilityErrorMessage is changed within the onChange callback.
Related Links (Android):
iOS Functionalities are included in separate PR #35908
Documentation PR facebook/react-native-website#3010
Next PR 2/2 TextInput accessibilityErrorMessage (VoiceOver, iOS) #35908
Related facebook/react-native-deprecated-modules#18
Changelog
[Android] [Added] - Adding TextInput prop accessibilityErrorMessage to announce with TalkBack screenreaders
Test Plan
Android - 20 Jan 2023
#33468 (comment)
iOS - 20 Jan 2023
#33468 (comment)
CLICK TO OPEN OLD VIDEO TEST CASES
PR Branch - Android and iOS 24th June
88: Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric) (link)
PR Branch - Android
1. Test Cases of the functionality (Fabric) (link)
2. Test Cases of the functionality (Paper) (link)
Main Branch
6. Android - Runtime Error in main branch when passing value of 1 to TextInput placeholder prop (link)
Issues Solved
7. TalkBack error does not clear error on the next typed character when using onChangeText (link)
Other Tests
8. Setting the TextInput errorMessage state with setTextAndSelection Java API from JavaScript (link)
9. Setting the TextInput errorMessage state from fabric TextInput internal state to Java ReactTextUpdate API (link)