callstack / callstack/react-native-paper
A11y - Modals do not receive accessibility focus when used with VoiceOver
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 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
Contributor guide
Assessment
This issue has not been assessed yet.