Pop-ups, Overlays and Modals

Requirements

• Do not cause pop-ups or other windows to appear. Do not change the current window without informing the user.
• Programmatically set focus to modals/ overlays when opened.
• Provide a means to close overlays or modals via a ‘Close’ button.
• Do not forget to return focus to the original view from where you selected the modal to open. (See React Native setting focus) below.

Full Explanation

This activity is likely to cause the user confusion and may incur delays when navigating a particular journey. Content presented to look like a modal dialog should function appropriately as a modal dialog. Modal dialogs should remember the current focus before the dialog opens. They should set the focus to the start of the modal dialog on opening. They should keep the focus on the dialog while it is open. They should have sensible navigation within the dialog. Users who close the dialog should have the focus restored to its previous state, and it should be obvious how to close the dialog. Aria roles may also help create user-friendly modal dialogs. See WAI-ARIA 1.0 Authoring Practices – Modal dialogs for more information.

Note: Do not remove users' focus from a native mobile application if possible. Always keep the user within a native app, as the experience, layout and structure of a webpage may differ from that of the native application.