Issue Summary

On Issue search page, the elements such "Affected versions", "Assignee", "Components" etc present under the "Order by" filter popup are marked as checkbox elements incorrectly.

Bug Ref: 739619

Steps to Reproduce

1. Navigate to Jira dashboard page.
2. Navigate to "Issues" menu in header section & activate "Search for issues" link.
3. Navigate to "Order by" link inside main content & activate it.

Actual Results

The "Order by" element is marked as link incorrectly instead of a button element.

The elements such "Affected versions", "Assignee", "Components" etc present under the "Order by" filter popup are marked as checkbox elements incorrectly. User can only select one option from the list of options.

While navigating with screen reader, when user navigate inside "order by" combobox, the options such as "Affected Versions", "Assignee", etc are not announced by screen reader when user presses up/down arrow key to navigate.

The option elements are not direct children of listbox element because the role="listbox" is provided to the <div> element incorrectly.

Expected Results

• The "Order by" element should be marked as native HTML <button> element instead of link.
• Remove the <label> & <input> elements from the source code of "Affected versions", "Assignee", "Components", etc elements.
• Mark the elements  "Affected versions", "Assignee", "Components", etc directly inside <li> elements.
• Remove the role="listbox" from <div> element & provide it to the <ul> element.

Code snippet

<ul id="" class="aui-list-section aui-last" aria-label="" role="listbox">
   <li class="check-list-item" role="option" id="versions-67">Affects Version/s</li>
   <li class="check-list-item" role="option" id="assignee-67">Assignee</li>
   (...)
</ul>

Screenshot

Screen Recording

Screen Recording 2022-03-16 at 5.31.02 PM.mov

Workaround

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