feat: set disabled accessibilityState when TouchableHighlight is disabled (#31135)
Summary: https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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
This commit is contained in:
Родитель
866bf5f424
Коммит
f69e096bb4
|
@ -165,7 +165,10 @@ class TouchableHighlight extends React.Component<Props, State> {
|
|||
_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<Props, State> {
|
|||
...eventHandlersWithoutBlurAndFocus
|
||||
} = this.state.pressability.getEventHandlers();
|
||||
|
||||
const accessibilityState =
|
||||
this.props.disabled != null
|
||||
? {
|
||||
...this.props.accessibilityState,
|
||||
disabled: this.props.disabled,
|
||||
}
|
||||
: this.props.accessibilityState;
|
||||
|
||||
return (
|
||||
<View
|
||||
accessible={this.props.accessible !== false}
|
||||
accessibilityLabel={this.props.accessibilityLabel}
|
||||
accessibilityHint={this.props.accessibilityHint}
|
||||
accessibilityRole={this.props.accessibilityRole}
|
||||
accessibilityState={this.props.accessibilityState}
|
||||
accessibilityState={accessibilityState}
|
||||
accessibilityValue={this.props.accessibilityValue}
|
||||
accessibilityActions={this.props.accessibilityActions}
|
||||
onAccessibilityAction={this.props.onAccessibilityAction}
|
||||
|
|
|
@ -10,10 +10,11 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const ReactTestRenderer = require('react-test-renderer');
|
||||
const Text = require('../../../Text/Text');
|
||||
const TouchableHighlight = require('../TouchableHighlight');
|
||||
import * as React from 'react';
|
||||
import ReactTestRenderer from 'react-test-renderer';
|
||||
import Text from '../../../Text/Text';
|
||||
import View from '../../View/View';
|
||||
import TouchableHighlight from '../TouchableHighlight';
|
||||
|
||||
describe('TouchableHighlight', () => {
|
||||
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(
|
||||
<TouchableHighlight disabled={true}>
|
||||
<View />
|
||||
</TouchableHighlight>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should be disabled when disabled is true and accessibilityState is empty', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(
|
||||
<TouchableHighlight disabled={true} accessibilityState={{}}>
|
||||
<View />
|
||||
</TouchableHighlight>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should keep accessibilityState when disabled is true', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(
|
||||
<TouchableHighlight
|
||||
disabled={true}
|
||||
accessibilityState={{checked: true}}>
|
||||
<View />
|
||||
</TouchableHighlight>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should overwrite accessibilityState with value of disabled prop', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(
|
||||
<TouchableHighlight
|
||||
disabled={true}
|
||||
accessibilityState={{disabled: false}}>
|
||||
<View />
|
||||
</TouchableHighlight>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should disable button when accessibilityState is disabled', () => {
|
||||
expect(
|
||||
ReactTestRenderer.create(
|
||||
<TouchableHighlight accessibilityState={{disabled: true}}>
|
||||
<View />
|
||||
</TouchableHighlight>,
|
||||
),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
@ -18,3 +18,109 @@ exports[`TouchableHighlight renders correctly 1`] = `
|
|||
</Text>
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`TouchableHighlight with disabled state should be disabled when disabled is true 1`] = `
|
||||
<View
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
focusable={false}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
>
|
||||
<View />
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`TouchableHighlight with disabled state should be disabled when disabled is true and accessibilityState is empty 1`] = `
|
||||
<View
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
focusable={false}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
>
|
||||
<View />
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`TouchableHighlight with disabled state should disable button when accessibilityState is disabled 1`] = `
|
||||
<View
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
focusable={false}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
>
|
||||
<View />
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`TouchableHighlight with disabled state should keep accessibilityState when disabled is true 1`] = `
|
||||
<View
|
||||
accessibilityState={
|
||||
Object {
|
||||
"checked": true,
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
focusable={false}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
>
|
||||
<View />
|
||||
</View>
|
||||
`;
|
||||
|
||||
exports[`TouchableHighlight with disabled state should overwrite accessibilityState with value of disabled prop 1`] = `
|
||||
<View
|
||||
accessibilityState={
|
||||
Object {
|
||||
"disabled": true,
|
||||
}
|
||||
}
|
||||
accessible={true}
|
||||
focusable={false}
|
||||
onClick={[Function]}
|
||||
onResponderGrant={[Function]}
|
||||
onResponderMove={[Function]}
|
||||
onResponderRelease={[Function]}
|
||||
onResponderTerminate={[Function]}
|
||||
onResponderTerminationRequest={[Function]}
|
||||
onStartShouldSetResponder={[Function]}
|
||||
>
|
||||
<View />
|
||||
</View>
|
||||
`;
|
||||
|
|
Загрузка…
Ссылка в новой задаче