TouchableWithoutFeedback Component doesn't disable click functionality when disabled

[amarlette]

Description

When using a screen reader the TouchableWithoutFeedback component doesn't disable click functionality.

This issue is covered in-depth by parent issue #30840, please check there for more details.

React Native version:

0.63

[saurabhkacholiya]

Hi, @amarlette I am new to opensource can I pick up this issue?

[amarlette]

Yes you can! I would recommend checking out our contribution guide (https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md) to help get you started.

[saurabhkacholiya]

I have tested TouchableWithoutFeedback is working fine this commit Here solve the issue

[amarlette]

@saurabhkacholiya can you attach the test that you used to confirm this?

[fabOnReact]

I have tested TouchableWithoutFeedback is working fine this commit Here solve the issue

I would say no

react-native/Libraries/Components/Pressable/Pressable.js

Line 142 in 1c7d9c8

function Pressable(props: Props, forwardedRef): React.Node {

react-native/Libraries/Components/Pressable/Pressable.js

Lines 171 to 174 in 1c7d9c8

	const accessibilityState =
	disabled != null
	? {...props.accessibilityState, disabled}
	: props.accessibilityState;

those changes are in the Pressable component and I could not find any usage of Pressable in TouchableWithoutFeedback.
This makes sense as TouchableWithoutFeedback was built before Pressable, but I don't know well those .js libraries...
Tomorrow I will further investigate and try to add the props in

react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

Line 118 in e04fa92

accessible: this.props.accessible !== false,

☮️ 🙏

[saurabhkacholiya]

@amarlette I am adding snapshots and test cases please validate.
Test Cases

describe('<TouchableWithoutFeedback />', () => {
  it('should render as expected', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );

    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} />', () => {
  it('should be disabled when disabled is true', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback disabled={true}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} accessibilityState={{}} />', () => {
  it('should be disabled when disabled is true and accessibilityState is empty', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback disabled={true} accessibilityState={{}}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} accessibilityState={{checked: true}} />', () => {
  it('should keep accessibilityState when disabled is true', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback
        disabled={true}
        accessibilityState={{checked: true}}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

describe('<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} />', () => {
  it('should overwrite accessibilityState with value of disabled prop', () => {
    const instance = ReactTestRenderer.create(
      <TouchableWithoutFeedback
        disabled={true}
        accessibilityState={{disabled: false}}>
        <Text>Touchable</Text>
      </TouchableWithoutFeedback>,
    );
    expect(instance.toJSON()).toMatchSnapshot();
  });
});

SnapShot

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<TouchableWithoutFeedback /> should render as expected 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should deep render when mocked (please verify output manually) 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should deep render when not mocked (please verify output manually) 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should shallow render as <TouchableWithoutFeedback /> when mocked 1`] = `
<TouchableWithoutFeedback>
  <Text>
    Touchable
  </Text>
</TouchableWithoutFeedback>
`;

exports[`<TouchableWithoutFeedback /> should render as expected: should shallow render as <TouchableWithoutFeedback /> when not mocked 1`] = `
<TouchableWithoutFeedback>
  <Text>
    Touchable
  </Text>
</TouchableWithoutFeedback>
`;

exports[`<TouchableWithoutFeedback disabled={true} /> should be disabled when disabled is true 1`] = `
<Text
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{}} /> should be disabled when disabled is true and accessibilityState is empty 1`] = `
<Text
  accessibilityState={Object {}}
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{checked: true}} /> should keep accessibilityState when disabled is true 1`] = `
<Text
  accessibilityState={
    Object {
      "checked": true,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState with value of disabled prop 1`] = `
<Text
  accessibilityState={
    Object {
      "disabled": false,
    }
  }
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
>
  Touchable
</Text>
`;

exports[`TouchableHighlight renders correctly 1`] = `
<View
  accessible={true}
  focusable={false}
  onClick={[Function]}
  onResponderGrant={[Function]}
  onResponderMove={[Function]}
  onResponderRelease={[Function]}
  onResponderTerminate={[Function]}
  onResponderTerminationRequest={[Function]}
  onStartShouldSetResponder={[Function]}
  style={Object {}}
>
  <Text>
    Touchable
  </Text>
</View>
`;

[saurabhkacholiya]

@fabriziobertoglio1987 Pressability is being used in TouchableWithoutFeedback

react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

Lines 11 to 13 in 3ff7e86

	import Pressability, {
	type PressabilityConfig,
	} from '../../Pressability/Pressability';

react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js

Lines 92 to 95 in 3ff7e86

	class TouchableWithoutFeedback extends React.Component<Props, State> {
	state: State = {
	pressability: new Pressability(createPressabilityConfig(this.props)),
	};

[fabOnReact]

thanks @saurabhkacholiya but sorry, I think you are wrong.
I would like to prepare a Pull Request for this issue tomorrow.

Your snapshot #30953 (comment) is wrong accessibilityState={ disabled: false}

exports[`<TouchableWithoutFeedback disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState >with value of disabled prop 1`] = `
<Text
 accessibilityState={
   Object {
     "disabled": false,
   }
 }

while the commit 1c7d9c8 has the correct snapshot with accessibilityState={ disabled: true}

react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

Lines 283 to 289 in 1c7d9c8

	exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> should overwrite accessibilityState with value of disabled prop: should deep render when not mocked (please verify output manually) 1`] = `
	<View
	accessibilityState={
	Object {
	"disabled": true,
	}
	}

Facebook Team requested us to build this feature in accessability and change accessabilityState.disabled based on disabled prop.