fix: avoid disabled accessibility state for active chips by vivekjm · Pull Request #5011 · callstack/react-native-paper

vivekjm · 2026-06-22T06:37:23Z

Motivation

Fixes an accessibility regression where Chips without an explicit disabled prop can still be exposed as disabled/dimmed to screen readers. TouchableRipple marks itself disabled when no touch handler is present, so informational or selected Chips could inherit a disabled accessibility state even though the Chip itself is not disabled.

This keeps explicitly disabled Chips disabled, while allowing non-disabled Chips to remain active from an accessibility perspective.

Related issue

Fixes #4844

Test plan

yarn test src/components/__tests__/Chip.test.tsx --runInBand -u
yarn eslint src/components/Chip/Chip.tsx src/components/__tests__/Chip.test.tsx
yarn typescript

Also attempted the default pre-commit hook, which runs full lint/types/tests. Lint and most tests ran, but the full Jest run failed in src/babel/__tests__/index.js because this checkout does not have lib/mappings.json generated.

matkoson

src/components/Chip/Chip.tsx:217 @vivekjm wouldn't this make non-interactive chips ripple when pressed?

generated by an automated pr-review pipe, not written by a human. reply and tag the repo owner if it got something wrong.

vivekjm · 2026-06-25T06:14:46Z

Thanks for checking this. The intent is not to make non-interactive chips behave as actionable controls, only to prevent them from being exposed as disabled to accessibility APIs when the Chip itself is not disabled.\n\nThe fallback no-op handler is only used when the chip is not disabled and no touch handler was passed. It avoids TouchableRipple deriving a disabled accessibility state from the missing handler; explicitly disabled chips still pass through as disabled, and chips with real handlers still use their provided onPress/onPressIn/onPressOut behavior.\n\nIf you prefer avoiding a no-op onPress entirely, I can rework this to keep the accessibility state independent from TouchableRipple's disabled inference instead.

satya164

thanks for the pr. please provide a video showing before/after

satya164 · 2026-09-03T09:18:53Z

@@ -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);
 });


Please revert these changes. Tests shouldn't be reading internal implementation details and private properties.

The only test worth adding is verifying that the touchable doesn't have disabled.

satya164 · 2026-09-03T09:22:28Z

@@ -300,7 +302,7 @@ const Chip = ({
        borderless
        background={background}
        style={[{ borderRadius }, styles.touchable]}
-        onPress={onPress}
+        onPress={touchableOnPress}


this turns all chips pressables even when they aren't intended to be interactive. the proper fix would be not to render a TouchableRipple for informational/close-only chips

matkoson reviewed Jun 24, 2026

View reviewed changes

fix: avoid disabled accessibility state for active chips

1e65c5f

vivekjm force-pushed the fix-chip-accessibility-state branch from 75dd519 to 1e65c5f Compare July 17, 2026 20:13

This was referenced Aug 24, 2026

TouchableRipple exposes non-interactive surfaces as disabled controls #5070

Open

fix: don't expose handler-less TouchableRipple as a disabled control #5071

Open

satya164 requested changes Sep 3, 2026

View reviewed changes

vivekjm and others added 3 commits September 3, 2026 22:08

fix: avoid touchable wrapper for non-interactive chips

9d46c67

test: assert chip disabled state through public matcher

893e148

fix: preserve non-interactive Chip accessibility after upstream refactor

f8743fe

Navigation Menu

Uh oh!

Uh oh!

fix: avoid disabled accessibility state for active chips - #5011

fix: avoid disabled accessibility state for active chips#5011
vivekjm wants to merge 4 commits into
callstack:mainfrom
vivekjm:fix-chip-accessibility-state

vivekjm commented Jun 22, 2026

Uh oh!

matkoson left a comment

Uh oh!

vivekjm commented Jun 25, 2026

Uh oh!

satya164 left a comment

Uh oh!

satya164 Sep 3, 2026

Uh oh!

satya164 Sep 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

vivekjm commented Jun 22, 2026

Motivation

Related issue

Test plan

Uh oh!

matkoson left a comment

Choose a reason for hiding this comment

Uh oh!

vivekjm commented Jun 25, 2026

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

satya164 Sep 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants