mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
88f2356eed
Summary: Issue https://github.com/facebook/react-native/issues/30952 Add talkback support for TouchableNativeFeedback component. ## 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 --> [Android] [Changed] - TouchableNativeFeedback: sync disabled prop with accessibilityState Pull Request resolved: https://github.com/facebook/react-native/pull/31224 Test Plan: I have checked that talkback and disabled works properly on the actual device(Pixel4a Android11). ```jsx /** * Sample React Native App * https://github.com/facebook/react-native * * format * flow strict-local */ import * as React from 'react'; import { Text, View, StyleSheet, TouchableNativeFeedback, Alert, } from 'react-native'; export default function App() { const onPress = () => Alert.alert('test'); return ( <View style={styles.container}> {/*not disabled, voice:double tap to activate*/} <TouchableNativeFeedback onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}>talkback OK</Text> </View> </TouchableNativeFeedback> {/*disabled, voice:disabled*/} <TouchableNativeFeedback disabled={true} onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}> should be disabled when disabled is true </Text> </View> </TouchableNativeFeedback> {/*disabled, voice:disabled*/} <TouchableNativeFeedback accessibilityState={{disabled: true}} onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}> should be disabled when accessibilityState disabled is true </Text> </View> </TouchableNativeFeedback> {/*disabled, voice:disabled*/} <TouchableNativeFeedback disabled={true} accessibilityState={{}} onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}> should be disabled when disabled is true and accessibilityState is empty </Text> </View> </TouchableNativeFeedback> {/*disabled, voice:disabled*/} <TouchableNativeFeedback disabled={true} accessibilityState={{checked: true}} onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}> should keep accessibilityState when disabled is true </Text> </View> </TouchableNativeFeedback> {/*disabled, voice:disabled*/} <TouchableNativeFeedback disabled={true} accessibilityState={{disabled: false}} onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}> should overwrite accessibilityState with value of disabled prop </Text> </View> </TouchableNativeFeedback> {/*not disabled, voice:double tap to activate*/} <TouchableNativeFeedback disabled={false} accessibilityState={{disabled: true}} onPress={onPress}> <View style={styles.touchable}> <Text style={styles.text}> should overwrite accessibilityState with value of disabled prop </Text> </View> </TouchableNativeFeedback> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 16, }, touchable: {flex: 0.5, borderColor: 'black', borderWidth: 1, marginBottom: 8}, text: {alignSelf: 'center'}, }); ``` Reviewed By: yungsters Differential Revision: D27479271 Pulled By: kacieb fbshipit-source-id: 43187839b58dfe8f91afdba91453fb6b98e1a604
116 lines
3.2 KiB
JavaScript
116 lines
3.2 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @emails oncall+react_native
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import * as React from 'react';
|
|
import ReactTestRenderer from 'react-test-renderer';
|
|
import Text from '../../../Text/Text';
|
|
import TouchableNativeFeedback from '../TouchableNativeFeedback';
|
|
import View from '../../View/View';
|
|
|
|
const render = require('../../../../jest/renderer');
|
|
|
|
describe('TouchableWithoutFeedback', () => {
|
|
it('renders correctly', () => {
|
|
const instance = render.create(
|
|
<TouchableNativeFeedback style={{}}>
|
|
<Text>Touchable</Text>
|
|
</TouchableNativeFeedback>,
|
|
);
|
|
|
|
expect(instance.toJSON()).toMatchSnapshot();
|
|
});
|
|
|
|
it('has displayName', () => {
|
|
expect(TouchableNativeFeedback.displayName).toEqual(
|
|
'TouchableNativeFeedback',
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('<TouchableNativeFeedback />', () => {
|
|
it('should render as expected', () => {
|
|
const instance = ReactTestRenderer.create(
|
|
<TouchableNativeFeedback>
|
|
<View />
|
|
</TouchableNativeFeedback>,
|
|
);
|
|
|
|
expect(instance.toJSON()).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('<TouchableNativeFeedback disabled={true}>', () => {
|
|
it('should be disabled when disabled is true', () => {
|
|
expect(
|
|
ReactTestRenderer.create(
|
|
<TouchableNativeFeedback disabled={true}>
|
|
<View />
|
|
</TouchableNativeFeedback>,
|
|
),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('<TouchableNativeFeedback disabled={true} accessibilityState={{}}>', () => {
|
|
it('should be disabled when disabled is true and accessibilityState is empty', () => {
|
|
expect(
|
|
ReactTestRenderer.create(
|
|
<TouchableNativeFeedback disabled={true} accessibilityState={{}}>
|
|
<View />
|
|
</TouchableNativeFeedback>,
|
|
),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('<TouchableNativeFeedback disabled={true} accessibilityState={{checked: true}}>', () => {
|
|
it('should keep accessibilityState when disabled is true', () => {
|
|
expect(
|
|
ReactTestRenderer.create(
|
|
<TouchableNativeFeedback
|
|
disabled={true}
|
|
accessibilityState={{checked: true}}>
|
|
<View />
|
|
</TouchableNativeFeedback>,
|
|
),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:false}}>', () => {
|
|
it('should overwrite accessibilityState with value of disabled prop', () => {
|
|
expect(
|
|
ReactTestRenderer.create(
|
|
<TouchableNativeFeedback
|
|
disabled={true}
|
|
accessibilityState={{disabled: false}}>
|
|
<View />
|
|
</TouchableNativeFeedback>,
|
|
),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|
|
|
|
describe('<TouchableNativeFeedback disabled={false} accessibilityState={{disabled:true}}>', () => {
|
|
it('should overwrite accessibilityState with value of disabled prop', () => {
|
|
expect(
|
|
ReactTestRenderer.create(
|
|
<TouchableNativeFeedback
|
|
disabled={false}
|
|
accessibilityState={{disabled: true}}>
|
|
<View />
|
|
</TouchableNativeFeedback>,
|
|
),
|
|
).toMatchSnapshot();
|
|
});
|
|
});
|