facebook · fabOnReact · Mar 4, 2022 · Mar 6, 2022 · Mar 12, 2022 · Mar 12, 2022
diff --git a/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js
@@ -166,6 +166,14 @@ export type NativeProps = $ReadOnly<{|
     'off',
   >,
 
+  /**
+   * String to be read by screenreaders to indicate an error state. The acceptable parameters
+   * of accessibilityErrorMessage is a string. Setting accessibilityInvalid to true activates
+   * the error message. Setting accessibilityInvalid to false removes the error message.
+   */
+  accessibilityErrorMessage?: ?Stringish,
+  accessibilityInvalid?: ?boolean,
+
   /**
    * Sets the return key to the label. Use it instead of `returnKeyType`.
    * @platform android
@@ -726,6 +734,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     inlineImageLeft: true,
     editable: true,
     fontVariant: true,
+    accessibilityErrorMessage: true,
+    accessibilityInvalid: true,
     borderBottomRightRadius: true,
     borderBottomColor: {process: require('../../StyleSheet/processColor')},
     borderRadius: true,

diff --git a/Libraries/Components/TextInput/RCTTextInputViewConfig.js b/Libraries/Components/TextInput/RCTTextInputViewConfig.js
@@ -107,6 +107,8 @@ const RCTTextInputViewConfig = {
     allowFontScaling: true,
     fontStyle: true,
     textTransform: true,
+    accessibilityErrorMessage: true,
+    accessibilityInvalid: true,
     textAlign: true,
     fontFamily: true,
     lineHeight: true,

diff --git a/Libraries/Components/TextInput/TextInput.d.ts b/Libraries/Components/TextInput/TextInput.d.ts
@@ -521,6 +521,14 @@ export interface TextInputProps
     TextInputIOSProps,
     TextInputAndroidProps,
     AccessibilityProps {
+  /**
+   * String to be read by screenreaders to indicate an error state. The acceptable parameters
+   * of accessibilityErrorMessage is a string. Setting accessibilityInvalid to true activates
+   * the error message. Setting accessibilityInvalid to false removes the error message.
+   */
+  accessibilityErrorMessage?: string | undefined;
+  accessibilityInvalid?: boolean | undefined;
+
   /**
    * Specifies whether fonts should scale to respect Text Size accessibility settings.
    * The default is `true`.

diff --git a/Libraries/Components/TextInput/TextInput.flow.js b/Libraries/Components/TextInput/TextInput.flow.js
@@ -523,6 +523,14 @@ export type Props = $ReadOnly<{|
   ...IOSProps,
   ...AndroidProps,
 
+  /**
+   * String to be read by screenreaders to indicate an error state. The acceptable parameters
+   * of accessibilityErrorMessage is a string. Setting accessibilityInvalid to true activates
+   * the error message. Setting accessibilityInvalid to false removes the error message.
+   */
+  accessibilityErrorMessage?: ?Stringish,
+  accessibilityInvalid?: ?boolean,
+
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
    *

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -561,6 +561,14 @@ export type Props = $ReadOnly<{|
   ...IOSProps,
   ...AndroidProps,
 
+  /**
+   * String to be read by screenreaders to indicate an error state. The acceptable parameters
+   * of accessibilityErrorMessage is a string. Setting accessibilityInvalid to true activates
+   * the error message. Setting accessibilityInvalid to false removes the error message.
+   */
+  accessibilityErrorMessage?: ?Stringish,
+  accessibilityInvalid?: ?boolean,
+
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
    *
@@ -1365,6 +1373,12 @@ function InternalTextInput(props: Props): React.Node {
   }
 
   const accessible = props.accessible !== false;
+
+  const accessibilityErrorMessage =
+    props.accessibilityInvalid === true
+      ? props.accessibilityErrorMessage
+      : null;
+
   const focusable = props.focusable !== false;
 
   const config = React.useMemo(
@@ -1439,6 +1453,7 @@ function InternalTextInput(props: Props): React.Node {
         ref={ref}
         {...otherProps}
         {...eventHandlers}
+        accessibilityErrorMessage={accessibilityErrorMessage}
         accessibilityState={_accessibilityState}
         accessible={accessible}
         submitBehavior={submitBehavior}
@@ -1490,6 +1505,7 @@ function InternalTextInput(props: Props): React.Node {
         ref={ref}
         {...otherProps}
         {...eventHandlers}
+        accessibilityErrorMessage={accessibilityErrorMessage}
         accessibilityState={_accessibilityState}
         accessibilityLabelledBy={_accessibilityLabelledBy}
         accessible={accessible}

diff --git a/Libraries/Components/TextInput/__tests__/TextInput-test.js b/Libraries/Components/TextInput/__tests__/TextInput-test.js
@@ -186,6 +186,7 @@ describe('TextInput', () => {
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTSinglelineTextInputView
+        accessibilityErrorMessage={null}
         accessible={true}
         allowFontScaling={true}
         focusable={true}
@@ -231,6 +232,7 @@ describe('TextInput compat with web', () => {
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTSinglelineTextInputView
+        accessibilityErrorMessage={null}
         accessible={true}
         allowFontScaling={true}
         focusable={true}
@@ -315,6 +317,7 @@ describe('TextInput compat with web', () => {
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTSinglelineTextInputView
+        accessibilityErrorMessage={null}
         accessibilityState={
           Object {
             "busy": true,
@@ -407,6 +410,7 @@ describe('TextInput compat with web', () => {
 
     expect(instance.toJSON()).toMatchInlineSnapshot(`
       <RCTSinglelineTextInputView
+        accessibilityErrorMessage={null}
         accessible={true}
         allowFontScaling={true}
         focusable={true}

diff --git a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`TextInput tests should render as expected: should deep render when mocked (please verify output manually) 1`] = `
 <RCTSinglelineTextInputView
+  accessibilityErrorMessage={null}
   accessible={true}
   allowFontScaling={true}
   focusable={true}
@@ -31,6 +32,7 @@ exports[`TextInput tests should render as expected: should deep render when mock
 
 exports[`TextInput tests should render as expected: should deep render when not mocked (please verify output manually) 1`] = `
 <RCTSinglelineTextInputView
+  accessibilityErrorMessage={null}
   accessible={true}
   allowFontScaling={true}
   focusable={true}

diff --git a/Libraries/Text/TextInput/Multiline/RCTUITextView.h b/Libraries/Text/TextInput/Multiline/RCTUITextView.h
@@ -26,6 +26,9 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign, readonly) BOOL textWasPasted;
 @property (nonatomic, copy, nullable) NSString *placeholder;
 @property (nonatomic, strong, nullable) UIColor *placeholderColor;
+@property (nonatomic, assign, nullable) NSString *accessibilityErrorMessage;
+@property (nonatomic, readwrite, nullable) NSString *currentAccessibilityError;
 _backedTextInputView = props.traits.multiline ? [RCTUITextView new] : [RCTUITextField new]; 
 _backedTextInputView = props.traits.multiline ? [RCTUITextView new] : [RCTUITextField new]; 
+@property (nonatomic, readwrite, nullable) NSString *previousAccessibilityError;
 
 @property (nonatomic, assign) CGFloat preferredMaxLayoutWidth;
 

diff --git a/Libraries/Text/TextInput/Multiline/RCTUITextView.m b/Libraries/Text/TextInput/Multiline/RCTUITextView.m
@@ -121,6 +121,24 @@ - (void)setDefaultTextAttributes:(NSDictionary<NSAttributedStringKey, id> *)defa
   [self _updatePlaceholder];
 }
 
+- (void)setAccessibilityErrorMessage:(NSString *)accessibilityErrorMessage
+{
+  self.previousAccessibilityError = [self.currentAccessibilityError mutableCopy];
+  self.currentAccessibilityError = accessibilityErrorMessage;
+  NSString *text = self.attributedText == nil ? @"" : self.attributedText.string;
+  NSString *lastChar = [text length] == 0 ? @"" : [text substringFromIndex:[text length] - 1];
+  if (accessibilityErrorMessage != nil) {
+    NSString *errorWithLastCharacter = [NSString stringWithFormat: @"%@ %@", lastChar, accessibilityErrorMessage];
+    NSString *errorWithText = [NSString stringWithFormat: @"%@ %@", text, accessibilityErrorMessage];
+    self.accessibilityValue = errorWithText;
+    // onChangeText announce only the last typed/deleted character
+    // more info at https://bit.ly/3zOHsda
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, errorWithLastCharacter);
+  } else {
+    self.accessibilityValue = nil;
+  }
+}
+
 - (NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes
 {
   return _defaultTextAttributes;

diff --git a/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h b/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h
@@ -15,6 +15,9 @@ NS_ASSUME_NONNULL_BEGIN
 @protocol RCTBackedTextInputViewProtocol <UITextInput>
 
 @property (nonatomic, copy, nullable) NSAttributedString *attributedText;
+@property (nonatomic, assign, nullable) NSString *accessibilityErrorMessage;
+@property (nonatomic, readwrite, nullable) NSString *currentAccessibilityError;
+@property (nonatomic, readwrite, nullable) NSString *previousAccessibilityError;
 @property (nonatomic, copy, nullable) NSString *placeholder;
 @property (nonatomic, strong, nullable) UIColor *placeholderColor;
 @property (nonatomic, assign, readonly) BOOL textWasPasted;

diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.m b/Libraries/Text/TextInput/RCTBaseTextInputView.m
@@ -148,6 +148,17 @@ - (void)setAttributedText:(NSAttributedString *)attributedText
 
   textNeedsUpdate = ([self textOf:attributedTextCopy equals:backedTextInputViewTextCopy] == NO);
 
+  NSString *currentAccessibilityError = self.backedTextInputView.currentAccessibilityError;
+  NSString *previousAccessibilityError = self.backedTextInputView.previousAccessibilityError;
+  BOOL accessibilityErrorMessageWasRemoved = currentAccessibilityError == nil && ![currentAccessibilityError isEqualToString: previousAccessibilityError];
+  if (accessibilityErrorMessageWasRemoved) {
+    BOOL validString = attributedText && [attributedText.string length] != 0;
+    NSString *lastChar = validString ? [attributedText.string substringFromIndex:[attributedText.string length] - 1] : @"";
+    self.backedTextInputView.accessibilityValue = nil;
+    // Triggering the announcement manually fixes screenreader announcement getting cut off
+    // https://bit.ly/3w18QmV https://bit.ly/3AdVKW3 https://bit.ly/3QHm7c7 https://bit.ly/3BVnmAy
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, lastChar);
+  }
   if (eventLag == 0 && textNeedsUpdate) {
     UITextRange *selection = self.backedTextInputView.selectedTextRange;
     NSInteger oldTextLength = self.backedTextInputView.attributedText.string.length;

diff --git a/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m b/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m
@@ -36,6 +36,7 @@ @implementation RCTBaseTextInputViewManager {
 RCT_REMAP_VIEW_PROPERTY(autoCorrect, backedTextInputView.autocorrectionType, UITextAutocorrectionType)
 RCT_REMAP_VIEW_PROPERTY(contextMenuHidden, backedTextInputView.contextMenuHidden, BOOL)
 RCT_REMAP_VIEW_PROPERTY(editable, backedTextInputView.editable, BOOL)
+RCT_REMAP_VIEW_PROPERTY(accessibilityErrorMessage, backedTextInputView.accessibilityErrorMessage, NSString)
 RCT_REMAP_VIEW_PROPERTY(enablesReturnKeyAutomatically, backedTextInputView.enablesReturnKeyAutomatically, BOOL)
 RCT_REMAP_VIEW_PROPERTY(keyboardAppearance, backedTextInputView.keyboardAppearance, UIKeyboardAppearance)
 RCT_REMAP_VIEW_PROPERTY(placeholder, backedTextInputView.placeholder, NSString)

diff --git a/Libraries/Text/TextInput/Singleline/RCTUITextField.h b/Libraries/Text/TextInput/Singleline/RCTUITextField.h
@@ -27,6 +27,9 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, strong, nullable) UIColor *placeholderColor;
 @property (nonatomic, assign) UIEdgeInsets textContainerInset;
 @property (nonatomic, assign, getter=isEditable) BOOL editable;
+@property (nonatomic, assign, nullable) NSString *accessibilityErrorMessage;
+@property (nonatomic, readwrite, nullable) NSString *currentAccessibilityError;
+@property (nonatomic, readwrite, nullable) NSString *previousAccessibilityError;
 @property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled;
 @property (nonatomic, strong, nullable) NSString *inputAccessoryViewID;
 @property (nonatomic, assign, readonly) CGFloat zoomScale;

diff --git a/Libraries/Text/TextInput/Singleline/RCTUITextField.m b/Libraries/Text/TextInput/Singleline/RCTUITextField.m
@@ -99,6 +99,24 @@ - (void)setEditable:(BOOL)editable
   self.enabled = editable;
 }
 
+- (void)setAccessibilityErrorMessage:(NSString *)accessibilityErrorMessage
+{
+  self.previousAccessibilityError = [self.currentAccessibilityError mutableCopy];
+  self.currentAccessibilityError = accessibilityErrorMessage;
+  NSString *text = self.attributedText == nil ? @"" : self.attributedText.string;
+  NSString *lastChar = [text length] == 0 ? @"" : [text substringFromIndex:[text length] - 1];
+  if (accessibilityErrorMessage != nil) {
+    NSString *errorWithLastCharacter = [NSString stringWithFormat: @"%@ %@", lastChar, accessibilityErrorMessage];
+    NSString *errorWithText = [NSString stringWithFormat: @"%@ %@", text, accessibilityErrorMessage];
+    self.accessibilityValue = errorWithText;
+    // onChangeText announce only the last typed/deleted character
+    // more info at https://bit.ly/3zOHsda
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, errorWithLastCharacter);
+  } else {
+    self.accessibilityValue = nil;
+  }
+}
+
 - (void)setSecureTextEntry:(BOOL)secureTextEntry
 {
   if (self.secureTextEntry == secureTextEntry) {

diff --git a/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
@@ -32,6 +32,8 @@ @implementation RCTTextInputComponentView {
   UIView<RCTBackedTextInputViewProtocol> *_backedTextInputView;
   NSUInteger _mostRecentEventCount;
   NSAttributedString *_lastStringStateWasUpdatedWith;
+  NSString *currentAccessibilityError;
+  NSString *previousAccessibilityError;
 
   /*
    * UIKit uses either UITextField or UITextView as its UIKit element for <TextInput>. UITextField is for single line
@@ -55,6 +57,12 @@ @implementation RCTTextInputComponentView {
    */
   BOOL _comingFromJS;
   BOOL _didMoveToWindow;
+
+  /*
+   * A flag that triggers the accessibilityElement.accessibilityValue update and VoiceOver announcement
+   * to avoid duplicated announcements of accessibilityErrorMessage more info https://bit.ly/3yfUXD8 
+   */
+  BOOL _errorMessageRemoved;
 }
 
 #pragma mark - UIView overrides
@@ -71,6 +79,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _ignoreNextTextInputCall = NO;
     _comingFromJS = NO;
     _didMoveToWindow = NO;
+    _errorMessageRemoved = NO;
     [self addSubview:_backedTextInputView];
   }
 
@@ -133,6 +142,22 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _backedTextInputView.editable = newTextInputProps.traits.editable;
   }
 
+  if (newTextInputProps.accessibilityErrorMessage != oldTextInputProps.accessibilityErrorMessage || newTextInputProps.text != oldTextInputProps.text) {
+    NSString *text = RCTNSStringFromString(newTextInputProps.text);
+    NSString *error = RCTNSStringFromString(newTextInputProps.accessibilityErrorMessage);
+    NSString *lastChar = [text length] == 0 ? @"" : [text substringFromIndex:[text length] - 1];
+    if ([error length] != 0) {
+      NSString *errorWithLastCharacter = [NSString stringWithFormat: @"%@ %@", lastChar, error];
+      NSString *errorWithText = [NSString stringWithFormat: @"%@ %@", text, error];
+      self.accessibilityElement.accessibilityValue = errorWithText;
+      UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, errorWithLastCharacter);
+      self->_errorMessageRemoved = NO;
+    } else {
+      self.accessibilityElement.accessibilityValue = text;
+      self->_errorMessageRemoved = YES;
+    }
+  } 
+
   if (newTextInputProps.traits.enablesReturnKeyAutomatically !=
       oldTextInputProps.traits.enablesReturnKeyAutomatically) {
     _backedTextInputView.enablesReturnKeyAutomatically = newTextInputProps.traits.enablesReturnKeyAutomatically;
@@ -589,6 +614,13 @@ - (void)_setAttributedString:(NSAttributedString *)attributedString
   UITextRange *selectedRange = _backedTextInputView.selectedTextRange;
   NSInteger oldTextLength = _backedTextInputView.attributedText.string.length;
   _backedTextInputView.attributedText = attributedString;
+  if (self->_errorMessageRemoved) {
+    _backedTextInputView.accessibilityValue = attributedString.string;
+    self.accessibilityElement.accessibilityValue = attributedString.string;
+    NSString *lastChar = [attributedString.string substringFromIndex:[attributedString.string length] - 1];
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, lastChar);
+    self->_errorMessageRemoved = NO;
+  }
   if (selectedRange.empty) {
     // Maintaining a cursor position relative to the end of the old text.
     NSInteger offsetStart = [_backedTextInputView offsetFromPosition:_backedTextInputView.beginningOfDocument

diff --git a/React/Views/UIView+React.h b/React/Views/UIView+React.h
@@ -121,6 +121,7 @@
 @property (nonatomic, copy) NSArray<NSDictionary *> *accessibilityActions;
 @property (nonatomic, copy) NSDictionary *accessibilityValueInternal;
 @property (nonatomic, copy) NSString *accessibilityLanguage;
+@property (nonatomic, copy) NSString *accessibilityErrorMessage;
 
 /**
  * Used in debugging to get a description of the view hierarchy rooted at

diff --git a/React/Views/UIView+React.m b/React/Views/UIView+React.m
@@ -320,6 +320,17 @@ - (NSString *)accessibilityLanguage
   return objc_getAssociatedObject(self, _cmd);
 }
 
+- (NSString *)accessibilityErrorMessage
+{
+  return objc_getAssociatedObject(self, _cmd);
+}
+
+- (void)setAccessibilityErrorMessage:(NSString *)accessibilityErrorMessage
+{
+  objc_setAssociatedObject(
+      self, @selector(accessibilityErrorMessage), accessibilityErrorMessage, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+}
+
 - (void)setAccessibilityLanguage:(NSString *)accessibilityLanguage
 {
   objc_setAssociatedObject(

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java
@@ -251,6 +251,11 @@ public void setAccessibilityRole(@NonNull T view, @Nullable String accessibility
     view.setTag(R.id.accessibility_role, AccessibilityRole.fromValue(accessibilityRole));
   }
 
+  @ReactProp(name = "accessibilityErrorMessage")
+  public void setScreenreaderError(@NonNull T view, @Nullable String accessibilityErrorMessage) {
+    view.setTag(R.id.accessibility_error_message, accessibilityErrorMessage);
+  }
+
   @Override
   @ReactProp(name = ViewProps.ACCESSIBILITY_COLLECTION)
   public void setAccessibilityCollection(