-
Bug
-
Resolution: Unresolved
-
Low (View bug fix roadmap)
-
None
-
9.12.2
-
9.12
-
Severity 3 - Minor
-
Issue Summary
The non-interactive elements such as “Versions“ and “Epic" <div> elements receive keyboard focus.
Steps to Reproduce
- Open the "Backlog" page.
- Using the Tab key, navigate through the "Version" and "Epics" buttons and activate them.
- Observe that the non-modal dialogs will appear.
- Observe that the mentioned instances receive keyboard focus.
- Note that these are just <div> elements.
- Inspect the code of the text and notice that the tabindex attribute is incorrectly specified.
Screenshot
Actual Results
The non-interactive <div> elements containing all the content of the non-modal dialog 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.
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.
Note that this attribute is only used on the custom components.
If those elements have any functionality associated with it, then make sure that there is a separate element with a role and an accessible name.
Code Example:
<div class="ghx-classification-header">...</div> ... <div class="ghx-classification-header">...</div>
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
- is resolved by
-
A11Y-118 You do not have permission to view this issue