feat: set disabled accessibilityState when TouchableHighlight is disabled (#31135)

Summary:
https://github.com/facebook/react-native/issues/30950

automatically set `disabled` to accessibilityState when TouchableHighlight is disabled

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Changed] - Set disabled accessibilityState when TouchableHighlight is disabled

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

Test Plan: Tested on physical android device that pressing disabled TouchableHighlight announces "dim" when talkback is on

Reviewed By: yungsters, nadiia

Differential Revision: D27157207

Pulled By: kacieb

fbshipit-source-id: b8e24aad699c43cf02401b3ba39726a06b751995

Libraries/Components/Touchable/TouchableHighlight.js

@@ -165,7 +165,10 @@ class TouchableHighlight 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,
@@ -283,13 +286,21 @@ class TouchableHighlight 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 (
       <View
         accessible={this.props.accessible !== false}
         accessibilityLabel={this.props.accessibilityLabel}
         accessibilityHint={this.props.accessibilityHint}
         accessibilityRole={this.props.accessibilityRole}
-        accessibilityState={this.props.accessibilityState}
+        accessibilityState={accessibilityState}
         accessibilityValue={this.props.accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}

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

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

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

@@ -18,3 +18,109 @@ exports[`TouchableHighlight renders correctly 1`] = `
   </Text>
 </View>
 `;
+
+exports[`TouchableHighlight 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]}
+>
+  <View />
+</View>
+`;
+
+exports[`TouchableHighlight 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]}
+>
+  <View />
+</View>
+`;
+
+exports[`TouchableHighlight 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]}
+>
+  <View />
+</View>
+`;
+
+exports[`TouchableHighlight 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]}
+>
+  <View />
+</View>
+`;
+
+exports[`TouchableHighlight 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]}
+>
+  <View />
+</View>
+`;