callstack
A11y - Modals do not receive accessibility focus when used with VoiceOver
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 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 |
Hi, I am also facing the same issue. Clicking on a button, opens a modal but VoiceOver still reading the content behind it. Modal is not receiving accessibility focus. Any solution found for it??
Update: Just use a vanilla React Native Modal. They're fully accessible. You can't anchor them easily like RNP modals is the main drawback.
@dil-prawat , there isn't a simple solution using RNP, but you can use AccessibilityInfo.setAccessibilityFocus() to manually set screen-reader focus to the title of the dialog on dialog open. (Caveat - the title can't be a RNP component itself, because it needs to be a component that can accept a ref - use vanilla React <Text>.
See this SO post for details.
More resources:
https://stackoverflow.com/questions/42730400/focus-input-on-load-of-modal-in-react-native https://stackoverflow.com/questions/53496194/change-accessibility-focus-in-react-native-app-on-drawer-modal-open The Shopify team rolled their own solution, which one Shopify author recommends copying: https://github.com/cds-snc/covid-alert-app/blob/main/src/shared/useAccessibilityAutoFocus.ts
@meatnordrink - do you have any idea if this issue is still present when using a react-navigation modal? https://reactnavigation.org/docs/modal/
@jacquesdev, I haven't tried the react-navigation modal. It's not an issue on the vanilla React Native modal.
Update: Using a vanilla React-Native modal IS accessible, meaning that the issue IS specific to the React Native Paper modal implementation.