Issue Summary

The “Active“, “Strategic initiative“, “Strategic goal“ and so on comboboxes are not accessible for keyboard and screen reader users. These comboboxes are not defined correctly.

Steps to Reproduce

1. Open any Jira align project
2. Navigate to the create button and activate it present in the header.
3. Activate the “Theme” button and observe that the modal appears.
4. Navigate through the modal using a screen reader or keyboard.
5. Observe that the comboboxes are not accessible for keyboard and screen reader users.

Screenshot

Screenshot

Screen Recording

Actual Results

The “Active“, “Strategic initiative“, “Strategic goal“ and so on comboboxes that are not correctly programmatically defined with appropriate roles and properties. It has the following issues:

The combobox is not correctly programmatically defined, which may confuse or mislead them about the functionality of the form field.

Due to this, comboboxes are not accessible for keyboard and screen reader users. Screen reader users can not select options from listbox.

Expected Results

Ensure that the combobox is programmatically defined by providing appropriate roles and attributes so that the screen reader users can interact with it effectively.

In the current implementation, there are native <select> elements are present in the DOM. However, these elements are hidden from all users using the CSS display:none and tabindex=”-1”.

Hence we would recommend you, remove tabindex=”-1” and display:none from <select> elements. Also, we would recommend hiding <input> and <ul> from all users using CSS display:none property.

Make the following changes:

Provide role="combobox" for <input> element containing the mentioned form control in the DOM.

Specify role="listbox" for <ul> element containing the combobox options, as well provide role="option" for <li> element containing each option.

Specify the “aria-expanded” attribute and set the value as “false“ when it is in the collapse state. Make sure that the value should be updated on user interaction.

The attributes "aria-autocomplete", "aria-haspopup", and "aria-controls" further define the exact behavior of the component. They are not strictly required for conformance. However, we strongly encourage you to use these attributes.

Additionally, make sure the options available in combo boxes are also accessible for screen reader users. Use aria-activedescendant attribute on the <input> elements to determine the active option. This attribute uses the "id" of the active option.

Code Snippet

<label for="a1">Active</label>
<input id="a1" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-controls="listbox1" aria-haspopup="listbox" aria-activedescendant="01" ...>
<ul role="listbox" id="listbox1" ...>
<li role="option" id="01" aria-selected="true" ...>Yes</li>
<li role="option" id="02" aria-selected="false" ...>No</li>
(...)
</ul>

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.1 (23H222)
Chrome - Version 131.0.6778.265 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 18.2
JAWS- Version 2024
NVDA- Version 2024
Voiceover - Version Latest