callstack / callstack/react-native-paper
A11y - Modals do not receive accessibility focus when used with VoiceOver
- Langage dominant
- TypeScript
- Étoiles
- 14.5k
- Forks
- 2.2k
- Merge moyen
- 5 j 23 h
- PR mergées (30 j)
- 12
Description
### Current behaviour
Accessibility focus remains on the screen behind the modal, leaving the VoiceOver user potentially unaware that there even _is_ a modal.
### Expected behaviour
Modals should receive accessibility focus when opened. (This is the behavior for plain React Native modals, and web modals.)
https://www.magentaa11y.com/checklist-native/alert-dialog/
https://www.shopify.com/partners/blog/react-native-accessibility
W3 says they [don't have separate guidelines for mobile a11y](https://www.w3.org/WAI/standards-guidelines/mobile/) and that their web standards apply everywhere, so:
https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
### How to reproduce?
On an app that uses the React Native Paper modal, use it while navigating via VoiceOver/Talkback gestures.
### Preview
### What have you tried so far?
We've tried several solutions, but the fact that RNP components don't take refs have stymied home-rolled solutions.
Ideally this should be standard behavior, as it's always the desired behavior.
Update: Using a vanilla React-Native modal IS accessible, meaning that the issue IS specific to the React Native Paper modal implementation. This means that using a vanilla RN modal is an acceptable workaround; but also means that RNP modals are reducing accessibility wherever used vs their vanilla RN counterparts.
### Your Environment
| software | version
| --------------------- | -------
| ios | 14, 15,, 16
| android | x
| react-native | 0.70.9
| react-native-paper | 3.0.8
| node | 16.4.2
| npm or yarn | 8.5.0
| expo sdk | x.x.x
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par l’implémentation du modal de React Native Paper et comparez son comportement en matière d’accessibilité avec celui du modal vanilla de React Native décrit dans le rapport. Reproduisez le problème à l’aide des gestes de VoiceOver et de TalkBack, puis vérifiez que le focus d’accessibilité se déplace dans le modal lors de son ouverture sur les plateformes concernées.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- 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
- 35/100