Disable accessibilityState when TouchableWithoutFeedback is disabled (#31297)

Summary:
Disable `accessibilityState` when the `TouchableWithoutFeedback` is `disabled`. This fixes https://github.com/facebook/react-native/issues/30953

## Changelog

[General] [Changed] - Disable `accessibilityState` when the `TouchableWithoutFeedback` is `disabled`.

Pull Request resolved: https://github.com/facebook/react-native/pull/31297

Test Plan: Tested the `TouchableWithoutFeedback` component on an Android device

Reviewed By: nadiia

Differential Revision: D27770689

Pulled By: kacieb

fbshipit-source-id: a317246021354ed288b093f8a5e6fbba43d3a04e

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -76,7 +76,6 @@ const PASSTHROUGH_PROPS = [
   'accessibilityLabel',
   'accessibilityLiveRegion',
   'accessibilityRole',
-  'accessibilityState',
   'accessibilityValue',
   'accessibilityViewIsModal',
   'hitSlop',
@@ -116,6 +115,13 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
     const elementProps: {[string]: mixed, ...} = {
       ...eventHandlersWithoutBlurAndFocus,
       accessible: this.props.accessible !== false,
+      accessibilityState:
+        this.props.disabled != null
+          ? {
+              ...this.props.accessibilityState,
+              disabled: this.props.disabled,
+            }
+          : this.props.accessibilityState,
       focusable:
         this.props.focusable !== false && this.props.onPress !== undefined,
     };
@@ -140,7 +146,10 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
 function createPressabilityConfig(props: Props): PressabilityConfig {
   return {
     cancelable: !props.rejectResponderTermination,
-    disabled: props.disabled,
+    disabled:
+      props.disabled !== null
+        ? props.disabled
+        : props.accessibilityState?.disabled,
     hitSlop: props.hitSlop,
     delayLongPress: props.delayLongPress,
     delayPressIn: props.delayPressIn,

Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js

@@ -10,15 +10,15 @@
 
 'use strict';
 
-const React = require('react');
-const Text = require('../../../Text/Text');
-const TouchableWithoutFeedback = require('../TouchableWithoutFeedback');
-
-const render = require('../../../../jest/renderer');
+import * as React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import Text from '../../../Text/Text';
+import View from '../../View/View';
+import TouchableWithoutFeedback from '../TouchableWithoutFeedback';
 
 describe('TouchableWithoutFeedback', () => {
   it('renders correctly', () => {
-    const instance = render.create(
+    const instance = ReactTestRenderer.create(
       <TouchableWithoutFeedback style={{}}>
         <Text>Touchable</Text>
       </TouchableWithoutFeedback>,
@@ -33,3 +33,59 @@ describe('TouchableWithoutFeedback', () => {
     );
   });
 });
+
+describe('TouchableWithoutFeedback with disabled state', () => {
+  it('should be disabled when disabled is true', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableWithoutFeedback disabled={true}>
+          <View />
+        </TouchableWithoutFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it('should be disabled when disabled is true and accessibilityState is empty', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableWithoutFeedback disabled={true} accessibilityState={{}}>
+          <View />
+        </TouchableWithoutFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it('should keep accessibilityState when disabled is true', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableWithoutFeedback
+          disabled={true}
+          accessibilityState={{checked: true}}>
+          <View />
+        </TouchableWithoutFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it('should overwrite accessibilityState with value of disabled prop', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableWithoutFeedback
+          disabled={true}
+          accessibilityState={{disabled: false}}>
+          <View />
+        </TouchableWithoutFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it('should disable button when accessibilityState is disabled', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableWithoutFeedback accessibilityState={{disabled: true}}>
+          <View />
+        </TouchableWithoutFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+});

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap

@@ -15,3 +15,99 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
   Touchable
 </Text>
 `;
+
+exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;
+
+exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true and accessibilityState is empty 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;
+
+exports[`TouchableWithoutFeedback with disabled state should disable button when accessibilityState is disabled 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;
+
+exports[`TouchableWithoutFeedback with disabled state should keep accessibilityState when disabled is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "checked": true,
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;
+
+exports[`TouchableWithoutFeedback with disabled state should overwrite accessibilityState with value of disabled prop 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;