React Native: include a pattern for linking labels with text inputs

[pandu-supriyono]

Hi,

Thanks for these resources. I have little experience with building native apps so this definitely comes in handy.

I'm trying to find an idiomatic and isomorphic way of assigning labels with associated inputs. In the page input-label.md it is suggested to link a <Text> with <TextInput>, but no pattern is provided on how to actually achieve this.

Additionally, React Native Paper is provided as an example but for a beginner it is difficult to figure out how they implemented their <TextInput> in their source code. I am also critical of this particular example because of their use of floating input label for reasons illustrated in this article by Adam Silver (as well as other sources online).

I am currently looking online in other projects' source codes on how this is achieved and experimenting/testing myself. I'm definitely willing to contribute to this page once I have a better idea if you agree that this is something we might want to add in the documentation.

For now: do you have any extra resources or tips with regards to linking labels with text inputs in React Native?

EDIT: my naive implementation (React Native >= 0.71) would be something along the lines of

function AccessibleInput({ label, name, ...rest }) {
  <View>
    <Text aria-hidden>{label}</Text>
    <TextInput accessibilityLabel={label} {...rest}/>
  </View>
}

[JJdeGroot]

Hi Pandu,

Thanks for your interest in the code samples and for opening this issue.

Ideally, you would want to use the aria-labelled / accessibilityLabelledBy prop. But this prop only works on Android. This is not a limitation of React Native, but it's a limitation of iOS. iOS does not have a labelled by attribute.

For React Native, I believe the aria-hidden prop is equivalent to the accessible prop except they use inverse boolean values.

Hiding the <Text> for assistive technologies and applying the label to the <TextInput> is a common strategy. It's the one I also use on native iOS.

My experience in React Native is limited to say if there are better options. I will try to get a React Native developer to check this issue.

[thibmaek]

This is my team's approach in RN as well. Seems like a valid solution to have it work regardless of OS

[pandu-supriyono]

Hi all, many thanks for your input!

I will experiment with the accessible prop. Otherwise I'll continue developing my naive implementation in practice and see how that works out with users.

Unless you think this pattern should be documented, I believe we can close this issue.

Thanks again.

[pandu-supriyono]

An update from my side: I've gone ahead with updating to RN 0.71 and using the pattern I outlined earlier. Works great on both iOS and Android, but on Android/TalkBack the label gets skipped if there is a placeholder present.

Now in general I would avoid placeholders for reasons such as that people might need the example in the placeholder as reference (i.e. a date format) and typing into the field replaces the placeholder, but nevertheless I assume that the behaviour displayed by TalkBack is not expected and less than ideal.

Do we know of any workarounds to address this?

EDIT: see react/react-native#26739

[JJdeGroot]

Hi @pandu-supriyono , I'm wondering if you have made any progress and/or new insights in linking labels with text inputs in Reaact Native?

[pandu-supriyono]

Hi @JJdeGroot, unfortunately there hasn't been any progress from my side since my last update. I am picking up work and testing on this again soon, so perhaps something may come out of it.