-
Notifications
You must be signed in to change notification settings - Fork 24.2k
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
Android: Error state change (text inputs) #30859
Comments
@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 |
I'm working on this issue #30848 (comment) |
iOS - announce lastChar (not entire text) onChangeText and avoid multiple announcements (Fabric)
Commit fabOnReact@b53ed9d fixes the following issues on iOS Fabric (apply solution from Paper) 1)The error is announced, but not with the character onChangeText Related fabOnReact/react-native-notes#12 (comment) fabOnReact/react-native-notes#12 (comment) sourcecode
function AccessibilityErrorWithButtons(): React.Node {
const [text, setText] = React.useState('');
const [error, setError] = React.useState(null);
const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
return (
<View>
<RNTesterBlock>
<TextInput
accessibilityErrorMessage={error}
accessibilityInvalid={accessibilityInvalid}
onChangeText={newText => {
if (newText === 'Error') {
setError('this is the error');
setAccessibilityInvalid(true);
} else {
setError('');
setAccessibilityInvalid(false);
}
setText(newText);
}}
value={text}
style={styles.default}
/>
<Button
onPress={() => {
setError('This error is set with Button onPress callback');
}}
title="Press to set an accessibilityErrorMessage to a non-empty value"
/>
<Button
onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
title={`Press to set accessibilityInvalid to ${
accessibilityInvalid ? 'false' : 'true'
}`}
/>
<Button
onPress={() => setError('')}
title={`Press to set an empty error message`}
/>
</RNTesterBlock>
</View>
);
} low_quality.mp4 |
iOS - announces or does not announce the accessibilityError through Button onPress (not onChangeText) (Fabric)
sourcecode
function AccessibilityErrorWithButtons(): React.Node {
const [text, setText] = React.useState('');
const [error, setError] = React.useState(null);
const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
return (
<View>
<RNTesterBlock>
<TextInput
accessibilityErrorMessage={error}
accessibilityInvalid={accessibilityInvalid}
onChangeText={newText => {
if (newText === 'Error') {
setError('this is the error');
setAccessibilityInvalid(true);
} else {
setError('');
setAccessibilityInvalid(false);
}
setText(newText);
}}
value={text}
style={styles.default}
/>
<Button
onPress={() => {
setError('This error is set with Button onPress callback');
}}
title="Press to set an accessibilityErrorMessage to a non-empty value"
/>
<Button
onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
title={`Press to set accessibilityInvalid to ${
accessibilityInvalid ? 'false' : 'true'
}`}
/>
<Button
onPress={() => setError('')}
title={`Press to set an empty error message`}
/>
</RNTesterBlock>
</View>
);
} first_low.mp4 |
iOS - the error is announced with accessibilityInvalid true and does not clear after typing text (onChangeText) (Fabric)
sourcecode
function AccessibilityErrorDoesNotClear(): React.Node {
const [text, setText] = React.useState('');
const [error, setError] = React.useState('');
const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
return (
<View>
<RNTesterBlock title="TextView without label">
<Text>Set an error, change textinput value and then announce it.</Text>
<TextInput
accessibilityErrorMessage={error}
accessibilityInvalid={accessibilityInvalid}
value={text}
onChangeText={newText => setText(newText)}
style={styles.default}
/>
<Text>
The value of the accessibilityErrorMessage prop is{' '}
{error.length > 0 ? error : 'empty error'}
</Text>
<Button
onPress={() => {
setError('This is an error');
}}
title="sets accessibilityErrorMessage to 'This is an error'"
/>
<Button
onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
title={`Press to set accessibilityInvalid to ${
accessibilityInvalid ? 'false' : 'true'
}`}
/>
</RNTesterBlock>
</View>
);
} second_low.mp4 |
a regression that was already documented in the following posts facebook#30859 (comment) facebook#30859 (comment)
iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Paper)
Sourcecode of example
function AccessibilityErrorWithButtons(): React.Node {
const [text, setText] = React.useState('');
const [error, setError] = React.useState(null);
const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
return (
<View>
<RNTesterBlock>
<TextInput
accessibilityErrorMessage={error}
accessibilityInvalid={accessibilityInvalid}
onChangeText={newText => {
setText(newText);
if (newText === 'Error') {
setError('the newText is: ' + newText);
setAccessibilityInvalid(true);
} else if (newText === 'null') {
setAccessibilityInvalid(false);
}
}}
value={text}
style={styles.default}
/>
<Button
onPress={() => {
setError('This error is set with Button onPress callback');
}}
title="Press to set an accessibilityErrorMessage to a non-empty value"
/>
<Button
onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
title={`Press to set accessibilityInvalid to ${
accessibilityInvalid ? 'false' : 'true'
}`}
/>
<Button
onPress={() => setError('')}
title={`Press to set an empty error message`}
/>
</RNTesterBlock>
</View>
);
} https://drive.google.com/file/d/1k8ex9CVOrAYyLKv3k5ZzTokerhVGnvbo/view?usp=sharing |
Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event
Sourcecode of example
function AccessibilityErrorWithButtons(): React.Node {
const [text, setText] = React.useState('');
const [error, setError] = React.useState(null);
const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
return (
<View>
<RNTesterBlock>
<TextInput
accessibilityErrorMessage={error}
accessibilityInvalid={accessibilityInvalid}
onChangeText={newText => {
setText(newText);
if (newText === 'Error') {
setError('the newText is: ' + newText);
setAccessibilityInvalid(true);
} else if (newText === 'null') {
setAccessibilityInvalid(false);
}
}}
value={text}
style={styles.default}
/>
<Button
onPress={() => {
setError('This error is set with Button onPress callback');
}}
title="Press to set an accessibilityErrorMessage to a non-empty value"
/>
<Button
onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
title={`Press to set accessibilityInvalid to ${
accessibilityInvalid ? 'false' : 'true'
}`}
/>
<Button
onPress={() => setError('')}
title={`Press to set an empty error message`}
/>
</RNTesterBlock>
</View>
);
} https://drive.google.com/file/d/1kAHHrYKXP6tRFf7w1_rcxOFp3cCa2L_C/view?usp=sharing |
iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event (Fabric)
Sourcecode of example
function AccessibilityErrorWithButtons(): React.Node {
const [text, setText] = React.useState('');
const [error, setError] = React.useState(null);
const [accessibilityInvalid, setAccessibilityInvalid] = React.useState(false);
return (
<View>
<RNTesterBlock>
<TextInput
accessibilityErrorMessage={error}
accessibilityInvalid={accessibilityInvalid}
onChangeText={newText => {
setText(newText);
if (newText === 'Error') {
setError('the newText is: ' + newText);
setAccessibilityInvalid(true);
} else if (newText === 'null') {
setAccessibilityInvalid(false);
}
}}
value={text}
style={styles.default}
/>
<Button
onPress={() => {
setError('This error is set with Button onPress callback');
}}
title="Press to set an accessibilityErrorMessage to a non-empty value"
/>
<Button
onPress={() => setAccessibilityInvalid(!accessibilityInvalid)}
title={`Press to set accessibilityInvalid to ${
accessibilityInvalid ? 'false' : 'true'
}`}
/>
<Button
onPress={() => setError('')}
title={`Press to set an empty error message`}
/>
</RNTesterBlock>
</View>
);
} https://drive.google.com/file/d/1kDFzd_YKUUTQAjzZAOnyum4dIa-Z5UT7/view?usp=sharing |
I moved PR #33468 Ready for Review. |
Summary: **Android**: The functionality consists of calling the [AccessibilityNodeInfo#setError][10] and [#setContentInvalid][13] 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][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 [#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][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 #29070] - [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 #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 Pull Request resolved: #33468 Test Plan: **Android - 20 Jan 2023** #33468 (comment) **iOS - 20 Jan 2023** #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]: 60b6c9b "draft implementation of android_errorMessage " [21]: 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]: 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]: #29063 (comment) "Explanation on how TextInput calls SET_TEXT_AND_SELECTION in Java API" [33]: #33468 (comment) "Explanation of TextInput state management with fabric C++ and JAVA API" [34]: #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]: #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]: #29070 "[Android] Fix letters duplication when using autoCapitalize #29070" [50]: fabOnReact/react-native-notes#12 "Notes from work on iOS/Android: Text input error for screenreaders #12" [51]: #30848 "iOS/Android: Text input error for screenreaders #30848" [52]: #30859 "Android: Error state change (text inputs) #30859" [61]: 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]: #30859 (comment) "iOS - announce lastChar (not entire text) onChangeText and avoid multiple announcements (Fabric)" [77]: #30859 (comment) "iOS - announces or does not announce the accessibilityError through Button onPress (not onChangeText) (Fabric)" [78]: #30859 (comment) "iOS - the error is announced with accessibilityInvalid true and does not clear after typing text (onChangeText) (Fabric)" [79]: #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]: #30859 (comment) "iOS - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event" [88]: #30859 (comment) "Android - accessibilityValue announces correctly with/out errorMessage set with onChangeText or with outside event" [89]: #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
…#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 [facebook#30848] - 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 [facebook#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][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 facebook#29070] - [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) facebook#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
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days. |
This issue was closed because it has been stalled for 7 days with no activity. |
PR was not merged. Could add this task to my todo |
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
The text was updated successfully, but these errors were encountered: