diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 2f06d41031f20f..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', @@ -116,6 +115,13 @@ class TouchableWithoutFeedback extends React.Component { 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 { 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( Touchable , @@ -33,3 +33,59 @@ describe('TouchableWithoutFeedback', () => { ); }); }); + +describe('TouchableWithoutFeedback with disabled state', () => { + it('should be disabled when disabled is true', () => { + expect( + ReactTestRenderer.create( + + + , + ), + ).toMatchSnapshot(); + }); + + it('should be disabled when disabled is true and accessibilityState is empty', () => { + expect( + ReactTestRenderer.create( + + + , + ), + ).toMatchSnapshot(); + }); + + it('should keep accessibilityState when disabled is true', () => { + expect( + ReactTestRenderer.create( + + + , + ), + ).toMatchSnapshot(); + }); + + it('should overwrite accessibilityState with value of disabled prop', () => { + expect( + ReactTestRenderer.create( + + + , + ), + ).toMatchSnapshot(); + }); + + it('should disable button when accessibilityState is disabled', () => { + expect( + ReactTestRenderer.create( + + + , + ), + ).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..545e77e54e3bd9 100644 --- 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 `; + +exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true 1`] = ` + +`; + +exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true and accessibilityState is empty 1`] = ` + +`; + +exports[`TouchableWithoutFeedback with disabled state should disable button when accessibilityState is disabled 1`] = ` + +`; + +exports[`TouchableWithoutFeedback with disabled state should keep accessibilityState when disabled is true 1`] = ` + +`; + +exports[`TouchableWithoutFeedback with disabled state should overwrite accessibilityState with value of disabled prop 1`] = ` + +`;