react / react/react-native

[iOS] VoiceOver reads the placeholder in TextInput

Aperta
#44,230 5 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Component: TextInput Issue: Author Provided Repro Needs: Attention Needs: Version Info Platform: iOS
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con il reproducer Snack fornito e la relativa configurazione di TextInput, quindi traccia il comportamento di accessibilità di TextInput su iOS in React Native. Il lavoro è completato quando VoiceOver non legge il placeholder se viene fornito un accessibilityLabel, mantenendo invariato il comportamento segnalato di TextInput.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native
Ambito
accessibility, mobile
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.