callstack / callstack/react-native-paper

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

オープン
#3,912 コメント 5 件 リアクション 0 件 担当者 0 名 GitHub で見る
Accessibility bug Modal
主要言語
TypeScript
スター
14.5k
フォーク
2.2k
平均マージ
5日 23時間
マージ済み PR(30日)
12

説明

### 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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。