Project Settings | Details : Keyboard focus not set onto modal dialog

Issue Summary

When the user activates the "select image" link, a modal dialog "Click to edit this avatar" appears on the page and the focus is moving onto background content and the modal dialog content is being available at the end of the page.

Steps to Reproduce

1. Navigate to the “Settings” menu pop-up link and activate it.
2. Activate the "Projects" link.
3. Activate any projects present in the data table.
4. Navigate to the side navigation and activate the "Details" link.
5. Activate the "select image" link in the form.
6. Observe a dialog appears.
7. Try to navigate through the dialog content.
8.  Observe that focus is not set onto the dialog.

Screen Recording

Screen Recording 2023-04-21 at 12.50.14 PM.mov

Actual Result

When the user activates the "Click to edit this avatar"modal dialog the focus is staying on interactive elements that trigger the modal dialog i.e "select image" link instead of moving to the first interactive element of dialog. In short, users have to press the TAB key in order to move to focus into this modal dialog.

As a result, keyboard-only and screen reader users need to pass the extra content to reach the desired element.

Expected Result

 When the user activates the mentioned modal dialog the focus should be set to the first interactive elements of the modal dialog appropriately.

Use the javascript .focus() method to achieve this behaviour.

The reading order in a screen reader is based on the order of the HTML or XHTML elements in the Document Object Model, as it is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. The focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.

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 behaviour. A workaround will be added here when available

Environment

MacBook Pro (14-inch, 2021)
macOs Ventura  13.2.1
Chrome - Version 110.0.5481.100 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.2 (18614.3.7.1.5)
JAWS- Version 2021
NVDA- Version 2021.2
Voiceover - Version Latest