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,
}