1/2 TextInput accessibilityErrorMessage (Talkback, Android)

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
@@ -730,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').default,

Libraries/Components/TextInput/TextInput.d.ts

@@ -531,6 +531,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}

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(
@@ -137,21 +142,56 @@ public ReactTextUpdate(
     mJustificationMode = justificationMode;
   }
 
+  public ReactTextUpdate(
+      Spannable text,
+      int jsEventCounter,
+      boolean containsImages,
+      float paddingStart,
+      float paddingTop,
+      float paddingEnd,
+      float paddingBottom,
+      int textAlign,
+      int textBreakStrategy,
+      int justificationMode,
+      int selectionStart,
+      int selectionEnd,
+      @Nullable String accessibilityErrorMessage) {
+    mText = text;
+    mJsEventCounter = jsEventCounter;
+    mContainsImages = containsImages;
+    mPaddingLeft = paddingStart;
+    mPaddingTop = paddingTop;
+    mPaddingRight = paddingEnd;
+    mPaddingBottom = paddingBottom;
+    mTextAlign = textAlign;
+    mTextBreakStrategy = textBreakStrategy;
+    mSelectionStart = selectionStart;
+    mSelectionEnd = selectionEnd;
+    mJustificationMode = justificationMode;
+    mAccessibilityErrorMessage = accessibilityErrorMessage;
+  }
+
   public static ReactTextUpdate buildReactTextUpdateFromState(
       Spannable text,
       int jsEventCounter,
       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;
   }

ReactAndroid/src/main/java/com/facebook/react/views/textinput/BUCK

@@ -34,6 +34,7 @@ rn_android_library(
         react_native_target("java/com/facebook/react/common/mapbuffer:mapbuffer"),
         react_native_target("java/com/facebook/react/views/view:view"),
         react_native_target("java/com/facebook/react/config:config"),
+        react_native_target("res:uimanager"),
     ] + KOTLIN_STDLIB_DEPS,
     exported_deps = [
         react_native_dep("third-party/android/androidx:appcompat"),

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -30,15 +30,18 @@
 import android.view.KeyEvent;
 import android.view.MotionEvent;
 import android.view.View;
+import android.view.accessibility.AccessibilityEvent;
 import android.view.accessibility.AccessibilityNodeInfo;
 import android.view.inputmethod.EditorInfo;
 import android.view.inputmethod.InputConnection;
 import android.view.inputmethod.InputMethodManager;
 import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatEditText;
 import androidx.core.view.ViewCompat;
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
+import com.facebook.react.R;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.common.build.ReactBuildConfig;
@@ -157,6 +160,36 @@ public ReactEditText(Context context) {
     ReactAccessibilityDelegate editTextAccessibilityDelegate =
         new ReactAccessibilityDelegate(
             this, this.isFocusable(), this.getImportantForAccessibility()) {
+          @Override
+          public void onInitializeAccessibilityNodeInfo(
+              View host, AccessibilityNodeInfoCompat info) {
+            super.onInitializeAccessibilityNodeInfo(host, info);
+            final String accessibilityErrorMessage =
+                (String) host.getTag(R.id.accessibility_error_message);
+            boolean contentInvalid = accessibilityErrorMessage == null ? false : true;
+            if (accessibilityErrorMessage != info.getError()) {
+              info.setError(accessibilityErrorMessage);
+              info.setContentInvalid(contentInvalid);
+            }
+          }
+
+          @Override
+          public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
+            super.onInitializeAccessibilityEvent(host, event);
+            if (event.getEventType() == AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED
+                && host.getParent() != null) {
+              try {
+                host.getParent().requestSendAccessibilityEvent(host, event);
+              } catch (AbstractMethodError e) {
+                FLog.w(
+                    TAG,
+                    host.getParent().getClass().getSimpleName()
+                        + " does not fully implement ViewParent",
+                    e);
+              }
+            }
+          }
+
           @Override
           public boolean performAccessibilityAction(View host, int action, Bundle args) {
             if (action == AccessibilityNodeInfo.ACTION_CLICK) {
@@ -539,6 +572,25 @@ public int incrementAndGetEventCounter() {
     return ++mNativeEventCount;
   }
 
+  /**
+   * Attempt to set an accessibility error or fail silently. EventCounter is the same one used as
+   * with text.
+   *
+   * @param eventCounter
+   * @param accessibilityErrorMessage
+   */
+  public void maybeSetAccessibilityError(
+      int eventCounter, @Nullable String accessibilityErrorMessage) {
+    String previousScreenreaderError = (String) getTag(R.id.accessibility_error_message);
+    if (!canUpdateWithEventCount(eventCounter)
+        || previousScreenreaderError == accessibilityErrorMessage) {
+      return;
+    }
+
+    setTag(R.id.accessibility_error_message, accessibilityErrorMessage);
+    sendAccessibilityEvent(AccessibilityEvent.TYPE_WINDOW_CONTENT_CHANGED);
+  }
+
   public void maybeSetTextFromJS(ReactTextUpdate reactTextUpdate) {
     mIsSettingTextFromJS = true;
     maybeSetText(reactTextUpdate);