-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
The "Blocks" non-modal dialog is inappropriately nested within the <div> element which contains the role="button".
Steps to Reproduce
- Open the "Accessibility Assessment | Dependencies Report" page.
- Navigate to the mentioned instance.
- Inspect the code.
- Observe that the mentioned dialog is inappropriately nested within the <div> element having role="button".
Screenshot
Actual Results
The "Blocks" non-modal dialog is inappropriately nested within the <div> element that has role="button" and tabindex=”0” attributes. As a result, both these elements receive focus together when read with a screen reader virtual cursor. This might disadvantage the users of a screen reader. That the content of the non-modal is overridden may confuse or mislead them.
Expected Results
Elements must be nested as per the HTML specifications. As these are two separate interactive elements, we would recommend you to move the mentioned non-modal dialog out of the <div> element in the DOM.
Code Snippet
<div class="_3Jrhp" role="button" tabindex="0" style="width: 150px; height: 0px; color: rgb(165, 173, 186);"><div class="_2FBxG" title="blocks (about -1 month)" style="color: rgb(222, 53, 11);">blocks (about -1 month)</div> </div> <div class="sc-hXRMBi gxEgje" role="inlineDialogContent" style="position: fixed; max-height: initial; will-change: transform; top: 0px; left: 0px;"> (....) <div class="_3ufJU">blocks</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
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|