diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 78befde8fbb8ad..52ed550b3896f6 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -165,7 +165,10 @@ class TouchableHighlight extends React.Component { _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 { ...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', () => { @@ -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( + + + , + ), + ).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__/TouchableHighlight-test.js.snap b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap index 8defbd09d1f4c5..70eaabe704a1f0 100644 --- a/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap +++ b/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap @@ -18,3 +18,109 @@ exports[`TouchableHighlight renders correctly 1`] = ` `; + +exports[`TouchableHighlight with disabled state should be disabled when disabled is true 1`] = ` + + + +`; + +exports[`TouchableHighlight with disabled state should be disabled when disabled is true and accessibilityState is empty 1`] = ` + + + +`; + +exports[`TouchableHighlight with disabled state should disable button when accessibilityState is disabled 1`] = ` + + + +`; + +exports[`TouchableHighlight with disabled state should keep accessibilityState when disabled is true 1`] = ` + + + +`; + +exports[`TouchableHighlight with disabled state should overwrite accessibilityState with value of disabled prop 1`] = ` + + + +`;