CODEWITHSUNDEEP
androidiosaccessibilityreact-native
Marseca
Marseca

Reputation: 133

I cannot get the accessibility working in the default 'Welcome to React Native!" APP

I cannot get the accessibility working in the default 'Welcome to React Native!" APP. I added the accessibility attributes to my <View> tag. Then I run this App and enable VoiceOver, but it reads every Text alone and not together, as a block of Texts.

In the ReactNative Accessibility documentation says that: "when a view is an accessibility element, it groups its children into a single selectable component". I cannot understand why VoiceOver don´t read the Texts as a block.

Futhermore, VoiceOver don´t read an "accessibilityLabel" attribute.

I cannot found any solution to my problem on the internet. It seems like I am doing some wrong...

This is my code:

render() {
    return (
      <View style={styles.container} accessibility={true} accessibilityLabel="Say something!!"> 
        <Text style={styles.welcome} >
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }

Test device: Iphone 6 iOS 9.2

React-Native-cli: 0.1.10

ReactNative version: 0.19.0

Upvotes: 0

Views: 2168

Answers (1)

Marseca
Marseca

Reputation: 133

Sorry! it was my mistake: the tag must be named "accessible", not "accessibility"

The correct code:

<View style={styles.container} accessible={true} accessibilityLabel="Hola" > 
          <Text style={styles.welcome} >
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </View>

Upvotes: 2

Related Questions