Issue Summary

The “Search ( Type ’/’ ) " combobox is not programmatically defined. 

Steps to Reproduce

1. Open the "Home" page.
2. Navigate to the header section.
3. Navigate onto the "Search ..." control and inspect it's code.
4. Observe that the role and attributes are missing for the editable search combobox control.

Screenshot

Actual Result

There is a combobox that is not programmatically defined with appropriate roles and properties. The <input> element of the “Search” combobox does not use role="combobox" and aria-activedescendant. As well, the child listbox options do not use role="option” attribute and the parent container of the options does not use role=”listbox” attribute.

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

Expected Result

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 <input> element, use role=”combobox” attribute (remove role="searchbox" from the input element and specify type="search" attribute). 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 <div>. On the options, use role="option". Where possible, expand <li>.

Make sure that each <ul> element uses role="group" and aria-labelledby attribute with a unique value. Ensure that the “aria-labelledby” attribute’s value is passed to the ‘id’ of the group label text such as “Issues” and “Projects” respectively.

For more information on implementing Combobox components, refer:

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/

https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/

Code Snippet

<label for="A1">Search ...</label>
<input id="A1" type="search" role="combobox" aria-activedescendant="01" aria-autocomplete="none" aria-expanded="true" aria-controls="results" aria-haspopup="listbox" ...>
 <div id="results" role="listbox" aria-label="Results" ...>
 <span id="a1">Issues</span>
   <ul role="group" aria-labelledby="a1">
   <li id="01" role="option" aria-selected="true">
<a ....>
<span data-v-9adaa490="" data-id="JDV-1" class="quick-search-item-subtitle">JDV-1</span>
...
</a>
</li>
<li id="02" role="option" ...>
<a ...>
<span data-v-9adaa490="" data-id="JDV-2" class="quick-search-item-subtitle">JDV-2</span>
...
</a>
</li>
...
</ul>
<span id="A2">Projects</span>
<ul role="group" aria-labelledby="A2">
<li id="10" role="option" ..>
<a ...>
<span data-v-9adaa490="" aria-tooltip="Jira DC VPAT 2025 (JDV)" class="quick-search-item-title">Jira DC VPAT 2025 (JDV)</span>
...
</a>
</li>
<li id="11" role="option" ...>
<a ...>
<span data-v-9adaa490="" aria-tooltip="QA folks (QA)" class="quick-search-item-title">QA folks (QA)</span>
...
</a>
</li>
...
</ul>
...
</div> 

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 SEQUOIA 15.2
Chrome - Version 132.0.6834.84 (Official Build) (64-bit)
Firefox- Version 128.6.0esr (64-bit)
Safari- Version - 18.2 (206220.1.16.11.8)
JAWS- Version 2023
NVDA- Version 2023.2
Voiceover - Version Latest