A11y Bug (iOS): Modal cannot be dismissed when double-tapping outside Modal area with VoiceOver turned on.

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 (
    <Provider>
      <Portal>
        <Modal
          visible={visible1}
          onDismiss={hideModal1}
          contentContainerStyle={containerStyle}
          dismissable>
          <Text>
            Example Modal with short text. Will NOT dismiss when outside is
            clicked with VoiceOver on.
          </Text>
          <Button style={{marginTop: 30}} mode="contained" onPress={hideModal1}>
            Close Modal
          </Button>
        </Modal>
        <Modal
          visible={visible2}
          onDismiss={hideModal2}
          contentContainerStyle={containerStyle}
          dismissable>
          <Text>
            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.
          </Text>
          <Button style={{marginTop: 30}} mode="contained" onPress={hideModal2}>
            Close Modal
          </Button>
        </Modal>
      </Portal>
      <Button style={{marginTop: 200}} onPress={showModal1} mode="contained">
        Show Modal with short text
      </Button>
      <Button style={{marginTop: 200}} onPress={showModal2} mode="contained">
        Show Modal with long text
      </Button>
    </Provider>
  );
};

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

[lukewalczak]

@dcalhoun thanks for sharing your finding with us, I will investigate the problem one more time in free time and for sure will be monitoring the issue you created!

[dcalhoun]

Hi! 👋🏻 I stumbled upon this issue while seeking a solution to a similar problem in https://github.com/WordPress/gutenberg/issues/29358, which does not utilize react-native-paper. From my testing, the inability to dismiss taller modals with VoiceOver may not be directly related to react-native-paper and potentially more related to React Native itself. I could be wrong, but figured I’d share in case it was helpful. 🙇🏻

Additionally, I opened https://github.com/facebook/react-native/issues/32759 in hopes of receiving more feedback from the React Native community.