react / react/react-native

[iOS] VoiceOver reads the placeholder in TextInput

Open
#44,230 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: TextInput Issue: Author Provided Repro Needs: Attention Needs: Version Info Platform: iOS
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

When setting a placeholder in the TextInput field, VoiceOver reads the placeholder text. This causes problems when an accessibilityLabel is also provided.

Expected behaviour: Placeholder should not be read by a screen reader as it is just a visual component.

Steps to reproduce

Try this sample code:

import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('');

  return (
    <SafeAreaView>
      <TextInput
      placeholder="text input"
      accessibilityLabel="text input"
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputExample;
React Native Version

0.74.0

Affected Platforms

Runtime - iOS

Output of npx react-native info
n/a
Stacktrace or Logs
n/a
Reproducer

https://snack.expo.dev/eiduCgHeg-d8A6PLexqp2

Screenshots and Videos

IMG_F51B7AE11582-1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided Snack reproducer and its TextInput configuration, then trace the iOS TextInput accessibility behavior in React Native. Done means VoiceOver does not read the placeholder when an accessibilityLabel is provided, while the reported TextInput behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
accessibility, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.