Issue Summary

On the "Group Administration" page, The roles and attributes are not provided for "Add user or group" combobox. As the combobox implementation is not programmatically determined for benefit of screen reader users. 

Steps to Reproduce

1. Navigate onto the above mentioned page. 
2. Navigate onto the "Add user or group" combobox and inspect the code.
3. Observe that role and attributes are missing. 

Screenshot

Actual Result

When the user navigates to the "Add  user or group" 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

When the screen reader users navigate to the "Add user or group" combo box.

1. Make sure that Combobox component should be programmatically determined. If possible, use a native `<select>` element. These have out-of-the-box accessibility. If this is not possible, create a Combobox with ARIA. Provide role=”combobox” for the <input> element containing mentioned combo boxe.
2.  Provide role="listbox" for the <input> element containing combo box options and also reference id of <label> element to the same <div> element using “aria-labelledby” attribute.
3. 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.
4. 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.
5. 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.
6. 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="adduser-group">Add user or a group</label>
<input id="adduser-group" role="combobox" aria-expanded="false" aria-activedescendant="01" aria-controls="availableusergroups" aria-haspopup="listbox" aria-autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-label="Add user or a group" 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="availableusergroups" role="listbox" aria-label="users and groups">
<li id="01" role="option" aria-selected="True">ax-administrator</li>
<li id="02" role="option" aria-selected="true">ax-jira</li>
<li id="03" role="option" aria-selected="false">Account Operators</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