-
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSWSERVER-25574] Accessibility Assessment | Dependencies Report : Elements are nested inappropriately
| Labels | Original: 4.1.2 Level-A accessibility ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentdependenciesreport ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg10 ax-qa wcag21 | New: 4.1.2 Level-A accessibility ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentdependenciesreport ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg10 ax-qa ril wcag21 |
| Remote Link | New: This issue links to "Internal ticket (Web Link)" [ 963657 ] |
| Priority | Original: High [ 2 ] | New: Medium [ 3 ] |
| Introduced in Version | Original: 9.12 | New: 8.2 |
| Affects Version/s | New: 8.20.30 [ 106364 ] | |
| Affects Version/s | New: 9.4.17 [ 106909 ] |
| Labels | Original: 4.1.2 Level-A accessibility ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentdependenciesreport ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg10 ax-qa wcag21 | New: 4.1.2 Level-A accessibility ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentdependenciesreport ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg10 ax-qa wcag21 |
| Component/s | Original: Accessibility [ 62491 ] | |
| Component/s | Original: (Advanced Roadmaps) Other [ 73719 ] | |
| Component/s | New: (Advanced Roadmaps) Accessibility [ 74392 ] |
| Status | Original: Needs Triage [ 10030 ] | New: Ready for Development [ 10049 ] |
| Labels | Original: 4.1.2 Level-A accessibility ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentdependenciesreport ax-jiradc-vpat-pg10 ax-qa wcag21 | New: 4.1.2 Level-A accessibility ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentdependenciesreport ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg10 ax-qa wcag21 |
| Description |
Original:
h3. Issue Summary
The "Blocks" non-modal dialog is inappropriately nested within the <div> element which contains the role="button". h3. 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". h3. Screenshot !Screenshot 2024-02-05 at 2.45.47 PM.png|width=575,height=331! h3. 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 two interactive elements are nested together may confuse or mislead them. h3. 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 interactive elements and content out of the <div> element in the DOM. h3. Code Snippet {code:java} <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> {code} h3. Workaround Currently, there is no known workaround for this behavior. A workaround will be added here when available h3. 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 |
New:
h3. Issue Summary
The "Blocks" non-modal dialog is inappropriately nested within the <div> element which contains the role="button". h3. 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". h3. Screenshot !Screenshot 2024-02-05 at 2.45.47 PM.png|width=575,height=331! h3. 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. h3. 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. h3. Code Snippet {code:java} <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> {code} h3. Workaround Currently, there is no known workaround for this behavior. A workaround will be added here when available h3. 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 |
| Component/s | New: (Advanced Roadmaps) Other [ 73719 ] |