1/2 TextInput accessibilityErrorMessage (Talkback, Android)

Libraries/Components/TextInput/AndroidTextInputNativeComponent.js

@@ -165,6 +165,19 @@ 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,
+
+  /**
+   * Setting accessibilityInvalid to true activates the error message. Setting accessibilityInvalid
+   * to false removes the error message.
+   */
+  accessibilityInvalid?: ?boolean,
+
   /**
    * Sets the return key to the label. Use it instead of `returnKeyType`.
    * @platform android
@@ -725,6 +738,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,

Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -106,6 +106,8 @@ const RCTTextInputViewConfig = {
     allowFontScaling: true,
     fontStyle: true,
     textTransform: true,
+    accessibilityErrorMessage: true,
+    accessibilityInvalid: true,
     textAlign: true,
     fontFamily: true,
     lineHeight: true,

Libraries/Components/TextInput/TextInput.js

@@ -477,6 +477,20 @@ 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,
+
+  /**
+   * Setting accessibilityInvalid to true activates the error message. Setting accessibilityInvalid
+   * to false removes the error message.
+   * The default value is `false`.
+   */
+  accessibilityInvalid?: ?boolean,
+
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
    *
@@ -1239,6 +1253,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(
@@ -1295,6 +1315,7 @@ function InternalTextInput(props: Props): React.Node {
         {...props}
         {...eventHandlers}
         accessible={accessible}
+        accessibilityErrorMessage={accessibilityErrorMessage}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
@@ -1342,6 +1363,7 @@ function InternalTextInput(props: Props): React.Node {
         {...props}
         {...eventHandlers}
         accessible={accessible}
+        accessibilityErrorMessage={accessibilityErrorMessage}
         autoCapitalize={autoCapitalize}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}

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}

Libraries/Text/TextInput/Multiline/RCTUITextView.h

@@ -26,6 +26,8 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign, readonly) BOOL textWasPasted;
 @property (nonatomic, copy, nullable) NSString *placeholder;
 @property (nonatomic, strong, nullable) UIColor *placeholderColor;
+@property (nonatomic, readwrite, nullable) NSString *currentAccessibilityError;
+@property (nonatomic, readwrite, nullable) NSString *previousAccessibilityError;
 
 @property (nonatomic, assign) CGFloat preferredMaxLayoutWidth;
 

Libraries/Text/TextInput/Multiline/RCTUITextView.m

@@ -120,6 +120,22 @@ - (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;
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, errorWithLastCharacter);
+  } else {
+    self.accessibilityValue = nil;
+  }
+}
+
 - (NSDictionary<NSAttributedStringKey, id> *)defaultTextAttributes
 {
   return _defaultTextAttributes;

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;

Libraries/Text/TextInput/RCTBaseTextInputView.m

@@ -145,6 +145,15 @@ - (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;
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, lastChar);
+  }
   if (eventLag == 0 && textNeedsUpdate) {
     UITextRange *selection = self.backedTextInputView.selectedTextRange;
     NSInteger oldTextLength = self.backedTextInputView.attributedText.string.length;

Libraries/Text/TextInput/RCTBaseTextInputViewManager.m

@@ -37,6 +37,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)

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, readwrite, nullable) NSString *currentAccessibilityError;
+@property (nonatomic, readwrite, nullable) NSString *previousAccessibilityError;
+@property (nonatomic, readwrite, nullable) NSString *accessibilityErrorMessage;
 @property (nonatomic, getter=isScrollEnabled) BOOL scrollEnabled;
 @property (nonatomic, strong, nullable) NSString *inputAccessoryViewID;
 @property (nonatomic, assign, readonly) CGFloat zoomScale;

Libraries/Text/TextInput/Singleline/RCTUITextField.m

@@ -98,6 +98,22 @@ - (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;
+    UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, errorWithLastCharacter);
+  } else {
+    self.accessibilityValue = nil;
+  }
+}
+
 - (void)setSecureTextEntry:(BOOL)secureTextEntry
 {
   if (self.secureTextEntry == secureTextEntry) {

React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -33,6 +33,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
@@ -56,6 +58,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
@@ -72,6 +80,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _ignoreNextTextInputCall = NO;
     _comingFromJS = NO;
     _didMoveToWindow = NO;
+    _errorMessageRemoved = NO;
     [self addSubview:_backedTextInputView];
   }
 
@@ -134,6 +143,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;
@@ -590,6 +615,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

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

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(

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(

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java

@@ -11,6 +11,7 @@
 
 import android.text.Layout;
 import android.text.Spannable;
+import androidx.annotation.Nullable;
 
 /**
  * Class that contains the data needed for a text update. Used by both <Text/> and <TextInput/>
@@ -30,6 +31,7 @@ public class ReactTextUpdate {
   private final int mSelectionStart;
   private final int mSelectionEnd;
   private final int mJustificationMode;
+  private @Nullable String mAccessibilityErrorMessage;
 
   public boolean mContainsMultipleFragments;
 
@@ -59,7 +61,8 @@ public ReactTextUpdate(
         Layout.BREAK_STRATEGY_HIGH_QUALITY,
         Layout.JUSTIFICATION_MODE_NONE,
         -1,
-        -1);
+        -1,
+        null);
   }
 
   public ReactTextUpdate(
@@ -85,7 +88,8 @@ public ReactTextUpdate(
         textBreakStrategy,
         justificationMode,
         -1,
-        -1);
+        -1,
+        null);
   }
 
   public ReactTextUpdate(
@@ -107,7 +111,8 @@ public ReactTextUpdate(
         textBreakStrategy,
         justificationMode,
         -1,
-        -1);
+        -1,
+        null);
   }
 
   public ReactTextUpdate(
@@ -122,7 +127,8 @@ public ReactTextUpdate(
       int textBreakStrategy,
       int justificationMode,
       int selectionStart,
-      int selectionEnd) {
+      int selectionEnd,
+      @Nullable String accessibilityErrorMessage) {
     mText = text;
     mJsEventCounter = jsEventCounter;
     mContainsImages = containsImages;
@@ -135,6 +141,7 @@ public ReactTextUpdate(
     mSelectionStart = selectionStart;
     mSelectionEnd = selectionEnd;
     mJustificationMode = justificationMode;
+    mAccessibilityErrorMessage = accessibilityErrorMessage;
   }
 
   public static ReactTextUpdate buildReactTextUpdateFromState(
@@ -143,15 +150,21 @@ public static ReactTextUpdate buildReactTextUpdateFromState(
       int textAlign,
       int textBreakStrategy,
       int justificationMode,
-      boolean containsMultipleFragments) {
+      boolean containsMultipleFragments,
+      @Nullable String accessibilityErrorMessage) {
 
     ReactTextUpdate reactTextUpdate =
         new ReactTextUpdate(
             text, jsEventCounter, false, textAlign, textBreakStrategy, justificationMode);
     reactTextUpdate.mContainsMultipleFragments = containsMultipleFragments;
+    reactTextUpdate.mAccessibilityErrorMessage = accessibilityErrorMessage;
     return reactTextUpdate;
   }
 
+  public @Nullable String getScreenreaderError() {
+    return mAccessibilityErrorMessage;
+  }
+
   public Spannable getText() {
     return mText;
   }