callstack / callstack/react-native-paper

A11y - Modals do not receive accessibility focus when used with VoiceOver

Open
#3,912 5 comments 0 reactions 0 assignees View on GitHub
Accessibility bug Modal
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.