Details
-
Bug
-
Resolution: Unresolved
-
High
-
None
-
9.12.2
-
9.12
-
Severity 3 - Minor
-
Description
Issue Summary
The links such as "All", "Comments", "Work Log" and so on present within "Activity" accordion are behaving as tabs with manual activation. This tabs are missing appropriate role and attributes.
Steps to Reproduce
- Open the “View Issue“ page.
- Navigate to "Activity" accordion present in the main content area and activate it.
- Activate mentioned links. Observe it is behaving as a tabs but not coded as such.
Screenshot
Actual Results
The mentioned links appears and functions like a tab/tabpanel interface but missing required ARIA role and attributes. As a result if interactive elements are missing required role and attributes then the functionality will not be exposed by screen reader software.
Expected Results
Fix this issue by using the following role and attributes:
- The element that serves as the container for the set of tabs should have role tablist.
- Each element(contained within the element with role tablist) that serves as a tab should have role as “tab”.
- Each element that contains the content panel for a tab has role tabpanel.
- Each element with role tab has the property aria-controls referring to its associated tabpanel element.
- The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
- Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
- If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.
- Set tabindex="-1" in the source code of inactive tabs. Ensure that these tabs have roving tabindex property.
For working implementation of tabs with manual activation please refer this link https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual
Workaround
Not Available.
Environment
MacBook Pro (14-inch, 2021)
macOs Sonoma 14.2.1
Chrome - Version 121.0.6167.85 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.2.1 (19617.1.17.11.12)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest