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
Research direction
Start at the React Native Paper modal implementation and compare its accessibility behavior with the vanilla React Native modal described in the report. Reproduce the issue using VoiceOver and TalkBack gestures, then verify that accessibility focus moves into the modal when it opens on the affected platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- accessibility, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100