2/2 TextInput accessibilityErrorMessage (VoiceOver, iOS)

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,

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`.

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.
    *

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}

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}

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/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)

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

@@ -55,6 +55,13 @@ @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 _triggerAccessibilityAnnouncement;
+  BOOL _skipNextAccessibilityAnnouncement;
 }
 
 #pragma mark - UIView overrides
@@ -71,6 +78,8 @@ - (instancetype)initWithFrame:(CGRect)frame
     _ignoreNextTextInputCall = NO;
     _comingFromJS = NO;
     _didMoveToWindow = NO;
+    _triggerAccessibilityAnnouncement = NO;
+    _skipNextAccessibilityAnnouncement = NO;
     [self addSubview:_backedTextInputView];
   }
 
@@ -133,6 +142,15 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _backedTextInputView.editable = newTextInputProps.traits.editable;
   }
 
+  NSString *newAccessibilityErrorMessage = RCTNSStringFromString(newTextInputProps.accessibilityErrorMessage);
+  if (newTextInputProps.text != oldTextInputProps.text && [newAccessibilityErrorMessage length] == 0) {
+    _backedTextInputView.accessibilityValue = RCTNSStringFromString(newTextInputProps.text);
+  }
+
+  if (newTextInputProps.accessibilityErrorMessage != oldTextInputProps.accessibilityErrorMessage) {
+    [self _setAccessibilityValueWithError:RCTNSStringFromString(newTextInputProps.accessibilityErrorMessage) text:RCTNSStringFromString(newTextInputProps.text)];
+  } 
+
   if (newTextInputProps.traits.enablesReturnKeyAutomatically !=
       oldTextInputProps.traits.enablesReturnKeyAutomatically) {
     _backedTextInputView.enablesReturnKeyAutomatically = newTextInputProps.traits.enablesReturnKeyAutomatically;
@@ -236,6 +254,15 @@ - (void)updateState:(State::Shared const &)state oldState:(State::Shared const &
   }
 }
 
+- (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
+{
+  [super finalizeUpdates:updateMask];
+  if (_triggerAccessibilityAnnouncement) {
+    [self announceForAccessibility:self.accessibilityElement.accessibilityValue];
+    _triggerAccessibilityAnnouncement = NO;
+  }
+}
+
 - (void)updateLayoutMetrics:(LayoutMetrics const &)layoutMetrics
            oldLayoutMetrics:(LayoutMetrics const &)oldLayoutMetrics
 {
@@ -594,6 +621,16 @@ - (void)_setAttributedString:(NSAttributedString *)attributedString
   UITextRange *selectedRange = _backedTextInputView.selectedTextRange;
   NSInteger oldTextLength = _backedTextInputView.attributedText.string.length;
   _backedTextInputView.attributedText = attributedString;
+
+  if (_triggerAccessibilityAnnouncement && [self.accessibilityElement.accessibilityValue length] != 0) {
+    [self announceForAccessibility:self.accessibilityElement.accessibilityValue];
+    _triggerAccessibilityAnnouncement = NO;
+    _skipNextAccessibilityAnnouncement = YES;
+  } else if (_skipNextAccessibilityAnnouncement) {
+    NSString *lastChar = [attributedString.string substringFromIndex:[attributedString.string length] - 1];
+    [self announceForAccessibility:lastChar];
+    _skipNextAccessibilityAnnouncement = NO;
+  }
   if (selectedRange.empty) {
     // Maintaining a cursor position relative to the end of the old text.
     NSInteger offsetStart = [_backedTextInputView offsetFromPosition:_backedTextInputView.beginningOfDocument
@@ -619,6 +656,17 @@ - (void)_setMultiline:(BOOL)multiline
   [self addSubview:_backedTextInputView];
 }
 
+- (void)_setAccessibilityValueWithError:(NSString *)error text:(NSString *)text
+{
+  if ([error length] != 0) {
+    _triggerAccessibilityAnnouncement = YES;
+    _backedTextInputView.accessibilityValue = [NSString stringWithFormat: @"%@ %@", text, error];
+  } else {
+    _backedTextInputView.accessibilityValue = text;
+    _triggerAccessibilityAnnouncement = NO;
+  }
+}
+
 - (BOOL)_textOf:(NSAttributedString *)newText equals:(NSAttributedString *)oldText
 {
   // When the dictation is running we can't update the attributed text on the backed up text view

React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h

@@ -85,6 +85,7 @@ NS_ASSUME_NONNULL_BEGIN
  * This is a fragment of temporary workaround that we need only temporary and will get rid of soon.
  */
 - (NSString *)componentViewName_DO_NOT_USE_THIS_IS_BROKEN;
+- (void)announceForAccessibility:(NSString *)announcement;
 
 @end
 

React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -412,6 +412,15 @@ - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
   [self invalidateLayer];
 }
 
+- (void)announceForAccessibility:(NSString*)announcement
+{
+  if (@available(iOS 11.0, *)) {
+    if ([announcement length] != 0) {
+      UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, announcement);
+    }
+  }
+}
+
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];

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(

ReactCommon/react/renderer/components/textinput/iostextinput/TextInputProps.cpp

@@ -87,6 +87,12 @@ TextInputProps::TextInputProps(
           "selection",
           sourceProps.selection,
           std::optional<Selection>())),
+      accessibilityErrorMessage(convertRawProp(
+            context,
+            rawProps,
+            "accessibilityErrorMessage",
+            sourceProps.accessibilityErrorMessage,
+            {})),
       inputAccessoryViewID(convertRawProp(
           context,
           rawProps,

ReactCommon/react/renderer/components/textinput/iostextinput/TextInputProps.h

@@ -68,6 +68,8 @@ class TextInputProps final : public ViewProps, public BaseTextProps {
 
   std::string const inputAccessoryViewID{};
 
+  std::string accessibilityErrorMessage{""};
+
   bool onKeyPressSync{false};
   bool onChangeSync{false};