Issue Summary

The tabbing order of the "skip links" present in the non-modal dialog is inaccurate.

Steps to Reproduce

1. Open the "Scrum board" page.
2. Navigate to any issue present on the board and activate it.
3. Observe that the non-modal dialog will appear on the page.
4. Tab through the dialog and observe that the skip links receive keyboard focus at the end of the content available in the dialog.

Screen Recording

Screen Recording 2024-02-06 at 11.59.05 AM.mov

Screenshot

Actual Results

An illogical tabbing order is found on the page. The tabbing order does not follow the visual order of the elements. The interactive elements receive the keyboard focus in the following illogical order: 

1. "Close" button
2. "Summary" input field
3. "Main content" available in the non-modal dialog
4. Skip links such as "Deatials", "Description", "Comments", and so on.

This illogical tabbing order will create confusion for keyboard-only users and screen reader users.

Expected Results

The tabbing order of the interactive elements should be correct and logical for users when navigating using a Tab key with a keyboard.

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

1. "Close" button
2. "Summary" input field 
3. Skip links such as "Deatials", "Description", "Comments", and so on.
4. "Main content" available in the non-modal dialog

Move the content in the page source in the mentioned order to ensure that the content is available in the correct order. CSS can be used to maintain the presentation of the page.

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest