Skip to content

Commit f69e096

Browse files
Naturalclarfacebook-github-bot
Naturalclar
authored and
facebook-github-bot
committed
feat: set disabled accessibilityState when TouchableHighlight is disabled (#31135)
Summary: #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: #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
1 parent 866bf5f commit f69e096

File tree

3 files changed

+180
-6
lines changed

3 files changed

+180
-6
lines changed

‎Libraries/Components/Touchable/TouchableHighlight.js

+13-2
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,10 @@ class TouchableHighlight extends React.Component<Props, State> {
165165
_createPressabilityConfig(): PressabilityConfig {
166166
return {
167167
cancelable: !this.props.rejectResponderTermination,
168-
disabled: this.props.disabled,
168+
disabled:
169+
this.props.disabled != null
170+
? this.props.disabled
171+
: this.props.accessibilityState?.disabled,
169172
hitSlop: this.props.hitSlop,
170173
delayLongPress: this.props.delayLongPress,
171174
delayPressIn: this.props.delayPressIn,
@@ -283,13 +286,21 @@ class TouchableHighlight extends React.Component<Props, State> {
283286
...eventHandlersWithoutBlurAndFocus
284287
} = this.state.pressability.getEventHandlers();
285288

289+
const accessibilityState =
290+
this.props.disabled != null
291+
? {
292+
...this.props.accessibilityState,
293+
disabled: this.props.disabled,
294+
}
295+
: this.props.accessibilityState;
296+
286297
return (
287298
<View
288299
accessible={this.props.accessible !== false}
289300
accessibilityLabel={this.props.accessibilityLabel}
290301
accessibilityHint={this.props.accessibilityHint}
291302
accessibilityRole={this.props.accessibilityRole}
292-
accessibilityState={this.props.accessibilityState}
303+
accessibilityState={accessibilityState}
293304
accessibilityValue={this.props.accessibilityValue}
294305
accessibilityActions={this.props.accessibilityActions}
295306
onAccessibilityAction={this.props.onAccessibilityAction}

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

+61-4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@
1010

1111
'use strict';
1212

13-
const React = require('react');
14-
const ReactTestRenderer = require('react-test-renderer');
15-
const Text = require('../../../Text/Text');
16-
const TouchableHighlight = require('../TouchableHighlight');
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 TouchableHighlight from '../TouchableHighlight';
1718

1819
describe('TouchableHighlight', () => {
1920
it('renders correctly', () => {
@@ -26,3 +27,59 @@ describe('TouchableHighlight', () => {
2627
expect(instance.toJSON()).toMatchSnapshot();
2728
});
2829
});
30+
31+
describe('TouchableHighlight with disabled state', () => {
32+
it('should be disabled when disabled is true', () => {
33+
expect(
34+
ReactTestRenderer.create(
35+
<TouchableHighlight disabled={true}>
36+
<View />
37+
</TouchableHighlight>,
38+
),
39+
).toMatchSnapshot();
40+
});
41+
42+
it('should be disabled when disabled is true and accessibilityState is empty', () => {
43+
expect(
44+
ReactTestRenderer.create(
45+
<TouchableHighlight disabled={true} accessibilityState={{}}>
46+
<View />
47+
</TouchableHighlight>,
48+
),
49+
).toMatchSnapshot();
50+
});
51+
52+
it('should keep accessibilityState when disabled is true', () => {
53+
expect(
54+
ReactTestRenderer.create(
55+
<TouchableHighlight
56+
disabled={true}
57+
accessibilityState={{checked: true}}>
58+
<View />
59+
</TouchableHighlight>,
60+
),
61+
).toMatchSnapshot();
62+
});
63+
64+
it('should overwrite accessibilityState with value of disabled prop', () => {
65+
expect(
66+
ReactTestRenderer.create(
67+
<TouchableHighlight
68+
disabled={true}
69+
accessibilityState={{disabled: false}}>
70+
<View />
71+
</TouchableHighlight>,
72+
),
73+
).toMatchSnapshot();
74+
});
75+
76+
it('should disable button when accessibilityState is disabled', () => {
77+
expect(
78+
ReactTestRenderer.create(
79+
<TouchableHighlight accessibilityState={{disabled: true}}>
80+
<View />
81+
</TouchableHighlight>,
82+
),
83+
).toMatchSnapshot();
84+
});
85+
});

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

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

0 commit comments

Comments
 (0)