Assign user to group: Missing combobox implementation

Issue Summary

On the "Assign user to group" page, The roles and attributes are missing for multi-select combobox. 

Steps to Reproduce

1. Open the above mentioned page. 
2. Navigate to the main content area, Find "Add users" custom combobox and inspect the code.
3.  Observe that the role and attributes are missing.

Screenshot

Actual Result

When the user navigates to the "Add  users" combo box, the role of the Combobox is not announced to the screen reader user.

Even though the Listbox options are accessible for keyboard-only users, the same is not accessible for screen reader users.

Hence, the screen reader users would not be able to perform the action efficiently. 

Expected Result

Make sure that the combobox should be programmatically defined by providing appropriate role and attributes, so that the screen reader users can interact with it effectively.

To achieve this, 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.
• Specify the “aria-selected” attribute and set the value as “true“ when the option is selected. Make sure that the value should be updated on user interaction.
• Additionally, make sure the options available in combo boxes are also accessible for screen reader users. Make sure that the options that appear on expanding the input fields are coded directly after the <input> elements in the DOM. As well, use aria-activedescendant attribute on the <input> elements to determine the active option. This attribute uses the "id" of the active option.

For more information to implement the multi selectable combo box, Refer the following resources:  

https://react-select.com/home

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant

and

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

Code Snippet

<label for="addusers>Add users</label>
<input id="addusers" role="combobox" aria-expanded="false" aria-activedescendant="01" aria-controls="availableusers" aria-haspopup="listbox" aria-autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-label="Add users" 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="availableusers" role="listbox" aria-label="users">
<li id="01" role="option" aria-selected="True">Admin</li>
<li id="02" role="option" aria-selected="true">test practice</li>
<li id="03" role="option" aria-selected="false">Mkonthala</li>
(...)
</ul> 
  

Workaround

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

Environment

MacBook Pro (14-inch, 2021)
macOs Ventura 13.5
Chrome - Version 115.0.5790.114 (Official Build) (x86_64)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2023
NVDA- Version 2023.2
Voiceover - Version Latest