diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js index 081403800cd7a2..dcf0c92c3c3fff 100644 --- a/packages/react-native/Libraries/Components/Button.js +++ b/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, }; diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index ae4cb5e3fd489c..c2991fbb637eb8 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/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, }; diff --git a/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap b/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap index 307aaba80c6af8..36839b2d4e3f21 100644 --- a/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap +++ b/packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap @@ -8,6 +8,7 @@ exports[` should render as expected: should deep render when mocked "checked": undefined, "disabled": undefined, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -44,6 +45,7 @@ exports[` 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[` should be disabled when disabled is true: "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -116,6 +119,7 @@ exports[` should be disabled when disabled is true: "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -152,6 +156,7 @@ exports[` should be disable "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -188,6 +193,7 @@ exports[` should be disable "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -224,6 +230,7 @@ exports[` shou "checked": true, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -260,6 +267,7 @@ exports[` shou "checked": true, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -296,6 +304,7 @@ exports[` sh "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -332,6 +341,7 @@ exports[` sh "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } diff --git a/packages/react-native/Libraries/Components/TextInput/TextInput.js b/packages/react-native/Libraries/Components/TextInput/TextInput.js index 9cf46b2f6985ff..cb1947f91ced50 100644 --- a/packages/react-native/Libraries/Components/TextInput/TextInput.js +++ b/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,6 +621,7 @@ function InternalTextInput(props: TextInputProps): React.Node { ariaChecked != null || ariaDisabled != null || ariaExpanded != null || + ariaInvalid != null || ariaSelected != null ) { _accessibilityState = { @@ -627,6 +629,7 @@ function InternalTextInput(props: TextInputProps): React.Node { checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, + invalid: ariaInvalid ?? accessibilityState?.invalid, selected: ariaSelected ?? accessibilityState?.selected, }; } diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js b/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js index 86a0d33cecc703..1799f79df5f07a 100644 --- a/packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js +++ b/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" diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js index 776076101bf8f9..9bba5172d5e273 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js +++ b/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, }; diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js index 1cc6533cd9eb75..2e3cc0053fdf7e 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/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, }; diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index c965c5ad02f2d4..388e6086f17d60 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/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, }; diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 037ac5255c1efc..febaf3fb6e4778 100755 --- a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/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, }; diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap index 6802f754650b9a..d693f9deab2686 100644 --- a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap +++ b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap @@ -8,6 +8,7 @@ exports[` should render as expected 1`] = ` "checked": undefined, "disabled": undefined, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -39,6 +40,7 @@ exports[` shoul "checked": undefined, "disabled": true, "expanded": undefined, + "invalid": undefined, "selected": undefined, } } @@ -101,6 +104,7 @@ exports[` 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, } } diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap index 17f2e7f6f764e0..860b6144a061d0 100644 --- a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap +++ b/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, } } diff --git a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap b/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap index 932c5f133c038f..44cee36dee3512 100644 --- a/packages/react-native/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap +++ b/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, } } diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js index 5e1cb1469023e3..edd967d5c24cc0 100644 --- a/packages/react-native/Libraries/Components/View/View.js +++ b/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; diff --git a/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts b/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts index bf4bee39538555..c35eadfcc5439e 100644 --- a/packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts +++ b/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 { diff --git a/packages/react-native/Libraries/Components/View/ViewAccessibility.js b/packages/react-native/Libraries/Components/View/ViewAccessibility.js index 08ba5e0a0477a8..78474e1fd03588 100644 --- a/packages/react-native/Libraries/Components/View/ViewAccessibility.js +++ b/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. diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-test.js b/packages/react-native/Libraries/Components/View/__tests__/View-test.js index 39db27fc3428f5..7cc0f13a1956e9 100644 --- a/packages/react-native/Libraries/Components/View/__tests__/View-test.js +++ b/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} diff --git a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap index 5b4294e0e8c850..be81fb8340259c 100644 --- a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap +++ b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap @@ -9,6 +9,7 @@ exports[`