fix: avoid disabled accessibility state for active chips

Author: vivekjm

src/components/Chip/Chip.tsx

@@ -213,6 +213,8 @@ const Chip = ({
     onPressIn,
     onPressOut,
   });
+  const touchableOnPress =
+    !disabled && !hasPassedTouchHandler ? () => {} : onPress;
 
   const isOutlined = mode === 'outlined';
 
@@ -300,7 +302,7 @@ const Chip = ({
         borderless
         background={background}
         style={[{ borderRadius }, styles.touchable]}
-        onPress={onPress}
+        onPress={touchableOnPress}
         onLongPress={onLongPress}
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
         onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}

src/components/__tests__/Chip.test.tsx

@@ -1,6 +1,6 @@
-import { Animated } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 
-import { describe, expect, it, jest } from '@jest/globals';
+import { describe, it, jest } from '@jest/globals';
 import { act } from '@testing-library/react-native';
 import color from 'color';
 
@@ -12,6 +12,15 @@ import { getChipColors } from '../Chip/helpers';
 
 const stateOpacity = tokens.md.sys.state.opacity;
 
+const getScaleValue = (testID: string) => {
+  const style = StyleSheet.flatten(screen.getByTestId(testID).props.style);
+  const scale = style.transform?.find(
+    (transform: { scale?: Animated.Value | number }) => 'scale' in transform
+  )?.scale;
+
+  return typeof scale === 'number' ? scale : scale?.__getValue();
+};
+
 it('renders chip with onPress', async () => {
   const tree = (
     await render(<Chip onPress={() => {}}>Example Chip</Chip>)
@@ -70,10 +79,26 @@ it('renders selected chip', async () => {
   expect(tree).toMatchSnapshot();
 });
 
-it('renders disabled chip if there is no touch handler passed', async () => {
-  await render(<Chip testID="disabled-chip">Disabled chip</Chip>);
+it('does not mark chip disabled if there is no touch handler passed', async () => {
+  await render(<Chip testID="informational-chip">Informational chip</Chip>);
 
-  expect(screen.getByTestId('disabled-chip')).toBeDisabled();
+  expect(
+    screen.getByTestId('informational-chip').props.accessibilityState
+  ).toMatchObject({
+    disabled: false,
+  });
+});
+
+it('marks chip disabled when disabled prop is passed', async () => {
+  await render(
+    <Chip disabled testID="disabled-chip">
+      Disabled chip
+    </Chip>
+  );
+
+  expect(screen.getByTestId('disabled-chip').props.accessibilityState).toMatchObject({
+    disabled: true,
+  });
 });
 
 it('renders active chip if only onLongPress handler is passed', async () => {
@@ -83,7 +108,9 @@ it('renders active chip if only onLongPress handler is passed', async () => {
     </Chip>
   );
 
-  expect(screen.getByTestId('active-chip')).toBeEnabled();
+  expect(screen.getByTestId('active-chip').props.accessibilityState).toMatchObject({
+    disabled: false,
+  });
 });
 
 it('renders chip with zero border radius', async () => {
@@ -93,9 +120,11 @@ it('renders chip with zero border radius', async () => {
     </Chip>
   );
 
-  expect(screen.getByTestId('active-chip')).toHaveStyle({
-    borderRadius: 0,
-  });
+  expect(StyleSheet.flatten(screen.getByTestId('active-chip').props.style)).toMatchObject(
+    {
+      borderRadius: 0,
+    }
+  );
 });
 
 describe('getChipColors - text color', () => {
@@ -385,9 +414,7 @@ it('animated value changes correctly', async () => {
       Example Chip
     </Chip>
   );
-  expect(screen.getByTestId('chip-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1 }],
-  });
+  expect(getScaleValue('chip-container-outer-layer')).toBe(1);
 
   Animated.timing(value, {
     toValue: 1.5,
@@ -398,7 +425,5 @@ it('animated value changes correctly', async () => {
   await act(() => {
     jest.advanceTimersByTime(200);
   });
-  expect(screen.getByTestId('chip-container-outer-layer')).toHaveStyle({
-    transform: [{ scale: 1.5 }],
-  });
+  expect(getScaleValue('chip-container-outer-layer')).toBe(1.5);
 });

src/components/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`renders chip with close button 1`] = `
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": true,
+          "disabled": false,
           "expanded": undefined,
           "selected": false,
         }
@@ -343,7 +343,7 @@ exports[`renders chip with custom close button 1`] = `
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": true,
+          "disabled": false,
           "expanded": undefined,
           "selected": false,
         }
@@ -641,7 +641,7 @@ exports[`renders chip with icon 1`] = `
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": true,
+          "disabled": false,
           "expanded": undefined,
           "selected": false,
         }
@@ -1166,7 +1166,7 @@ exports[`renders selected chip 1`] = `
         {
           "busy": undefined,
           "checked": undefined,
-          "disabled": true,
+          "disabled": false,
           "expanded": undefined,
           "selected": true,
         }