Issue Summary

When modal dialog is triggered, The focus moves inappropriately.

Steps to Reproduce

1. Open "Bitbucket" homepage.
2. Navigate onto and activate "Help" button present in the header section.
3. Navigate onto and activate "Keyboard shortcuts" button.
4. Observe that modal dialog gets displayed on the page.
5. Notice that the focus does not move onto the first interactive element present in modal.

Screen Recording

PROJ _ awesome-go - Bitbucket Server - Google Chrome 2025-03-05 12-46-57.mp4

Actual Results

When The "Keyboard shortcuts" modal dialog is triggered, The focus directly moves to the last interactive element i.e. "Account settings" link, Instead of moving to the first interactive element. As a result, keyboard and screen reader users will need to do additional TAB stop. 

Expected Results

Ensure that the keyboard focus moves at the beginning of the modal dialog content when the modal dialog gets displayed on the screen. Use javascript method element .focus(); method to set the force focus programmatically on the first interactive element i.e. "Close" button.

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOS: Sonoma 14.7
Chrome - Version 119.0.6045.105 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.6 (18615.3.12.11.2)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest