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]

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]

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>

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

{/* "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>

{/* "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>

This one is fun: if the value is empty, the accessibilityValue will get read along with the accessibilityLabel. Which is the behavior I'd expect in all cases.

{/* "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?