callstack / callstack/react-native-pager-view

[BUG] [Accessibility] [iOS] - PagerView with scroll disabled still scrolls when we focus an horizontal scrollview item inside it

Ouverte
#971 7 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
3.4k
Forks
476
Merge moyen
10 j 21 h
PR mergées (30 j)
2

Description

First things first: Thanks for your great library!

Here are all the useful info I can share:

## Environment

- As per the example app;
- Old Architecture & New Architecture as well;

## Description

Since accessibility is kind of mandatory for most app, we need to ensure that ours is accessible as well and we are currently fighting with the pager view implementation.
We use the [react-native-tab-view](https://reactnavigation.org/docs/tab-view/) library and initially we though the issue lied there, but in the end we cloned this project, ran the example app and found out that the issue is with the PagerView itself.

This is the error in detail:

If we render an horizontal FlatList, with items styled to fit the width of the screen, inside a PagerView with scrollEnabled set to false, once we start the VoiceOver and try to scroll the FlatList, the PagerView captures the gesture and scroll the tab instead.

> Note: I know that having an horizontal scrollview inside a tab isn't the brightest of all ideas, but you know, you jump the ship, the ship already has this setup, you don't wanna touch it and you end up writing an issue on the react-native-pager-view repository.

## Reproducible Demo

Here you can find the repo: [react-native-pager-view](https://github.com/gladiuscode/react-native-pager-view).
Build the bug/horizontal-scroll-view branch and check out the BasicPagerViewExample screen, you'll see that once you start the VoiceOver, you aren't able to scroll properly.

## Question

Is this library built with accessibility in mind?

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.

Piste de recherche

Build the bug/horizontal-scroll-view branch and open the BasicPagerViewExample screen in the example app. Reproduce the VoiceOver gesture with an horizontal FlatList inside a PagerView whose scrollEnabled is false, then trace the PagerView behavior involved in capturing the gesture. Done means the inner FlatList scrolls correctly without moving the disabled pager.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
ios, react-native, typescript
Domaine
accessibility, mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

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