react-native [iOS] VoiceOver 朗读 TextInput 中的占位符

eqqqjvef  于 3个月前  发布在  React
关注(0)|答案(4)|浏览(70)

描述

当在 TextInput 字段中设置一个 placeholder 时,VoiceOver 会读取占位符文本。这会导致在提供 accessibilityLabel 时出现问题。预期行为:屏幕阅读器不应读取占位符,因为它只是一个视觉组件。

重现步骤

尝试以下示例代码:

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 版本

0.74.0

受影响的平台

运行时 - iOS

npx react-native info 的输出

n/a

堆栈跟踪或日志

n/a

重现者

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

截图和视频

mitkmikd

mitkmikd1#

⚠️添加或重新格式化版本信息
i️我们无法在您的问题报告中找到或解析React Native的版本号。请使用此模板,并报告您的版本,包括主要、次要和补丁编号 - 例如:0.70.2
qoefvg9y

qoefvg9y2#

我可以处理这个问题吗?

b4qexyjb

b4qexyjb4#

你好,@prateekgarcha ,我想我可能能帮助你解决这个问题。
首先,在iOS原生开发中,VoiceOver默认会读取UITextField的占位符值。这是预期的行为。
其次,也许你不需要在输入框中添加 accessibilityLabel="text input" 。系统会自动将这个组件宣布为“文本框”,这与你的“文本输入”略有不同,但目的相同。
最后,如果你想阻止占位符值被读出,我可以提供一个解决方法。在我的方法中,我会:

  1. 在TextField上添加一个与 TextField 大小相同的 TouchableOpacity ,
  2. Text 组件嵌套在 TouchableOpacity 中,并将其设置为显示你希望显示的占位符值,然后使用 accessibilityElementsHidden={true} 确保这个值不可读,
  3. 当用户点击 TouchableOpacity 时,进入编辑状态并隐藏 TouchableOpacity 。当用户退出编辑状态时,如果文本框为空,再次显示 TouchableOpacity 以模拟占位符类似的效果。
    我不确定这是否是一个好的实现方法,但我在iPhone 12和iOS 16.1上成功测试了它。希望这对你有所帮助。
    这是我的代码: https://snack.expo.dev/@ziggear/expo-snack-for-prateekgarcha?platform=ios

相关问题