Issue Summary

The non-interactive element such as the "Background container(<div> element)" receives keyboard focus. 

Steps to Reproduce

1. Open the "Accessibility Assessment | Dependencies Report" page.
2. Using a keyboard, navigate to the mentioned instance.
3. Observe that the non-interactive element is receiving keyboard support.

Screenshot

Screen Recording

Screen Recording 2024-02-05 at 9.26.25 AM.mov

Actual Results

The non-interactive <div> element containing the “SCRUM-5", "SCRUM-1", and so on sections, present in the main content, receive keyboard focus. This is because the <div> elements inappropriately use 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.

As a result, keyboard-only users have to tab pass an additional tab stop while navigating between the page content.

Expected Results

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

Code Snippet

<div  class="WBL7C" style="height: calc(-198px + 100vh); cursor: grab;">
<div class="Pf7MT" data-testid="portfolio-3-portfolio.app-simple-plans.main.tabs.dependencies.graph" style="width: 2590px; height: 383px; position: relative; transform: translate3d(0px, 0px, 0px) scale(1);">
(....)
</div> 
</div> 

Workaround

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

Environment

MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest