Issue Summary

The "All", "Comments", "History" and "Work log" elements are inappropriately defined as radio buttons instead of tabs.

Steps to Reproduce

1. Open the Jira cloud homepage.
2. Select any space from the side navigation. 
3. Navigate to and activate any issue. 
4. Navigate onto the activity section.
5. Using a screen reader, navigate with down arrow (JAWS/NVDA) or VO+Right/Left arrow (VoiceOver).
6. Inspect the code for the mentioned interactive elements.
7. Observe that the interactive elements have an inappropriate role.

Screenshot

Actual Results

The "All", "Comments", "History" and "Work log" elements are inappropriately defined as radio buttons instead of tab structure.

As a result, screen reader are communicated with inappropriate role information which may lead to confusion.

Expected Results

Interactive elements must use an appropriate role that correctly reflects their functionality.

In this scenario, the "All", "Comments", "History", and "Work log" elements function as tabs, so they must be identified with the appropriate tab role. This ensures that screen readers accurately announce the role, selected state, and association with the corresponding tab panel to the users.

Apply the following changes:

• Remove the <fieldset> elements and replace it with <div> elements and also remove role="radio", "aria-checked" attributes from the <button> element of the source code.
• Set the role="tablist" for the <div> tag containing the elements that behaves as a tab.
• Specify 'id' attribute for the container of visible text that determines the name of the tablist. Reference the value of the 'id' attribute correctly via 'aria-labelledby' attribute of tablist.
• Set the role="tab" for the <button> tags used for displaying "All", "Comments", "History" and "Work log" controls. In addition, specify the ARIA attributes for tabs, such as "aria-controls" and "aria-selected". (The value of the aria-selected attribute needs to change on the basis of currently active tab.)
• Set aria-selected="true" for the active tab.
• Specify an 'id' attribute for the <div> tags used to display the content of respective tab. Reference the value of the 'id' attribute correctly via 'aria-controls' attribute of each tab.
• Specify an 'id' attribute for the <button> tags used to display each tab. Reference the value of the 'id' attribute correctly via 'aria-labelledby' attribute of each tab panel.
• Set the role="tabpanel" for the <div> tags displaying the contents associated with tabs.
• Provide a tabindex="0" attribute to the container of the currently active tab panel and tabindex="-1" to the remaining inactive tab panels.

More information can be found at "Example of Tabs with Manual Activation".

Code snippet

<span id="activity-tabs-label" class="sr-only">Show</span>
<div role="tablist" aria-labelledby="activity-tabs-label" ...>
<button id="tab-all" type="button" role="tab" aria-selected="false" aria-controls="panel-all" ...>
(...)
</button>
(...)
<div id="panel-all" role="tabpanel" aria-labelledby="tab-all" tabindex="-1" hidden>
(...)
</div>
(...)
</div>

Note: This code example is intended only as a general illustration of how to address the violation and should not be considered a complete or production-ready solution. If you have any questions, please attach this ticket to a #help-accessibility request.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2021)
macOS - Tahoe 26.5.1
Windows - 11
Chrome - Version 151.0.7922.108 (Official Build) (arm64)
Safari - Version 26.2 (21623.1.14.11.9)
JAWS- Version 2026
NVDA- Version 2026.1.1
Voiceover - Version Latest