Disable accessibilityState when TouchableWithoutFeedback is `disa…

…bled` (#31297) Summary: Disable `accessibilityState` when the `TouchableWithoutFeedback` is `disabled`. This fixes #30953 ## Changelog [General] [Changed] - Disable `accessibilityState` when the `TouchableWithoutFeedback` is `disabled`. Pull Request resolved: #31297 Test Plan: Tested the `TouchableWithoutFeedback` component on an Android device Reviewed By: nadiia Differential Revision: D27770689 Pulled By: kacieb fbshipit-source-id: a317246021354ed288b093f8a5e6fbba43d3a04e
facebook · Apr 16, 2021 · 6971640 · 6971640
1 parent 9e21d54
commit 6971640
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 8 deletions.
diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/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,

diff --git a/Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js b/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();
+  });
+});
diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap b/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]}
+/>
+`;