Search Result selection (select any of the options from the search results) : Combobox: Combobox is missing appropriate roles and/or attributes

Issue Description

Missing role combo box for "All Actors" input field, as a result, screen reader users will find it difficult to understand the functionality of the input field.

Steps to Reproduce

1. Navigate to the following link: https://instenv-19536-ipiz.instenv.internal.atlassian.com/secure/insight/assets/IOPITSM-139?v=3
2. Using the TAB key, navigate to the tabs such as attributes, connected tickets etc. and select "HISTORY".
3. With the 'history' tab selected, navigate to the "ALL ACTORS'  combo box.
4. With the screen reader on, the role of combobox is missing can be observed.

Screen recording

9442BAFA-113A-408E-87F9-4AC220F9AE52_2_0_a.mov

Screenshot

Actual Behaviour

When users navigate to "ALL ACTORS" the input field role as combo box is not conveyed by the screen reader. As a result, the screen reader user will find it difficult to understand the purpose of the input field. When an appropriate role is announced for screen reader users, they can perform the associated functionality more efficiently.

Expected Result

When users navigate to "ALL ACTORS" input field, role combo box should be announced by the screen reader. In order to implement the same effectively, make sure to provide role="combobox".

Refer to the following snippet for Combobox implementation:

<div class="ruiSelect__input" style="display: inline-block;">
<input autocapitalize="none" role="combobox" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
<div style="...">
</div>
</div>

Workaround

Not available

Bug Ref: 747995

Bulldog Ref: JSMDC-13210