callstack / callstack/react-native-paper
A11y Bug (iOS): Modal cannot be dismissed when double-tapping outside Modal area with VoiceOver turned on.
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
On an iPad with VoiceOver on, a `Modal` cannot be dismissed by double-tapping the area outside the `Modal`, if the `Modal` only contains one line of text.
If the body of the `Modal` contains more than one line of of text, then double-tapping the area outside of the `Modal` closes it as expected.
### Expected behaviour
Double-tapping the area outside of the `Modal` should dismiss the `Modal` regardless of the number of lines of text.
### Code sample
I wrote this code with a fresh React Native project using `npx react-native init ModalBug --version 0.64.1` and then `npm install react-native-paper`. Simply replace the code in `App.js` with what I have provided below.
You will have to build the app on an actual iPad to test the VoiceOver functionality. You must set `Targeted Device Families` to `iPhone, iPad` under the `Build Settings` in xCode before running the build.
```
import React, {useState} from 'react';
import {Provider, Portal, Button, Modal} from 'react-native-paper';
import {Text} from 'react-native';
const App = () => {
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const showModal1 = () => setVisible1(true);
const hideModal1 = () => setVisible1(false);
const showModal2 = () => setVisible2(true);
const hideModal2 = () => setVisible2(false);
const containerStyle = {backgroundColor: 'white', padding: 20};
return (
Example Modal with short text. Will NOT dismiss when outside is
clicked with VoiceOver on.
Close Modal
Example Modal with long text. Will successfully dismiss when outside
is clicked with VoiceOver on. Lorem Ipsum is simply dummy text of
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book.
Close Modal
Show Modal with short text
Show Modal with long text
);
};
export default App;
```
### Screenshots (if applicable)
Heres a video of the current behaviour using the code above:
https://user-images.githubusercontent.com/48742122/133354367-fabde51f-c993-46f9-926b-a6e1bb61fc8e.MP4
### What have you tried
I encountered this issue on an app I work on, and realised there was no difference between the `Modals` that could and could not close, except for the number of lines of text within them. To make sure there was nothing else influencing this behaviour, I created a fresh RN app, and was able to recreate the issue with the code I provided above. I was not able to determine the reason for this behaviour by looking at the source code for the `Modal` component.
Based on my debugging I did notice that for the `Modals` that cannot be closed, when you double-tap outside the `Modal` area, the double-tap is not registered as a `press`. In other words, the `onPress` function on the `TouchableWithoutFeedback` component in the `Modal` component does not get called.
The `TouchableWithoutFeedback` component is found on `line 216` in `src/components/Modal.tsx`.
I do not have access to an iPhone, and as such have not had the opportunity to try and recreate the issue on a device with a smaller screen.
### Your Environment
| software | version
| --------------------- | -------
| ios | 14.7.1
| react-native | 0.64.1
| react-native-paper | 4.9.2
| node | 14.6.1
| npm | 7.23.0
Contributor guide
Assessment
This issue has not been assessed yet.