Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TouchableNativeFeedback Component doesn't disable click functionality when disabled #30952

Closed
amarlette opened this issue Feb 10, 2021 · 1 comment
Closed

TouchableNativeFeedback Component doesn't disable click functionality when disabled #30952

amarlette opened this issue Feb 10, 2021 · 1 comment
Labels
Accessibility Component: TouchableNativeFeedback Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@amarlette
Copy link

amarlette commented Feb 10, 2021 •
edited
Loading

Description

When using a screen reader the TouchableNativeFeedback component doesn't disable click functionality.

This issue is covered in-depth by parent issue #30840, please check there for more details.

React Native version:

0.63
@amarlette amarlette mentioned this issue Feb 10, 2021
Closed
19 tasks
@amarlette amarlette added Good first issue Interested in collaborating? Take a stab at fixing one of these issues. and removed Needs: Triage 🔍 labels Mar 5, 2021
kyamashiro added a commit to kyamashiro/react-native that referenced this issue Mar 24, 2021
@kyamashiro
TouchableNativeFeedback: sync disabled prop with accessibilityState (f…
a834e9f 
…acebook#30952)
kyamashiro added a commit to kyamashiro/react-native that referenced this issue Mar 24, 2021
@kyamashiro
TouchableNativeFeedback: sync disabled prop with accessibilityState (f…
cd04626 
…acebook#30952)
@kyamashiro kyamashiro mentioned this issue Mar 24, 2021
Closed
@amarlette amarlette linked a pull request Mar 25, 2021 that will close this issue
Added talkback support for TouchableNativeFeedback accessibility: disabled prop #31224
Closed
facebook-github-bot pushed a commit that referenced this issue Apr 3, 2021
@kyamashiro @facebook-github-bot
Added talkback support for TouchableNativeFeedback accessibility: dis…
88f2356 
…abled prop (#31224)

Summary:
Issue #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: #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
@amarlette
Copy link
Author

Closed by #31224

@facebook facebook locked as resolved and limited conversation to collaborators Apr 5, 2022
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 5, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Accessibility Component: TouchableNativeFeedback Good first issue Interested in collaborating? Take a stab at fixing one of these issues. Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
2 participants
@amarlette @react-native-bot