Accessibility Assessment | Dependencies Report : Combobox is not programmatically defined

Issue Summary

On the “Accessibility Assessment | Dependencies Report” page, the “Filter by issue” combobox in the main content, is not programmatically declared.

Steps to Reproduce

1. Open the "Accessibility Assessment | Dependencies Report" page.
2. Navigate to the mentioned instance.
3. Inspect the code and observe that the combobox is not programmatically defined.

Screenshot

Actual Results

There is a combobox that is not correctly programmatically defined with appropriate roles and properties. The <input > element of the “Filter by issue” combobox does not use role="combobox" or aria-activedescendant. As well, the child listbox does not use role="listbox", role="option" and aria-selected attributes. Additionally, the options such as "SCRUM work", "SCRUM Missing list markup", and so on, that are available by activating the mentioned combobox are inappropriately announced as "Undefined"

This may particularly disadvantage the users of a screen reader. That the combobox is not correctly programmatically defined may confuse or mislead them about the functionality of the form fields.

Expected Results

Make sure that the combobox components are programmatically determined. In this scenario, we would recommend you to create a combobox with appropriate ARIA roles and properties. On the combobox, use role="combobox". Where possible, expand a native <input>. Use aria-expanded to differentiate when the listbox is expanded and collapsed. As well, use aria-activedescendant to programmatically determine the active option. This attribute uses the id of the active option. On the listbox, use role="listbox". Where possible, expand a list container such as <ul>. On the options, use role="option". Where possible, expand <li>. As well, use aria-selected to differentiate between the active and inactive options. For more information, you can refer Combobox Pattern 

Code Snippet

<span id="one" class="_20bQD">Filter by issue:</span>
(...)
<input aria-labelledby="one" autocapitalize="none" role="combobox" aria-activedescendant="01" aria-autocomplete="list" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" autocorrect="off" id="react-select-138-input" spellcheck="false" tabindex="0" type="text" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
<ul id="results" role="listbox" aria-label="Tags list" class="css-1ljkvdv">
(...)
<li id="01" role="option" aria-selected="true" class="_2E0pu">
(...)
<div class="vXGD9 _2v7GN">SCRUM-1 Heading Missing</div>
</li>
(...)
</ul>
 

Workaround

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

Environment

MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest