React-native: Placeholder property included in TextInput Componenent prevents accessibilityLabel and accessibiltyHint from being read by screenreader

[ryan-henderson-IM]

When including a placeholder property in a TextInput component, the accessibilityLabel and accessibilityHint properties are not read out in the screen reader. Example:

<TextInput accessible={true} accessibilityLabel={'My Accessibility Label'} accessibilityHint={'My Accessibility Hint')} accessibilityRole={'search'} style={[searchInput, { backgroundColor: searchFocus ? theme.INPUT_FOCUS_COLOR : theme.WHITE_COLOR }]} onFocus={(bool) => {set_searchFocus(bool);}} value={searchKey} inputAccessoryViewID={inputAccessoryViewID} placeholderTextColor={'#767676'} keyboardType= "default" returnKeyType={Platform.OS === 'ios' ? '' : "search"} enablesReturnKeyAutomatically={true} onSubmitEditing={() => {searchOrder();}} placeholder={formatMessageString('My Placeholder Text')} onChangeText={(searchString) =>{setSearchKey(searchString);}} underlineColorAndroid="transparent" />

One would expect the accessibilityLabel and Hint to be read out, and in my experience prior to 0.60 they were, along with the placeholder. Now, only the placeholder text his read out. Removing the placeholder property reads out the Label and Hint.

React Native version:

0.60.5

Steps To Reproduce

1. Include a TextInput in project with accessibilityLabel, accessibilityHint, and placeholder text.
2. Open project in device, turn on screenreader (e.g. TalkBack for Android, VoiceOver for iOS), and click the field.
3. Click on field
4. Note that screenreader only reads out the placeholder text, and not the accessibilityLabel and accessibilityHint.
5. Remove placeholder text and reload.
6. Click on field
7. Note that accessbilityLabel and accessibilityHint are read out by the screenreader

[vishweshjoshi]

I am also facing the same issue. Can you please let me know if any solution or work around is available?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[fvsch]

I can reproduce the issue using React Native 0.61 and TalkBack on Android 10.

[smjurek]

Hi! I am still facing the same issue using RN: 0.61 and TalkBack on Android 9.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[hapablap21]

I'm having the same issue, except it happens any time the component has a value, placeholder or not. The accessiblityLabel only gets read when the field is entirely empty.

RN 0.62.2

some samples with read out verbiage in comments:

{/* "field name" */}
<View accessible={true} accessibilityLabel={"Field Name"}>
    <Paragraph>Field Name</Paragraph>
    <View>
        {/* "six edit box" */}
        <TextInput
            value={"6"}
            keyboardType="numeric"
        />
    </View>
</View>

{/* "field name the field value is 7" */}
<View accessible={true} accessibilityLabel={"Field Name"} accessibilityValue={{ text: "The field value is 7" }}>
    <Paragraph>Field Name</Paragraph>
    <View>
        {/* "seven edit box" */}
        <TextInput
            value={"7"}
            keyboardType="numeric"
        />
    </View>
</View>



md5-b3bfe7c71897532302b7104f2f244c63



{/* "field name" */}
<View accessible={true}>
    <Paragraph>Field Name</Paragraph>
    <View>
        {/* "eight edit box" */}
        <TextInput
            value={"8"}
            keyboardType="numeric"
            accessibilityLabel={"Field Name"}
        />
    </View>
</View>



md5-b3bfe7c71897532302b7104f2f244c63



{/* "field name" */}
<View>
    <Paragraph>Field Name</Paragraph>
    <View>
        {/* "nine edit box" */}
        <TextInput
            value={"9"}
            keyboardType="numeric"
            accessibilityValue={{ text: "The field value is 9" }}
            accessibilityLabel={"Field Name"}
        />
    </View>
</View>



md5-b3bfe7c71897532302b7104f2f244c63



{/* "field name" */}
<View accessible={true}>
    <Paragraph>Field Name</Paragraph>
    <View>
        {/* "placeholder edit box" */}
        <TextInput
            value={undefined}
            keyboardType="numeric"
            accessibilityLabel={"Field Name"}
            placeholder="placeholder"
        />
    </View>
</View>



md5-6a61f1316764149c06c4cb40894d9246



{/* "field name" */}
<View accessible={true}>
    <Paragraph>Field Name</Paragraph>
    <View>
        {/* "field name the field value is 9 edit box" */}
        <TextInput
            value={undefined}
            keyboardType="numeric"
            accessibilityLabel={"Field Name"}
            accessibilityValue={{ text: "The field value is 9" }}
        />
    </View>
</View>

[tostringtheory]

I'm putting my hat in the ring on this. We've spent the last couple days trying to figure out our field accessibility with Android. Digging into this it is clear that react-native's accessibility on Android is broken, and I've got some evidence of our findings.

Essentially, we were able to discern that there are 4 variables that determine what Android or iOS says - existence of value, accessibilityLabel, accessibilityHint, or placeholder. React-Native on iOS seems to treat all of the scenarios logically, while Android does not. I've created a minimal example demonstrating all 7 combinations of specification of accessibilityLabel / accessibilityHint / placeholder, and you can clear the text box/value to investigate the other 7 combinations (without value). As well, above each example I specify what Android/iOS reads with no value, and below each example I specify what Android/iOS reads with "1" as the value:

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

const labelText = "Test";

export default class App extends React.Component {
  state = { text: "1" }

