react-native
react-native copied to clipboard
Add missing `aria-label` support to `<TextInput>`
Summary:
Currently <TextInput> does not support aria-label, only accessibilityLabel. This commit updates <TextInput> to accept either accessibilityLabel or aria-label, preferring aria-label when provided to match the implementation in other native components.
Changelog:
[GENERAL] [FIXED] Add missing aria-label support to <TextInput>
Test Plan:
Here's a demonstration of accessibilityLabel on both platforms, and the lack of aria-label support based on this code: https://snack.expo.dev/@levibuzolic/4c3b62
The top <TextInput> has accessibilityLabel="Input with accessibilityLabel" and the bottom has aria-label="Input with aria-label". Both platforms correctly read the accessibilityLabel while neither reads the aria-label. This is because theres no native code to support aria-label and instead all other components remap this prop to accessibilityLabel.
iOS
https://github.com/facebook/react-native/assets/721323/5518016c-c6a2-4d51-a8a8-7467cd693094
Android
https://github.com/facebook/react-native/assets/721323/d67adf1c-4b10-4e25-b602-4bb94e0ad589
@necolas Not sure where we've landed on adding aria-* props. Is this something we still want to encourage?
If yes, @levibuzolic can you also add a PR for the docs for this prop on react-native-website?
@lunaleaps more than happy to, but I think this may already covered by TextInputs's inheritance of ViewProps. TextInput doesn't explicitly include documentation any of the core accessibility* or aria-* props.
This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
Have resolved the merge conflicts, as far as I can tell this still makes sense as it aligns the implementation with the docs, but not sure what direction the team are going with the aria-* props at.