callstack / callstack/react-native-paper

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

Đang mở
#3,912 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
Accessibility bug Modal
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu từ phần triển khai modal của React Native Paper và so sánh hành vi về khả năng truy cập của nó với modal vanilla React Native được mô tả trong báo cáo. Tái hiện vấn đề bằng các cử chỉ của VoiceOver và TalkBack, sau đó xác minh rằng tiêu điểm trợ năng di chuyển vào modal khi modal mở trên các nền tảng bị ảnh hưởng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
accessibility, mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.