  render() {
    const Example = ({title, label, hint, placeholder}) => {
      const accessibilityProps = {
        ...(hint && { accessibilityHint: `${labelText} hint`}),
        ...(placeholder && { placeholder: `${labelText} placeholder`}),
        ...(label && { accessibilityLabel: `${labelText} label`})
      };

      return (
      <React.Fragment>
      <View style={styles.sectionContainer}>
            <Text accessibilityRole='header' style={styles.sectionTitle}>
              {title}
            </Text>
          </View>
          <View style={styles.sectionContainer}>
            <TextInput
                style={{height: 30, borderWidth: 1}}
                keyboardType="phone-pad"
                onChangeText={ text => this.setState({text}) }
                value={this.state.text}

                {...accessibilityProps}
              />
          </View>
        </React.Fragment>
    )};

    return (
    <View >

        <View style={styles.body}>

          {/* ANDROID: Test Label, Edit Box */}
          {/* iOS: Test Label, Text Field, .. */}
          <Example title="Label Only" label />
          {/* ANDROID: One, Edit Box */}
          {/* iOS: Test Label, One, Text Field */}

          {/* ANDROID: Test Hint, Edit Box */}
          {/* iOS: Test Hint, Text Field, .. */}
          <Example title="Hint Only" hint />
          {/* ANDROID: One, Edit Box */}
          {/* iOS: One, Text Field, Test Hint .. */}

          {/* ANDROID: Test Placeholder, Edit Box */}
          {/* iOS: Test Placeholder, Text Field, .. */}
          <Example title="Placeholder Only" placeholder />
          {/* ANDROID: One, Edit Box, Test Placeholder */}
          {/* iOS: One, Text Field .. */}

          {/* ANDROID: Test Placeholder, Edit Box */}
          {/* iOS: Test Label, Test Placeholder, Text Field, .. */}
          <Example title="Label, Placeholder" label placeholder />
          {/* ANDROID: One, Edit Box, Test Placeholder */}
          {/* iOS: Test Label, One, Text Field .. */}

          {/* ANDROID: Test Label, Test Hint, Edit Box */}
          {/* iOS: Test Label, Text Field, Test Hint.. */}
          <Example title="Label, Hint" label hint />
          {/* ANDROID: One, Edit Box */}
          {/* iOS: Test Label, One, Text Field, Text Hint .. */}

          {/* ANDROID: Test Placeholder, Edit Box */}
          {/* iOS: Test Placeholder, Text Field, Test Hint.. */}
          <Example title="Hint, Placeholder" hint placeholder />
          {/* ANDROID: One, Edit Box, Test Placeholder */}
          {/* iOS: One, Text Field, Test Hint .. */}

          {/* ANDROID: Test Placeholder, Edit Box */}
          {/* iOS: Test Label, Test Placeholder, Text Field, Test Hint.. */}
          <Example title="Label, Hint, Placeholder Only" label hint placeholder />
          {/* ANDROID: One, Edit Box, Test Placeholder */}
          {/* iOS: Test Label, One, Text Field, Text Hint .. */}

        </View>
    </View>
  ); 
 }
}

const styles = StyleSheet.create({
  body: {
    padding: 48,
    backgroundColor: '#fff',
  },
  sectionContainer: {
    marginTop: 14,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#000',
  }
});

This is available as a Snack. This is on react-native 0.61 from the Expo 37 SDK, but we've confirmed this in vanilla 0.62.2 in house as well. Furthermore, even if I switch the Snack version to Expo 34, the issue still applies for Android.

Essentially however, the bug is that react-native completely ignores the label if there is either a value or placeholder specified on the field, and if there is not a placeholder specified but a value exists, it only reads the value.

[tostringtheory]

Just commenting that this is still a known issue for our company/app before stalebot comes in and yells at us.

Is there anyone on the react-native project that we should mention to pull them into this issue? Is there any further information needed besides the reproduction JSX/snack above?

[Akanksha-Thakur]

I used property accessibilityRole="none" for announce accessiblityLable in TextInput, but after that it will announce placeholder also. so we can handle it by check. here is my code -

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      email: ''
    }
  }
render() {
    return (
            <TextInput
               placeholder={this.state.email.length > 0 ? ''" : "Enter email"}
               value={this.state.email}
              onChangeText={(text) => this.setState({email: text})}
              accessibilityRole="none"
              accessibilityLabel={this.state.email.length > 0 ? `your email is ${this.state.email}` : "Please enter your email"}
           /> 
    );
  }
}

[tostringtheory]

@Akanksha-Thakur - that's just meant to be a workaround right? It still seems to me that given the fact that it works (seemingly) correctly on 1 platform (iOS) that it should work correctly/reproducibly on either platform without having to conditionally render some of that information? It also seems hacky to specify that an interactive element has no accessibilityRole?

[Akanksha-Thakur]

@tostringtheory - accessibilityRole use for announce accessibilityLabel also and yes is it like a hacking code because I don't think there is any other way to shoutout this issue.

[vitorandrietta]

I'm still able to reproduce it on react-native v0.61.5, is this fixed on the last version?

[jychiao]

This is a known issue for our company as well, and we just upgraded to 0.63.2. We rely on props like accessibilityLabel and accessibilityHint for our other components to bind extra context to our input elements, and this behavior is really problematic for us, especially with how important a basic text input is for a form experience. Shoving as much information as we want into a prop that does work, or setting accessibilityRole="none" is really not ideal -- is there any way we can get more visibility on this problem?

[smjurek]

This problem still persists after upgrading to RN 0.63.2.