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

[paldeep-singh]

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

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.1, latest: 0.65.1)
• npm (found: 6.14.12, latest: 7.23.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[paldeep-singh]

Issue is still present with npm 7.23.0.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.1, latest: 0.65.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[lukewalczak]

Hello @paldeep-singh, thanks for reporting it.

Basically for closing the modal on ios you can use the dedicated gesture:

Two-finger scrub (move two fingers back and forth three times quickly, making a “z”)

However, I think that issue can be solved by adding pointerEvents="box-none" on the Surface component within Modal which is a wrapper for a children - I will check and test it.

[paldeep-singh]

Hello @lukewalczak, thank you for getting back to me on this. I tried the fix you suggest and it did not work for me. I'd be interested to hear how you went with it.

[lukewalczak]

Hey @paldeep-singh How did you try to test the fix? Do you have an example repository with that on which I can take a look?

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[paldeep-singh]

Sorry @lukewalczak I did not see your last message. I will put up an example repo for you to have a look.

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[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.

[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!

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[paldeep-singh]

Hello, sorry its been a while since my last reply, my Github notifications have been acting all weird. Here is the repo as previously requested.

@dcalhoun Thanks for the heads up, but I should clarify that the issue I am facing is opposite to what you have described. I cannot dismiss shorter modals with voiceover on an iPad. The longer ones are dismissed just fine 🤔