TouchableNativeFeedback: sync disabled prop with accessibilityState (f…

…acebook#30952)

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -168,7 +168,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   _createPressabilityConfig(): PressabilityConfig {
     return {
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
+      disabled:
+        this.props.disabled != null
+          ? this.props.disabled
+          : this.props.accessibilityState?.disabled,
       hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
@@ -255,6 +258,14 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
       ...eventHandlersWithoutBlurAndFocus
     } = this.state.pressability.getEventHandlers();
 
+    const accessibilityState =
+      this.props.disabled != null
+        ? {
+            ...this.props.accessibilityState,
+            disabled: this.props.disabled,
+          }
+        : this.props.accessibilityState;
+
     return React.cloneElement(
       element,
       {
@@ -269,7 +280,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         accessibilityHint: this.props.accessibilityHint,
         accessibilityLabel: this.props.accessibilityLabel,
         accessibilityRole: this.props.accessibilityRole,
-        accessibilityState: this.props.accessibilityState,
+        accessibilityState: accessibilityState,
         accessibilityActions: this.props.accessibilityActions,
         onAccessibilityAction: this.props.onAccessibilityAction,
         accessibilityValue: this.props.accessibilityValue,

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

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @emails oncall+react_native
+ */
+
+'use strict';
+
+import * as React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import TouchableNativeFeedback from '../TouchableNativeFeedback';
+import View from '../../View/View';
+
+describe('<TouchableNativeFeedback />', () => {
+  it('should render as expected', () => {
+    const instance = ReactTestRenderer.create(
+      <TouchableNativeFeedback>
+        <View />
+      </TouchableNativeFeedback>,
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('<TouchableNativeFeedback disabled={true}>', () => {
+  it('should be disabled when disabled is true', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableNativeFeedback disabled={true}>
+          <View />
+        </TouchableNativeFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+});
+
+describe('<TouchableNativeFeedback disabled={true} accessibilityState={{}}>', () => {
+  it('should be disabled when disabled is true and accessibilityState is empty', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableNativeFeedback disabled={true} accessibilityState={{}}>
+          <View />
+        </TouchableNativeFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+});
+
+describe('<TouchableNativeFeedback disabled={true} accessibilityState={{checked: true}}>', () => {
+  it('should keep accessibilityState when disabled is true', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableNativeFeedback
+          disabled={true}
+          accessibilityState={{checked: true}}>
+          <View />
+        </TouchableNativeFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+});
+
+describe('<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:false}}>', () => {
+  it('should overwrite accessibilityState with value of disabled prop', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableNativeFeedback
+          disabled={true}
+          accessibilityState={{disabled: false}}>
+          <View />
+        </TouchableNativeFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+});
+
+describe('<TouchableNativeFeedback disabled={false} accessibilityState={{disabled:true}}>', () => {
+  it('should overwrite accessibilityState with value of disabled prop', () => {
+    expect(
+      ReactTestRenderer.create(
+        <TouchableNativeFeedback
+          disabled={false}
+          accessibilityState={{disabled: true}}>
+          <View />
+        </TouchableNativeFeedback>,
+      ),
+    ).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TouchableNativeFeedback /> should render as expected 1`] = `
+<View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;
+
+exports[`<TouchableNativeFeedback disabled={true}> 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[`<TouchableNativeFeedback disabled={true} accessibilityState={{}}> 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[`<TouchableNativeFeedback disabled={true} accessibilityState={{checked: true}}> 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[`<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:false}}> 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]}
+/>
+`;
+
+exports[`<TouchableNativeFeedback disabled={false} accessibilityState={{disabled:true}}> should overwrite accessibilityState with value of disabled prop 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;