react / react/react-native

[a11y] Accessibility for nested text components

Ouverte
#32,004 33 commentaires 6 réactions 1 personne assignée Voir sur GitHub

@fabOnReact y travaille déjà.

Depuis le 21/9/2022.

Accessibility Accessibility Team - Evaluated Component: Text Needs: Attention
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

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>

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.