Issue Summary

On the “Components” page, when the user closes the "Edit component" modal dialog with the “Cancel” button or ESC key, the focus moves inappropriately to the top of the page.

Note: A similar issue has been observed on the header region of the page for the "Help us improve Jira" modal dialog. Please refer to screen recording 2.

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 "Components" link.
5. Navigate to the data table and activate the "Edit" button from the action column.
6. A modal dialog "Edit component" will appear.
7. Navigate to the “Cancel” button or use the ESC key to close the modal.
8. Observe focus moves inappropriately to the top of the page.

Screen recording 1

Screen Recording 2023-04-25 at 3.30.30 PM.mov

Screen recording 2

Screen Recording 2023-05-05 at 10.28.12 AM.mov

Actual Result

When the user closes the mentioned modal dialog with the “Cancel” button or ESC key, the focus moves incorrectly to the top of the page instead of the interactive element i.e. “Operations” button which triggers the modal dialog.

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

Expected Result

When the user dismisses the mentioned modal dialog with “Cancel” button or ESC key, the focus should be set to the element that triggered the modal dialog.

Place the content of the webpage in the correct sequence in the source code as it appears visually.

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.

Refer this link Modal Dialogs for accessible modal implementation and detailed information

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