question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[a11y] Accessibility for nested text components

See original GitHub issue

Description

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:open
  • Created 2 years ago
  • Reactions:3
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
fabriziobertoglio1987commented, Feb 28, 2022

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.

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

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.

currently working on https://github.com/fabriziobertoglio1987/react-native-notes/issues/9#issuecomment-1045593164. thanks

1reaction
pranjal-jately-unmindcommented, Jun 20, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Content Structure | Web Accessibility Initiative (WAI) - W3C
Individual list items can contain a variety of HTML elements, including paragraphs, headings, form elements, and other (nested) lists.
Read more >
Accessibility rule: Interactive controls must not be nested
Guide describing the accessibility rule defined by axe-core: Interactive controls must not be nested.
Read more >
Accessibility on react native nested text components
From what I understand to create links in inline text the solution is too use nested text components like so (ps i know...
Read more >
nested-interactive - Accessibility Insights
Ensure interactive controls don't have focusable descendants by separating nested interactive components or styling a single element.
Read more >
Accessible Nested Active Elements in Android Apps | Deque
In talkback you can access the two controls individually, that's the easiest way to code it. Ultimately, we end up associating these two...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found