Details
-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.7.0
-
9.07
-
Severity 3 - Minor
-
Description
Issue Summary
Table mark-up used to code the legend elements of graph section inappropriately.
Steps to Reproduce
- Navigate to the "Projects" dropdown and activate it.
- Select the "Scrum" project and activate it.
- Navigate to the "Side navigation".
- Navigate to the "Reports" link and activate it.
- Navigate to the "Switch Report" dropdown.
- Select the report "Burndown Chart".
- Observe that "Burndown Chart" page has been appeared on the screen.
- Using screen reader navigate to the graph section.
- Observe that table is announcing for the legend element.
Screenshot
Actual Results
The legends of the graph such as "Guideline", "Remaining Values", "Non-Working Days" and "Show Non-Working Days" are marked up using <table>, <tr>, <th>, and so on elements for presentation purpose. As a result, screen reader users will get wrong information about the content structure.
Expected Results
Provide role="presentation" to the <table> tag of the layout table.
Code Snippet
<table role="presentation"> <tbody> <tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid #999;overflow:hidden"></div></div></td><td class="legendLabel">Guideline</td></tr> (...) </table>
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.3.1
Chrome - Version 112.0.5615.49 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 16.4 (18615.1.26.11.23)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest