callstack / callstack/react-native-paper

Accesible Label on TextInput

オープン
#4,914 コメント 2 件 リアクション 0 件 担当者 1 名 @azizbecha が担当を希望しています GitHub で見る
feature request
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

**My Problem:**
Currently, there is no streamlined way to provide a custom accessibility label specifically for the TextInput label or to override how screen readers announce "required" fields.

When a label uses a visual indicator like an asterisk (e.g., E-Mail *), VoiceOver reads it literally as "E-Mail Star" or "E-Mail Asterisk". This is confusing for users; the screen reader should ideally announce the semantic intent: "E-Mail, required."

**Suggested solution:**
I propose adding an accessibilityLabel (or labelAccessibilityLabel) prop to the TextInput component.

Behavior: If provided, this string would be used by the screen reader to identify the field, allowing developers to pass "E-Mail, required" while keeping the visual label as "E-Mail *".

Implementation: This prop should map directly to the underlying native accessibility labels (accessibilityLabel on React Native or aria-label on Web).

**Alternatives you've considered**
I have attempted several workarounds with limited success:

Custom Label Component: Passing a custom Text component with accessibilityLabel and accessible={true}.

Visually Hidden Text (SR-Only): Wrapping two components in a View—one visually hidden for screen readers containing the "Required" text, and one visible to sighted users with importantForAccessibility="no-hide-descendants".

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。