Add support for aria-invalid

packages/react-native/Libraries/Components/Button.js

@@ -159,6 +159,7 @@ export type ButtonProps = $ReadOnly<{
   'aria-checked'?: ?boolean | 'mixed',
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
+  'aria-invalid'?: ?boolean,
   'aria-selected'?: ?boolean,
 
   /**
@@ -296,6 +297,7 @@ const Button: component(
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
+    'aria-invalid': ariaInvalid,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     importantForAccessibility,
@@ -331,6 +333,7 @@ const Button: component(
     checked: ariaChecked ?? accessibilityState?.checked,
     disabled: ariaDisabled ?? accessibilityState?.disabled,
     expanded: ariaExpanded ?? accessibilityState?.expanded,
+    invalid: ariaInvalid ?? accessibilityState?.invalid,
     selected: ariaSelected ?? accessibilityState?.selected,
   };
 

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -179,6 +179,7 @@ function Pressable(
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
+    'aria-invalid': ariaInvalid,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
     cancelable,
@@ -218,6 +219,7 @@ function Pressable(
     checked: ariaChecked ?? accessibilityState?.checked,
     disabled: ariaDisabled ?? accessibilityState?.disabled,
     expanded: ariaExpanded ?? accessibilityState?.expanded,
+    invalid: ariaInvalid ?? accessibilityState?.invalid,
     selected: ariaSelected ?? accessibilityState?.selected,
   };
 

packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

@@ -8,6 +8,7 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
       "checked": undefined,
       "disabled": undefined,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -44,6 +45,7 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
       "checked": undefined,
       "disabled": undefined,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -80,6 +82,7 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -116,6 +119,7 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -152,6 +156,7 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -188,6 +193,7 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -224,6 +230,7 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
       "checked": true,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -260,6 +267,7 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
       "checked": true,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -296,6 +304,7 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -332,6 +341,7 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -356,6 +356,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     'aria-checked': ariaChecked,
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
+    'aria-invalid': ariaInvalid,
     'aria-selected': ariaSelected,
     accessibilityState,
     id,
@@ -620,13 +621,15 @@ function InternalTextInput(props: TextInputProps): React.Node {
     ariaChecked != null ||
     ariaDisabled != null ||
     ariaExpanded != null ||
+    ariaInvalid != null ||
     ariaSelected != null
   ) {
     _accessibilityState = {
       busy: ariaBusy ?? accessibilityState?.busy,
       checked: ariaChecked ?? accessibilityState?.checked,
       disabled: ariaDisabled ?? accessibilityState?.disabled,
       expanded: ariaExpanded ?? accessibilityState?.expanded,
+      invalid: ariaInvalid ?? accessibilityState?.invalid,
       selected: ariaSelected ?? accessibilityState?.selected,
     };
   }

packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js

@@ -415,6 +415,7 @@ jest.unmock('../TextInput');
             "checked": true,
             "disabled": true,
             "expanded": true,
+            "invalid": true,
             "selected": true,
           }
         }
@@ -434,7 +435,6 @@ jest.unmock('../TextInput');
         aria-flowto="flowto"
         aria-haspopup={true}
         aria-hidden={true}
-        aria-invalid={true}
         aria-keyshortcuts="Cmd+S"
         aria-label="label"
         aria-labelledby="labelledby"

packages/react-native/Libraries/Components/Touchable/TouchableBounce.js

@@ -147,6 +147,8 @@ class TouchableBounce extends React.Component<
         this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
       expanded:
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+      invalid:
+        this.props['aria-invalid'] ?? this.props.accessibilityState?.invalid,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
     };

packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -308,6 +308,8 @@ class TouchableNativeFeedback extends React.Component<
         this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
       expanded:
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+      invalid:
+        this.props['aria-invalid'] ?? this.props.accessibilityState?.invalid,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
     };

packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

@@ -271,6 +271,8 @@ class TouchableOpacity extends React.Component<
         this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
       expanded:
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+      invalid:
+        this.props['aria-invalid'] ?? this.props.accessibilityState?.invalid,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
     };

packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -243,6 +243,7 @@ export default function TouchableWithoutFeedback(
     checked: props['aria-checked'] ?? props.accessibilityState?.checked,
     disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
     expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+    invalid: props['aria-invalid'] ?? props.accessibilityState?.invalid,
     selected: props['aria-selected'] ?? props.accessibilityState?.selected,
   };
 

packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap

@@ -8,6 +8,7 @@ exports[`<TouchableNativeFeedback /> should render as expected 1`] = `
       "checked": undefined,
       "disabled": undefined,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -39,6 +40,7 @@ exports[`<TouchableNativeFeedback disabled={false} accessibilityState={{disabled
       "checked": undefined,
       "disabled": false,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -70,6 +72,7 @@ exports[`<TouchableNativeFeedback disabled={true} accessibilityState={{}}> shoul
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -101,6 +104,7 @@ exports[`<TouchableNativeFeedback disabled={true} accessibilityState={{checked:
       "checked": true,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -132,6 +136,7 @@ exports[`<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -163,6 +168,7 @@ exports[`<TouchableNativeFeedback disabled={true}> should be disabled when disab
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -194,6 +200,7 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
       "checked": undefined,
       "disabled": undefined,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }

packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap

@@ -8,6 +8,7 @@ exports[`TouchableOpacity renders correctly 1`] = `
       "checked": undefined,
       "disabled": undefined,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -49,6 +50,7 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -90,6 +92,7 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }

packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap

@@ -8,6 +8,7 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
       "checked": undefined,
       "disabled": undefined,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -33,6 +34,7 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -56,6 +58,7 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -79,6 +82,7 @@ exports[`TouchableWithoutFeedback with disabled state should disable button when
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -102,6 +106,7 @@ exports[`TouchableWithoutFeedback with disabled state should keep accessibilityS
       "checked": true,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }
@@ -125,6 +130,7 @@ exports[`TouchableWithoutFeedback with disabled state should overwrite accessibi
       "checked": undefined,
       "disabled": true,
       "expanded": undefined,
+      "invalid": undefined,
       "selected": undefined,
     }
   }

packages/react-native/Libraries/Components/View/View.js

@@ -40,6 +40,7 @@ const View: component(
       'aria-disabled': ariaDisabled,
       'aria-expanded': ariaExpanded,
       'aria-hidden': ariaHidden,
+      'aria-invalid': ariaInvalid,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
       'aria-live': ariaLive,
@@ -67,12 +68,14 @@ const View: component(
       ariaChecked != null ||
       ariaDisabled != null ||
       ariaExpanded != null ||
+      ariaInvalid != null ||
       ariaSelected != null
         ? {
             busy: ariaBusy ?? accessibilityState?.busy,
             checked: ariaChecked ?? accessibilityState?.checked,
             disabled: ariaDisabled ?? accessibilityState?.disabled,
             expanded: ariaExpanded ?? accessibilityState?.expanded,
+            invalid: ariaInvalid ?? accessibilityState?.invalid,
             selected: ariaSelected ?? accessibilityState?.selected,
           }
         : undefined;

packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts

@@ -56,6 +56,7 @@ export interface AccessibilityProps
   'aria-checked'?: boolean | 'mixed' | undefined;
   'aria-disabled'?: boolean | undefined;
   'aria-expanded'?: boolean | undefined;
+  'aria-invalid'?: boolean | undefined;
   'aria-selected'?: boolean | undefined;
 
   /**
@@ -161,6 +162,10 @@ export interface AccessibilityState {
    *  When present, informs accessible tools the element is expanded or collapsed
    */
   expanded?: boolean | undefined;
+  /**
+   *  When present, informs accessible tools the element is invalid
+   */
+  invalid?: boolean | undefined;
 }
 
 export interface AccessibilityValue {

packages/react-native/Libraries/Components/View/ViewAccessibility.js

@@ -186,6 +186,10 @@ export type AccessibilityState = {
    *  When present, informs accessible tools the element is expanded or collapsed
    */
   expanded?: ?boolean,
+  /**
+   *  When present, informs accessible tools the element is invalid
+   */
+  invalid?: ?boolean,
   ...
 };
 
@@ -405,6 +409,7 @@ export type AccessibilityProps = $ReadOnly<{
   'aria-checked'?: ?boolean | 'mixed',
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
+  'aria-invalid'?: ?boolean,
   'aria-selected'?: ?boolean,
   /** A value indicating whether the accessibility elements contained within
    * this accessibility element are hidden.

packages/react-native/Libraries/Components/View/__tests__/View-test.js

@@ -116,6 +116,7 @@ describe('View compat with web', () => {
             "checked": true,
             "disabled": true,
             "expanded": true,
+            "invalid": true,
             "selected": true,
           }
         }
@@ -140,7 +141,6 @@ describe('View compat with web', () => {
         aria-errormessage="errormessage"
         aria-flowto="flowto"
         aria-haspopup={true}
-        aria-invalid={true}
         aria-keyshortcuts="Cmd+S"
         aria-level={3}
         aria-modal={true}