-
Bug
-
Resolution: Duplicate
-
Low
-
None
-
4.20.0, 5.3.1
-
Severity 3 - Minor
-
Issue Summary
Certain ARIA roles must be contained by particular parents.
Steps to Reproduce
- In the header section for JSM, navigate to the Insights link and activate any project inside it such as ABC.
- Navigate to the Object types such as business service, Hardware, etc, and further select the further objects such as Servers in hardware.
- In the main content area for the available objects activate the Name of the object such as " exchange.prod.app1", etc.
- In the Assets page navigate to the Assets tab looking for links like Attributes, Connected tickets, Comments and History keeping the screen reader on.
Actual Results
In the Asset view page, the role is defined inappropriately to some of the elements. The links such as Attributes, Connected tickets, Comments, and History are structured into a tab-looking structure but are not defined with appropriate labels and roles. Hence this makes it the assistive tech user difficult to understand the structure of the components.
Expected Results
Define the role and attributes appropriate to the component.
Implement the following component in the following manner
<div role="tablist" aria-labelledby="tablist-1" class="manual"> <buttonid="tab-1"type="button"role="tab"aria-selected="true"aria-controls="tabpanel-1"> <spanclass="focus"> Attributes </span> </button> <button id="tab-2"type="button"role="tab"aria-selected="false"aria-controls="tabpanel-2"tabindex="-1"> <spanclass="focus"> Connected tickets </span> </button> (...) </div> <div id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1"> <p> <olclass="iamItemListContainer__list"> (...) </ol> </p> </div> <div id="tabpanel-2" role="tabpanel" aria-labelledby="tab-2" class="is-hidden"> <p> class="iamWidgetEmptyState">This object has no connected ticket. </p> (...) </div>
- Remove the links such as Attributes, Connected tickets, Comments, and History from the <ol> and <li> strucutre.
- Provide the roles of tablist, tab and tabpanel accordingly.
- Code the Attributes, Connected tickets, Comments, and History in a button element or provide a role="button" to the <a> element.
Refer to the following link for tab implementation:
https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html
Screenshot
Workaround
No workaround is available.
Bug Ref: 746551
Bulldog Ref:
- duplicates
-
-
- Closed
-
-
-
- Closed
-
-
-
- Closed
-
-
-
- Closed
-
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSDSERVER-12089] Asset View : Certain ARIA roles must be contained by particular parents
| Labels | Original: 4.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-high-priority ax-jsm ax-macos-safari ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical ax-windows-chrome ax-windows-firefox | New: 4.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-critical ax-critical-priority ax-dev-ready ax-high-priority ax-jsm ax-macos-safari ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical ax-windows-chrome ax-windows-firefox |
| Labels | Original: 4.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-high-priority ax-jsm ax-macos-safari ax-platform-dc ax-qa-prioritised ax-vpat-critical ax-windows-chrome ax-windows-firefox | New: 4.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-high-priority ax-jsm ax-macos-safari ax-platform-dc ax-qa ax-qa-prioritised ax-vpat-critical ax-windows-chrome ax-windows-firefox |
| Resolution | New: Duplicate [ 3 ] | |
| Status | Original: Ready for Development [ 10049 ] | New: Closed [ 6 ] |
| Link |
New:
This issue duplicates |
| Story Points | New: 1 |
| Rank | New: Ranked higher |
| Sprint | New: JSM Sprint 2 [ 7016 ] |
| Assignee | New: Oleksandr Stoliar [ a955dc6cda19 ] |
| Priority | Original: High [ 2 ] | New: Low [ 4 ] |
| Status | Original: Needs Triage [ 10030 ] | New: Ready for Development [ 10049 ] |