diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 6ae8cd850f7..fc6da22f852 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -137,7 +137,7 @@ class TouchableOpacity extends React.Component { _createPressabilityConfig(): PressabilityConfig { return { cancelable: !this.props.rejectResponderTermination, - disabled: this.props.disabled, + disabled: this.props.disabled ?? this.props.accessibilityState?.disabled, hitSlop: this.props.hitSlop, delayLongPress: this.props.delayLongPress, delayPressIn: this.props.delayPressIn, @@ -215,13 +215,21 @@ class TouchableOpacity extends React.Component { ...eventHandlersWithoutBlurAndFocus } = this.state.pressability.getEventHandlers(); + const accessibilityState = + this.props.disabled != null + ? { + ...this.props.accessibilityState, + disabled: this.props.disabled, + } + : this.props.accessibilityState; + return ( { it('renders correctly', () => { - const instance = render.create( - + const instance = ReactTestRenderer.create( + + Touchable + , + ); + + expect(instance.toJSON()).toMatchSnapshot(); + }); + + it('renders in disabled state when a disabled prop is passed', () => { + const instance = ReactTestRenderer.create( + + Touchable + , + ); + + expect(instance.toJSON()).toMatchSnapshot(); + }); + + it('renders in disabled state when a key disabled in accessibilityState is passed', () => { + const instance = ReactTestRenderer.create( + Touchable , ); diff --git a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap index c1a2ee35013..2492d8c3a01 100644 --- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap +++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap @@ -24,3 +24,63 @@ exports[`TouchableOpacity renders correctly 1`] = ` `; + +exports[`TouchableOpacity renders in disabled state when a disabled prop is passed 1`] = ` + + + Touchable + + +`; + +exports[`TouchableOpacity renders in disabled state when a key disabled in accessibilityState is passed 1`] = ` + + + Touchable + + +`; diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index a45e293e421..f58cd1a465b 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -161,6 +161,18 @@ class AccessibilityExample extends React.Component<{}> { + + Alert.alert('Disabled Button has been pressed!')} + accessibilityLabel={'You are pressing Disabled TouchableOpacity'} + accessibilityState={{disabled: true}}> + + + I am disabled. Clicking me will not trigger any action. + + + +