mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
fabriziobertoglio1987
cbe934bcff
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 https://github.com/facebook/react-native/pull/35908 Documentation PR https://github.com/facebook/react-native-website/pull/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 https://github.com/facebook/react-native-deprecated-modules/pull/18 ## Changelog [Android] [Added] - Adding TextInput prop accessibilityErrorMessage to announce with TalkBack screenreaders Pull Request resolved: https://github.com/facebook/react-native/pull/33468 Test Plan: **Android - 20 Jan 2023** https://github.com/facebook/react-native/pull/33468#issuecomment-1398228674 **iOS - 20 Jan 2023** https://github.com/facebook/react-native/pull/33468#issuecomment-1398249006 <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]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1072101477 "Test Cases of the functionality (Android - Fabric)" [2]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1105964322 "Test Cases of the functionality (Android - Paper)" [3]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1116329282 "Test Cases of the functionality (iOS - Fabric)" [6]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1087020844 "Runtime Error in main branch when passing value of 1 to TextInput placeholder prop" [7]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1096086753 "TalkBack error announcement done on next typed character with onChangeText" [8]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1082594363 "setting the TextInput errorMessage state with setTextAndSelection Java API from JavaScript" [9]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1082598745 "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]: https://github.com/facebook/react-native/commit/60b6c9be8e811241039a6db5dc906a0e88e6ba82 "draft implementation of android_errorMessage " [21]: https://github.com/facebook/react-native/commit/012d92d0b7e5de2436f186cdbff32ba128e537d5 "add errorMessage to ReactTextUpdate and maybeSetAccessibilityError" [22]: https://github.com/fabriziobertoglio1987/react-native/commit/cad239bded5748753cee2266c27809e24c6199fb "rename android_errorMessage to errorMessageAndroid" [23]: https://github.com/fabriziobertoglio1987/react-native/commit/0bae47434ef79eb606c453c5be8105b8df00783a "TextInput: keep C++ state in-sync with updated AttributedStrings in Java" [24]: https://github.com/fabriziobertoglio1987/react-native/commit/0556e86d09404105dc7ff695686b8b7c01911c5c "TextInput: support modifying TextInputs with multiple Fragments (Cxx side)" [25]: https://github.com/fabriziobertoglio1987/react-native/commit/7ab5eb4cafdea695c4c53ce2a737f6302afd6380 "AndroidTextInput: support using commands instead of setNativeProps (native change)" [26]: https://github.com/fabriziobertoglio1987/react-native/commit/b9491b7c5104066b2714045cd7710f995458c9e9 "TextInput: support editing completely empty TextInputs" [27]: https://github.com/fabriziobertoglio1987/react-native/commit/7f1ed6848f89bdccc7f7a5cc76019eec67e76b2f "Fabric: convertRawProp was extended to accept an optional default value" [28]: https://github.com/facebook/react-native/commit/6e0fa5f15eef71abcfb47750eb3669065ba2ab7d "Support optional types for C++ TurboModules" [29]: https://github.com/fabriziobertoglio1987/react-native/commit/baa66f63d8af2b772dea8ff8eda50eba264c3faf "Announce accessibility state changes happening in the background" [30]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1071989570 "Change of error state from onChangeText show/hides a TextInput error" [31]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1074827746 "understanding onChangeText callback" [32]: https://github.com/facebook/react-native/issues/29063#issuecomment-658189938 "Explanation on how TextInput calls SET_TEXT_AND_SELECTION in Java API" [33]: https://github.com/facebook/react-native/pull/33468#discussion_r835036889 "Explanation of TextInput state management with fabric C++ and JAVA API" [34]: https://github.com/facebook/react-native/pull/33468#discussion_r835036889 "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]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1080144483 "Analysis on how AndroidTextInputState.cpp sends updates to ReactTextInputManager" [36]: https://github.com/facebook/react-native/pull/33468#discussion_r848162849 "discussion on using announceForAccessibility in ReactEditText" [37]: https://github.com/fabriziobertoglio1987/react-native/commit/29eb632f1cb2ef5459253783eac43e5d7e999742 "Refactor MountingManager into MountingManager + SurfaceMountingManager" [38]: https://github.com/fabriziobertoglio1987/react-native/commit/733f2285067de401b925195266f4cec84c3f7fef "Diff C++ props for Android consumption" [39]: https://github.com/fabriziobertoglio1987/react-native/commit/91b3f5d48aa1322046b8c5335f8e2e1a5e702b67 "This diff implement and integrates Mapbuffer into Fabric text measure system" [40]: https://github.com/facebook/react-native/pull/29070 "[Android] Fix letters duplication when using autoCapitalize https://github.com/facebook/react-native/issues/29070" [50]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12 "Notes from work on iOS/Android: Text input error for screenreaders https://github.com/facebook/react-native/issues/12" [51]: https://github.com/facebook/react-native/issues/30848 "iOS/Android: Text input error for screenreaders https://github.com/facebook/react-native/issues/30848" [52]: https://github.com/facebook/react-native/issues/30859 "Android: Error state change (text inputs) https://github.com/facebook/react-native/issues/30859" [61]: https://github.com/facebook/react-native/pull/33468/commits/eb33c933c8bcb9a8421a6acdb7a51f261121be45 "fix annoucement delayed to next character" [70]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1116966512 "iOS - Paper renderer does not update the accessibilityValue" [71]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1124631221 "Test Cases of the functionality (Fabric) after removing changes to .cpp libs" [72]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1124892802 "Test Cases of the functionality (Paper) after removing changes to .cpp libs" [73]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1132830758 "iOS - announcing error onChangeText and screenreader focus" [74]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1150657065 "iOS - The screenreader announces the TextInput value after the errorMessage is cleared" [75]: https://github.com/fabriziobertoglio1987/react-native-notes/issues/12#issuecomment-1152285978 "iOS - Exception thrown while executing UI block: - [RCTTextView setOnAccessibiltyAction:]: unrecognized selector sent to instance (Paper) (main branch)" [76]: https://github.com/facebook/react-native/issues/30859#issuecomment-1158790381 "iOS - announce lastChar (not entire text) onChangeText and avoid multiple announcements (Fabric)" [77]: https://github.com/facebook/react-native/issues/30859#issuecomment-1158794863 "iOS - announces or does not announce the accessibilityError through Button onPress (not onChangeText) (Fabric)" [78]: https://github.com/facebook/react-native/issues/30859#issuecomment-1158797801 "iOS - the error is announced with accessibilityInvalid true and does not clear after typing text (onChangeText) (Fabric)" [79]: https://github.com/facebook/react-native/issues/30848#issuecomment-1162799299 "iOS - Exception thrown while executing UI block: - RCTUITextView setAccessibilityErrorMessage:]: unrecognized selector sent to instance (iOS - Paper on main branch)" [80]: https://github.com/fabriziobertoglio1987/react-native/commit/e13b9c6e49480e8262df06b7c1e99caab74e801f "RCTTextField was spliited into two classes" [81]: https://github.com/fabriziobertoglio1987/react-native/commit/ee9697e5155aa972564d5aac90ceeb9db100750d "Introducing RCTBackedTextInputDelegate" [82]: https://github.com/fabriziobertoglio1987/react-native/commit/2dd2529b3ab3ace39136a6e24c09f80ae421a17e "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]: https://github.com/facebook/react-native/issues/30859#issuecomment-1165395361 "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event" [88]: https://github.com/facebook/react-native/issues/30859#issuecomment-1165398153 "Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event" [89]: https://github.com/facebook/react-native/issues/30859#issuecomment-1165413245 "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric)" [100]: https://github.com/fabriziobertoglio1987/react-native/commit/110b191b14e3cb692bb6a33f0f129b4f0215f9a6 "Refactor ViewPropsMapBuffer -> general MapBuffer props mechanism" [101]: https://github.com/fabriziobertoglio1987/react-native/commit/22b6e1c8ec0e69700e9142cf5c9c1ab1e6a84b78 "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
React Native
Learn once, write anywhere:
Build mobile apps with React.
Getting Started · Learn the Basics · Showcase · Contribute · Community · Support
React Native brings React's declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.
- Declarative. React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
- Component-Based. Build encapsulated components that manage their state, then compose them to make complex UIs.
- Developer Velocity. See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
- Portability. Reuse code across iOS, Android, and other platforms.
React Native is developed and supported by many companies and individual core contributors. Find out more in our ecosystem overview.
Contents
- Requirements
- Building your first React Native app
- Documentation
- Upgrading
- How to Contribute
- Code of Conduct
- License
📋 Requirements
React Native apps may target iOS 12.4 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like Expo can be used to work around this.
🎉 Building your first React Native app
Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:
📖 Documentation
The full documentation for React Native can be found on our website.
The React Native documentation discusses components, APIs, and topics that are specific to React Native. For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.
The source for the React Native documentation and website is hosted on a separate repo, @facebook/react-native-website.
🚀 Upgrading
Upgrading to new versions of React Native may give you access to more APIs, views, developer tools, and other goodies. See the Upgrading Guide for instructions.
React Native releases are discussed in this discussion repo.
👏 How to Contribute
The main purpose of this repository is to continue evolving React Native core. We want to make contributing to this project as easy and transparent as possible, and we are grateful to the community for contributing bug fixes and improvements. Read below to learn how you can take part in improving React Native.
Code of Conduct
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Contributing Guide
Read our Contributing Guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Native.
Open Source Roadmap
You can learn more about our vision for React Native in the Roadmap.
Good First Issues
We have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Discussions
Larger discussions and proposals are discussed in @react-native-community/discussions-and-proposals.
📄 License
React Native is MIT licensed, as found in the LICENSE file.
React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.