Issue Summary

On the “Create new page | Emoji” page, the focus does not return to the element that triggered the content when the new content is closed.

Steps to Reproduce

1. Navigate to "Create" button present in the header section.
2. After activating "Create" blank page template will appear on the screen.
3. Navigate to the "Insert emoji" button element and activate that.
4. Observe that non-modal dialog has appeared on the screen.
5.  Using a screen reader or only keyboard, activate the "Add your own emoji" button.
6. Observe a non-modal dialog  appears.
7. Close the non-modal dialog  using an Esc key or activate the "back" button and try to navigate further.
8. Observe that the focus moves to the "Search emoji".

Screen recording

Screen Recording 2023-08-14 at 4.21.49 PM.mov

Actual Results

On closing the non-modal dialog, the programmatic focus does not return to the triggering element i.e "Add your own emoji". Instead, the focus is moved to the "Search emoji". This required screen reader users and keyboard-only users to tab pass the content on the page before they can interact with the content after the triggering element.

Expected Results

The programmatic focus of users should be set on the triggering element of the non-modal dialog as soon as the dialog is closed.

Set the keyboard focus to the triggering element of the non-modal dialog using the JavaScript .focus().

For information on creating accessible modal dialog refer https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog.html

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest