From b51d8d1536d8d136462fa61862398f59c93f8dc5 Mon Sep 17 00:00:00 2001
From: Carlos Cuesta <carloscuesta@me.com>
Date: Sun, 4 Apr 2021 10:34:14 +0200
Subject: [PATCH 1/2] fix(TouchableWithoutFeedback): Disable click fn a11y when
 disabled

---
 .../Touchable/TouchableWithoutFeedback.js     | 12 ++-
 .../TouchableWithoutFeedback-test.js          | 68 ++++++++++++--
 .../TouchableWithoutFeedback-test.js.snap     | 91 +++++++++++++++++++
 3 files changed, 164 insertions(+), 7 deletions(-)

diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index 2f06d41031f20f..c91a80d602e353 100755
--- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js
+++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
@@ -116,6 +116,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 +147,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
index 1812253fef73e9..0648d372d3883d 100644
--- 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
index 27c69f493086da..b6eb335f7d5cbd 100644
--- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
+++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
@@ -15,3 +15,94 @@ 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 {}}
+  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,
+    }
+  }
+  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": false,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+/>
+`;

From ec0e05fb6ae67ae8567752f024bfa4ea22eff537 Mon Sep 17 00:00:00 2001
From: Carlos Cuesta <carloscuesta@me.com>
Date: Wed, 14 Apr 2021 10:16:00 +0200
Subject: [PATCH 2/2] refactor(TouchableWithoutFeedback): Remove
 accessibilityState from PASSTHROUGH_PROPS

---
 .../Components/Touchable/TouchableWithoutFeedback.js     | 1 -
 .../__snapshots__/TouchableWithoutFeedback-test.js.snap  | 9 +++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js
index c91a80d602e353..0b2c305b232dc4 100755
--- 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',
diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
index b6eb335f7d5cbd..545e77e54e3bd9 100644
--- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
+++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap
@@ -37,7 +37,11 @@ exports[`TouchableWithoutFeedback with disabled state should be disabled when di
 
 exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true and accessibilityState is empty 1`] = `
 <View
-  accessibilityState={Object {}}
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -74,6 +78,7 @@ exports[`TouchableWithoutFeedback with disabled state should keep accessibilityS
   accessibilityState={
     Object {
       "checked": true,
+      "disabled": true,
     }
   }
   accessible={true}
@@ -92,7 +97,7 @@ exports[`TouchableWithoutFeedback with disabled state should overwrite accessibi
 <View
   accessibilityState={
     Object {
-      "disabled": false,
+      "disabled": true,
     }
   }
   accessible={true}