Skip to content

Text Component doesn't disable click functionality when disabled #30947

Description

@amarlette

Description

When a Text component passes true to disabled prop, the component does not announce "disabled" when using a screen reader.

import {Text, View, StyleSheet} from 'react-native';
import * as React from 'react';

type Props = SurfaceProps<PlaygroundRoute>;

export default function Playground(props: Props): React.Node {
  const [pressCount, setPressCount] = React.useState(0);
  return (
    <View style={styles.container}>
      <Text> Press count: {pressCount} </Text>
      <Text
        style={styles.text}
        accessibilityState={{disabled: true}}
        accessibilityRole="button"
        onPress={() => setPressCount(pressCount + 1)}>
        Case 1: onPressText - disabled via accessibilityState prop
      </Text>
      <Text
        style={styles.text}
        disabled
        accessibilityRole="button"
        onPress={() => setPressCount(pressCount + 1)}>
        Case 2: onPressText - disabled via disabled prop
      </Text>
      <Text
        style={styles.text}
        accessibilityRole="button"
        onPress={() => setPressCount(pressCount + 1)}>
        Case 3: onPressText - not disabled
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingTop: 30,
  },
  text: {
    margin: 20,
  },

The above examples have the following problems (bolded text highlights problems)

Case Android (with TalkBack off) Android (with TalkBack on) iOS (VoiceOver off) iOS (VoiceOver on)
Case 1: disabled from accessibilityState Can still trigger onPress Can still trigger onPress although it reads the button as disabled Can still trigger onPress Can still trigger onPress -- does not read button as disabled
Case 2: disabled from disabled prop Cannot trigger onPress Cannot trigger onPress Can still trigger onPress Can still trigger onPress -- does not read button as disabled
Case 3: not disabled Can trigger onPress Can trigger onPress Can trigger onPress Can trigger onPress

Notes:

  • You must set accessibilityRole="button" to correctly tell VoiceOver/TalkBack that the Text component is clickable and screen reader will relay that information.

Identified Problems:

  • Android's disabled via accessibilityState allows you to still trigger onPress behavior regardless if you have TalkBack on.
  • iOS also disregards accessibilityState's disabled regardless of VoiceOver -- onPress will be triggered.
  • iOS disregards disabled prop -- onPress will be triggered regardless of VoiceOver
  • iOS VoiceOver does not read buttons as disabled regardless via accessibilityState or disabled prop.

Reproduce:

  • On Android device, toggle TalkBack (Settings > Accessibility > TalkBack on (turn on volume shortcut for ease)
  • On iOS device, toggle VoiceOver by (Settings > Accessibility > VoiceOver). You can also turn on a shortcut (Settings > Accessibility > Accessibility Shortcut > VoiceOver) which allows you to triple click the power button to turn off/on VoiceOver.
  • Render the above example
  • Swipe to focus on the 3 different cases to test

React Native version:

0.63

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions