callstack / callstack/react-native-paper

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

未关闭
#3,912 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Accessibility bug Modal
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
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

贡献指南

打开贡献指南

调研方向

从 React Native Paper 的模态框实现入手,将其可访问性行为与报告中描述的 vanilla React Native 模态框进行比较。使用 VoiceOver 和 TalkBack 手势复现该问题,然后验证在受影响的平台上打开模态框时,可访问性焦点会移入模态框。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
accessibility, mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。