Issue Summary

The "Viewable by" combobox is inaccessible for screen reader users.

Steps to Reproduce

1. Open the Jira Server page.
2. Navigate to the header, activate "Projects" and open a project.
3. Navigate to the header, activate "Issues" and open an issue.
4. Navigate to main content area and activate "Add comment" button.
5. Using a screen reader and keyboard, navigate to the mentioned combobox.
6. Observe that it’s not programmatically defined.

Screen Recording

Screen Recording Combobox.mkv

Actual Results

When screen reader users activate the "Add comment" button and interact with the "Viewable by" combobox, the combobox is not identified programmatically, and they are unable to activate it or interact with its options.

This occurs because the combobox is not programmatically defined using the appropriate ARIA role and properties.

Additionally, the native <select> combobox is present in the DOM, but it is hidden from users via the style="display: none;" property. As a result, screen reader users are unable to access the combobox.

Expected Results

The combobox component should be programmatically determined.

In this scenario, since there is already a hidden native dropdown in the DOM, we recommend removing the “display” CSS property from the <select> element. Additionally, hide the custom dropdown and its options from the user. The native dropdown has out-of-the-box accessibility.

If this is not at all possible, create a proper combobox with ARIA.
On the <div> element, use role="combobox". Make sure that the <div> element is explicitly associated wit it’s respective visual label using “aria-labelledby” and
“id” attributes. As well, use {{aria-expanded }}attribute to programmatically define an expandable state to the combobox. Use aria-activedescendant attribute
to determine the active option. This attribute uses the "id" of the active option.
On the parent <ul> containing the list of options, use role="listbox". On the child <li> elements, use role="option". As well, use aria-selected attribute
to programmatically determine the selected option. Make sure that this combobox is operable with a keyboard as well.
For more information about a combobox pattern, refer:
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

Code Snippet:

<label for="commentLevel">Viewable by</label>
<select name="commentLevel" id="commentLevel" data-enable-default="true" data-apply-default="true" multiple>
  <option value="">All Users</option>
  <optgroup label="Groups">
    <option value="group:atlassian">atlassian</option>
    <option value="group:atlassian-staff">atlassian-staff</option>
    <option value="group:jira-users">jira-users</option>
    <option value="group:ssam-managed-jac-dl-atlassians">ssam-managed-jac-dl-atlassians</option>
  </optgroup>
</select>

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 Sonoma 14.7
Operations - Windows11
Chrome - Version 130.0.6723.70 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 131.0.3 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4
VoiceOver - Version Latest