Chip - expose selected prop to screen readers via accessibilityState

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();
+    });
+  });
 });

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()}