Repository navigation
Accesible Label on TextInput #4914
Description
Activity
I traced this against current
mainatdfaecf05bf5aa23d06502048b7bfb3b2150c11bc. The requested behavior is already available through the library's current accessibility convention:TextInputPropsextends React Native's nativeTextInputProps, and the rendered input spreads Paper's generated accessibility data before consumer props. As a result,<TextInput label="E-Mail *" aria-label="E-Mail, required" />keeps the visual label while the consumer-providedaria-labeloverrides the generated label for the native input and web. This also matches the maintainer-approved migration in #5005, which standardized Paper onaria-*props. Adding a separatelabelAccessibilityLabelprop would duplicate the existing API. If this still reproduces, could you confirm whether you need the behavior backported to the 5.x line rather than current 6.xmain?@huytdps13400 thanks for the response. So in 5.15 definitely not working. We plan to upgrade soon to the current 6.x version.
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".