Skip to content

Add support for aria-invalid#50942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yajihum wants to merge 3 commits into
base:main
Choose a base branch
from
Open

Add support for aria-invalid #50942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ac191e3
feat: add support for aria-invalid
yajihum Apr 26, 2025
716232c
feat: add state_invalid_description for multiple languages in strings…
yajihum Apr 26, 2025
37786d8
feat: update state_invalid_description
yajihum Apr 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/react-native/Libraries/Components/Button.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -159,6 +159,7 @@ export type ButtonProps = $ReadOnly<{
'aria-checked'?: ?boolean | 'mixed',
'aria-disabled'?: ?boolean,
'aria-expanded'?: ?boolean,
'aria-invalid'?: ?boolean,
'aria-selected'?: ?boolean,

/**
Expand DownExpand Up@@ -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,
Expand DownExpand Up@@ -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,
};

Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/Libraries/Components/Pressable/Pressable.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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,
};

Expand Down
10 changes: 10 additions & 0 deletions ...eact-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
}
}
Expand DownExpand Up@@ -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,
}
}
Expand DownExpand Up@@ -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,
}
}
Expand DownExpand Up@@ -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,
}
}
Expand DownExpand Up@@ -152,6 +156,7 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -188,6 +193,7 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -224,6 +230,7 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
"checked": true,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -260,6 +267,7 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
"checked": true,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -296,6 +304,7 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -332,6 +341,7 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react-native/Libraries/Components/TextInput/TextInput.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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,
};
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -415,6 +415,7 @@ jest.unmock('../TextInput');
"checked": true,
"disabled": true,
"expanded": true,
"invalid": true,
"selected": true,
}
}
Expand All@@ -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"
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/Libraries/Components/Touchable/TouchableBounce.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
};
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
};
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
};
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
};

Expand Down
7 changes: 7 additions & 0 deletions ...braries/Components/Touchable/__tests__/__snapshots__/TouchableNativeFeedback-test.js.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,6 +8,7 @@ exports[`<TouchableNativeFeedback /> should render as expected 1`] = `
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -39,6 +40,7 @@ exports[`<TouchableNativeFeedback disabled={false} accessibilityState={{disabled
"checked": undefined,
"disabled": false,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -70,6 +72,7 @@ exports[`<TouchableNativeFeedback disabled={true} accessibilityState={{}}> shoul
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -101,6 +104,7 @@ exports[`<TouchableNativeFeedback disabled={true} accessibilityState={{checked:
"checked": true,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -132,6 +136,7 @@ exports[`<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -163,6 +168,7 @@ exports[`<TouchableNativeFeedback disabled={true}> should be disabled when disab
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -194,6 +200,7 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand Down
3 changes: 3 additions & 0 deletions ...tive/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,6 +8,7 @@ exports[`TouchableOpacity renders correctly 1`] = `
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand DownExpand Up@@ -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,
}
}
Expand DownExpand Up@@ -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,
}
}
Expand Down
6 changes: 6 additions & 0 deletions ...raries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,6 +8,7 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
"checked": undefined,
"disabled": undefined,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand All@@ -33,6 +34,7 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand All@@ -56,6 +58,7 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand All@@ -79,6 +82,7 @@ exports[`TouchableWithoutFeedback with disabled state should disable button when
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand All@@ -102,6 +106,7 @@ exports[`TouchableWithoutFeedback with disabled state should keep accessibilityS
"checked": true,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand All@@ -125,6 +130,7 @@ exports[`TouchableWithoutFeedback with disabled state should overwrite accessibi
"checked": undefined,
"disabled": true,
"expanded": undefined,
"invalid": undefined,
"selected": undefined,
}
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react-native/Libraries/Components/View/View.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
Expand DownExpand Up@@ -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;
Expand Down
5 changes: 5 additions & 0 deletions packages/react-native/Libraries/Components/View/ViewAccessibility.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;

/**
Expand DownExpand Up@@ -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 {
Expand Down
5 changes: 5 additions & 0 deletions packages/react-native/Libraries/Components/View/ViewAccessibility.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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,
...
};

Expand DownExpand Up@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/Libraries/Components/View/__tests__/View-test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -116,6 +116,7 @@ describe('View compat with web', () => {
"checked": true,
"disabled": true,
"expanded": true,
"invalid": true,
"selected": true,
}
}
Expand All@@ -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}
Expand Down
Loading