Files
react-native/Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js
T
Kazuki Yamashiro 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

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();
});
});