Issue Summary

The keyboard focus is not set onto the "Keyboard short cuts" modal dialog.

Steps to Reproduce

1. Open the "Home" page.
2. Navigate to the header section.
3. Using a keyboard or screen reader 'Tab' key, navigate to the "Help" button and activate it using Enter/Space.
4. Using arrow keys, navigate to the "Keyboard Shortcuts" button.
5. Activate it using Enter/Space > a modal appears.
6. Observe that the focus is not set onto the "Keyboard short cuts" modal dialog.

Screen Recording

Screen Recording 2025-01-20 at 10.23.43 AM.mov

Actual Results

The programmatic focus remains on the triggering element itself when the "Keyboard short cuts" dialog appears. On pressing the 'Tab' key, the keyboard focus goes on the first interactive element of the modal dialog. Even though modal dialog is visible at the center of the screen, modal dialog content is available at the end of the page for keyboard-only and screen reader users.

This required screen reader users and keyboard-only users to tab again before they can interact with the modal dialog.

Expected Results

The programmatic focus should be set on the first logical element of the dialog as soon as dialog appears.

Set the keyboard focus to the first logical element such as the "Keyboard short cuts" heading in the modal dialog in this case using the javascript.focus().

For information on creating accessible modal dialog refer !https://www.w3.org/favicon.ico!Modal Dialog Example 

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 131.0.6778.86 (Official Build) (arm64)
Firefox- Version 134.0 (64-bit) 
Safari- Version 18.1.1 (20619.2.8.11.12)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest