diff --git a/packages/react-native-ui-lib/src/components/chip/__tests__/index.spec.tsx b/packages/react-native-ui-lib/src/components/chip/__tests__/index.spec.tsx index a0c068c537..168b3c4532 100644 --- a/packages/react-native-ui-lib/src/components/chip/__tests__/index.spec.tsx +++ b/packages/react-native-ui-lib/src/components/chip/__tests__/index.spec.tsx @@ -54,4 +54,21 @@ describe('Chip', () => { expect(driver.getIcon().exists()).toBeTruthy(); expect(driver.getDismissIcon().exists()).toBeTruthy(); }); + + describe('Accessibility', () => { + it('should set accessibilityState.selected when selected is true', () => { + const driver = getDriver({selected: true}); + expect(driver.getElement().props.accessibilityState).toEqual({selected: true}); + }); + + it('should set accessibilityState.selected when selected is false', () => { + const driver = getDriver({selected: false}); + expect(driver.getElement().props.accessibilityState).toEqual({selected: false}); + }); + + it('should not set accessibilityState when selected is not provided', () => { + const driver = getDriver(); + expect(driver.getElement().props.accessibilityState).toBeUndefined(); + }); + }); }); diff --git a/packages/react-native-ui-lib/src/components/chip/index.tsx b/packages/react-native-ui-lib/src/components/chip/index.tsx index 2f40889423..e18c49d8a2 100644 --- a/packages/react-native-ui-lib/src/components/chip/index.tsx +++ b/packages/react-native-ui-lib/src/components/chip/index.tsx @@ -21,6 +21,10 @@ export type ChipProps = ViewProps & * On Chip press callback */ onPress?: (props: any) => void; + /** + * Indicates whether the chip is selected, exposed to screen readers via accessibilityState + */ + selected?: boolean; /** * Chip's background color */ @@ -158,6 +162,7 @@ const Chip = ({ labelStyle, onPress, resetSpacings, + selected, size = DEFAULT_SIZE, useSizeAsMinimum = true, recorderTag, @@ -332,6 +337,7 @@ const Chip = ({ style={[styles.container, {backgroundColor}, {borderRadius}, containerStyle, containerSizeStyle]} testID={testID} hitSlop={hitSlop} + accessibilityState={selected !== undefined ? {selected} : undefined} {...others} > {avatarProps && renderAvatar()}