Issue Summary

On the "audit Log" page, The roles and attributes are not provided for "Retention period" 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 to the main content area, Find "Configure" button and activate it.
3. Observe the appearance of modal dialog.
4.  Navigate to "Retention period" combobox and inspect the code.
5. Observe that role and attributes are missing.

Screenshot

Actual Result

When the user navigates to the "Retention period" 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 role and attributes should be programmatically defined for the mentioned combo box, as well the options in the combobox should be accessible for screen reader users, 

To achieve this, Make the following changes:

• Specify role="combobox" for <input> element containing the combobox in the DOM.
• Define the “aria-expanded” attribute and set the value as “false“ when it is in the collapsed state. Make sure that the value should be updated on user interaction.
• Provide role="listbox" for <ul> element containing the combobox options. additionally, define role="option" for <li> element containing the each option.
• 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 "aria-activedescendant" attribute on the <input> element to determine the active option. This attribute uses the "id" of the active option.

For more information to implement select-only combobox visit:

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

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

Code Snippet

<label for="x">retention period</label>
<input id="x" role="combobox" aria-expanded="false" aria-activedescendant="01" aria-controls="availableperiods"aria-haspopup="listbox" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-label="retention period" ...>
<ul id="availableperiods" role="listbox" aria-label="available retention periods">
<li id="01" role="option">3 months</li>
<li id="02" role="option" aria-selected="true">6 months</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