[a11y] Accessibility for nested text components
See original GitHub issueDescription
Same as (stale) https://github.com/facebook/react-native/issues/27147. Consider this example:
<Text>
<Text> Please click: </Text>
<Text accessible={true} accessibilityRole='link' onPress={openLink()}> Link </Text>
</Text>
A screen reader user is not able to click/open the link (i.e. the 2nd nested Text component). Ideally, the screen reader should focus on the link as well. The addition of any permutation of accessibility props on the parent/child Text component does not help.
React Native version:
React native 0.62. React Native Environment Info: System: OS: Windows 10 CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor Memory: 19.72 GB / 31.92 GB Binaries: Node: 12.21.0 - C:\Users\supsing\AppData\Local\Temp\yarn–1628676998345-0.3639484914346074\node.CMD Yarn: 1.22.10 - C:\Users\supsing\AppData\Local\Temp\yarn–1628676998345-0.3639484914346074\yarn.CMD npm: 6.14.11 - C:\Users\supsing\AppData\Local\nvs\default\npm.CMD Watchman: 20210102.202219.0 - E:\watchman-v2021.01.04.00-windows\bin\watchman.EXE
Steps To Reproduce
Write nested text components as shown in the description.
Expected Results
Screen reader (Voiceover/talkback) should be able to tell the user that there is a link and user should be able to click on that link.
In Android (native), talkback adds any links available in a single text view in the accessibility menu (can be opened using swipe up then swipe right). The same should be done by React Native as well. Perhaps it can be achieved with ClickableSpan in Android. There should be similar ways in iOS as well.
Snack, code example, screenshot, or link to a repository:
<Text>
<Text> Please click: </Text>
<Text accessible={true} accessibilityRole='link' onPress={openLink()}> Link </Text>
</Text>
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:13 (1 by maintainers)
Top GitHub Comments
as documented in my test case https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1045593386 this was solved with commit https://github.com/facebook/react-native/commit/b352e2da8137452f66717cf1cecb2e72abd727d7 on Android
currently working on https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1045593164. thanks
Thanks for addressing this on Android, @fabriziobertoglio1987. This is not working on iOS currently, and it would be great to have a fix for that as well, thanks.