Skip to content

Commit 6971640

Browse files
carloscuestafacebook-github-bot
carloscuesta
authored and
facebook-github-bot
committed
Disable accessibilityState when TouchableWithoutFeedback is disabled (#31297)
Summary: Disable `accessibilityState` when the `TouchableWithoutFeedback` is `disabled`. This fixes #30953 ## Changelog [General] [Changed] - Disable `accessibilityState` when the `TouchableWithoutFeedback` is `disabled`. Pull Request resolved: #31297 Test Plan: Tested the `TouchableWithoutFeedback` component on an Android device Reviewed By: nadiia Differential Revision: D27770689 Pulled By: kacieb fbshipit-source-id: a317246021354ed288b093f8a5e6fbba43d3a04e
1 parent 9e21d54 commit 6971640

File tree

3 files changed

+169
-8
lines changed

3 files changed

+169
-8
lines changed

‎Libraries/Components/Touchable/TouchableWithoutFeedback.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ const PASSTHROUGH_PROPS = [
7676
'accessibilityLabel',
7777
'accessibilityLiveRegion',
7878
'accessibilityRole',
79-
'accessibilityState',
8079
'accessibilityValue',
8180
'accessibilityViewIsModal',
8281
'hitSlop',
@@ -116,6 +115,13 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
116115
const elementProps: {[string]: mixed, ...} = {
117116
...eventHandlersWithoutBlurAndFocus,
118117
accessible: this.props.accessible !== false,
118+
accessibilityState:
119+
this.props.disabled != null
120+
? {
121+
...this.props.accessibilityState,
122+
disabled: this.props.disabled,
123+
}
124+
: this.props.accessibilityState,
119125
focusable:
120126
this.props.focusable !== false && this.props.onPress !== undefined,
121127
};
@@ -140,7 +146,10 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
140146
function createPressabilityConfig(props: Props): PressabilityConfig {
141147
return {
142148
cancelable: !props.rejectResponderTermination,
143-
disabled: props.disabled,
149+
disabled:
150+
props.disabled !== null
151+
? props.disabled
152+
: props.accessibilityState?.disabled,
144153
hitSlop: props.hitSlop,
145154
delayLongPress: props.delayLongPress,
146155
delayPressIn: props.delayPressIn,

‎Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-test.js

+62-6
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010

1111
'use strict';
1212

13-
const React = require('react');
14-
const Text = require('../../../Text/Text');
15-
const TouchableWithoutFeedback = require('../TouchableWithoutFeedback');
16-
17-
const render = require('../../../../jest/renderer');
13+
import * as React from 'react';
14+
import ReactTestRenderer from 'react-test-renderer';
15+
import Text from '../../../Text/Text';
16+
import View from '../../View/View';
17+
import TouchableWithoutFeedback from '../TouchableWithoutFeedback';
1818

1919
describe('TouchableWithoutFeedback', () => {
2020
it('renders correctly', () => {
21-
const instance = render.create(
21+
const instance = ReactTestRenderer.create(
2222
<TouchableWithoutFeedback style={{}}>
2323
<Text>Touchable</Text>
2424
</TouchableWithoutFeedback>,
@@ -33,3 +33,59 @@ describe('TouchableWithoutFeedback', () => {
3333
);
3434
});
3535
});
36+
37+
describe('TouchableWithoutFeedback with disabled state', () => {
38+
it('should be disabled when disabled is true', () => {
39+
expect(
40+
ReactTestRenderer.create(
41+
<TouchableWithoutFeedback disabled={true}>
42+
<View />
43+
</TouchableWithoutFeedback>,
44+
),
45+
).toMatchSnapshot();
46+
});
47+
48+
it('should be disabled when disabled is true and accessibilityState is empty', () => {
49+
expect(
50+
ReactTestRenderer.create(
51+
<TouchableWithoutFeedback disabled={true} accessibilityState={{}}>
52+
<View />
53+
</TouchableWithoutFeedback>,
54+
),
55+
).toMatchSnapshot();
56+
});
57+
58+
it('should keep accessibilityState when disabled is true', () => {
59+
expect(
60+
ReactTestRenderer.create(
61+
<TouchableWithoutFeedback
62+
disabled={true}
63+
accessibilityState={{checked: true}}>
64+
<View />
65+
</TouchableWithoutFeedback>,
66+
),
67+
).toMatchSnapshot();
68+
});
69+
70+
it('should overwrite accessibilityState with value of disabled prop', () => {
71+
expect(
72+
ReactTestRenderer.create(
73+
<TouchableWithoutFeedback
74+
disabled={true}
75+
accessibilityState={{disabled: false}}>
76+
<View />
77+
</TouchableWithoutFeedback>,
78+
),
79+
).toMatchSnapshot();
80+
});
81+
82+
it('should disable button when accessibilityState is disabled', () => {
83+
expect(
84+
ReactTestRenderer.create(
85+
<TouchableWithoutFeedback accessibilityState={{disabled: true}}>
86+
<View />
87+
</TouchableWithoutFeedback>,
88+
),
89+
).toMatchSnapshot();
90+
});
91+
});

‎Libraries/Components/Touchable/__tests__/__snapshots__/TouchableWithoutFeedback-test.js.snap

+96
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,99 @@ exports[`TouchableWithoutFeedback renders correctly 1`] = `
1515
Touchable
1616
</Text>
1717
`;
18+
19+
exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true 1`] = `
20+
<View
21+
accessibilityState={
22+
Object {
23+
"disabled": true,
24+
}
25+
}
26+
accessible={true}
27+
focusable={false}
28+
onClick={[Function]}
29+
onResponderGrant={[Function]}
30+
onResponderMove={[Function]}
31+
onResponderRelease={[Function]}
32+
onResponderTerminate={[Function]}
33+
onResponderTerminationRequest={[Function]}
34+
onStartShouldSetResponder={[Function]}
35+
/>
36+
`;
37+
38+
exports[`TouchableWithoutFeedback with disabled state should be disabled when disabled is true and accessibilityState is empty 1`] = `
39+
<View
40+
accessibilityState={
41+
Object {
42+
"disabled": true,
43+
}
44+
}
45+
accessible={true}
46+
focusable={false}
47+
onClick={[Function]}
48+
onResponderGrant={[Function]}
49+
onResponderMove={[Function]}
50+
onResponderRelease={[Function]}
51+
onResponderTerminate={[Function]}
52+
onResponderTerminationRequest={[Function]}
53+
onStartShouldSetResponder={[Function]}
54+
/>
55+
`;
56+
57+
exports[`TouchableWithoutFeedback with disabled state should disable button when accessibilityState is disabled 1`] = `
58+
<View
59+
accessibilityState={
60+
Object {
61+
"disabled": true,
62+
}
63+
}
64+
accessible={true}
65+
focusable={false}
66+
onClick={[Function]}
67+
onResponderGrant={[Function]}
68+
onResponderMove={[Function]}
69+
onResponderRelease={[Function]}
70+
onResponderTerminate={[Function]}
71+
onResponderTerminationRequest={[Function]}
72+
onStartShouldSetResponder={[Function]}
73+
/>
74+
`;
75+
76+
exports[`TouchableWithoutFeedback with disabled state should keep accessibilityState when disabled is true 1`] = `
77+
<View
78+
accessibilityState={
79+
Object {
80+
"checked": true,
81+
"disabled": true,
82+
}
83+
}
84+
accessible={true}
85+
focusable={false}
86+
onClick={[Function]}
87+
onResponderGrant={[Function]}
88+
onResponderMove={[Function]}
89+
onResponderRelease={[Function]}
90+
onResponderTerminate={[Function]}
91+
onResponderTerminationRequest={[Function]}
92+
onStartShouldSetResponder={[Function]}
93+
/>
94+
`;
95+
96+
exports[`TouchableWithoutFeedback with disabled state should overwrite accessibilityState with value of disabled prop 1`] = `
97+
<View
98+
accessibilityState={
99+
Object {
100+
"disabled": true,
101+
}
102+
}
103+
accessible={true}
104+
focusable={false}
105+
onClick={[Function]}
106+
onResponderGrant={[Function]}
107+
onResponderMove={[Function]}
108+
onResponderRelease={[Function]}
109+
onResponderTerminate={[Function]}
110+
onResponderTerminationRequest={[Function]}
111+
onStartShouldSetResponder={[Function]}
112+
/>
113+
`;

0 commit comments

Comments
 (0)