88f2356eed
Added talkback support for TouchableNativeFeedback accessibility: disabled prop ( #31224 )
...
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
2021-04-02 17:12:20 -07:00
Kazuki Yamashiro
Bruno Castro