Side Navigation : Non-interactive element receives keyboard focus

Issue Summary

 The non-interactive element is receiving focus due to tabindex=0 attribute associated with it.

Similarly, the Non-interactive element is receiving focus in "Edit" modal dialog due to Empty button element refer screenshot 2.

Steps to Reproduce

1. Navigate to left navigation menu using tab key.
2. Observe non interactive element is receiving focus.

Actual Result

The non-interactive <div> element containing the "Project shortcut" text receives keyboard focus. This is because the <div> element inappropriately uses tabindex="0". This is illogical as only interactive elements should receive focus. This may particularly disadvantage keyboard users. The illogical focus order may make the page difficult to understand and interact with.

Expected Result

Non-interactive elements must not receive keyboard focus. In this case, remove the tabindex="0" attribute from the <div> element in the DOM.

Screenshot 1

Screenshot 2023-05-03 at 2.03.41 PM.png

Screenshot 2

Code snippet

<div id="project-shortcuts-list-align-container" class="aui-sidebar-group jira-sidebar-group-with-divider project-shortcuts-group project-shortcuts-group_empty"  
(...)
</div>

Workaround

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

Environment

MacBook Pro (13-inch, 2020)
macOs Ventura  13.3.1
Chrome - Version 108.0.5359.124 (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