From 1e65c5f6466c11e5012daf018bb6579974b256ef Mon Sep 17 00:00:00 2001 From: Vivek JM <24496671+vivekjm@users.noreply.github.com> Date: Mon, 22 Jun 2026 12:06:43 +0530 Subject: [PATCH] fix: avoid disabled accessibility state for active chips --- src/components/Chip/Chip.tsx | 4 +- src/components/__tests__/Chip.test.tsx | 55 ++++++++++++++----- .../__snapshots__/Chip.test.tsx.snap | 8 +-- 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 1b09c327a8..3a94bb8eb6 100644 --- a/src/components/Chip/Chip.tsx +++ b/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} diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index 644906ae33..7727e6c1b6 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/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( {}}>Example 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(Disabled chip); +it('does not mark chip disabled if there is no touch handler passed', async () => { + await render(Informational 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( + + Disabled 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 () => { ); - 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 () => { ); - 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 ); - 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); }); diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 7bf18dde0e..2fb7d7f396 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/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, }