Issue Summary

On the "Accessibility assessment | Dependencies report" page, The "Group by:" listbox is not programmatically determined.

Steps to Reproduce

1. Navigate to the above-mentioned page.
2. Navigate onto the mentioned instance and inspect its code.
3. Observe that the list box is not correctly programmatically determined.

Screenshot

Actual Results

There is a collapsible listbox that is not correctly programmatically determined. The parent element containing the options do not use role="listbox". The child options do not use role="option". As well, the selected option does not use aria-selected attribute.

As a result, users of a screen reader might not be able to interact with the listbox efficiently, That the listbox semantics are broken might confuse or mislead them.

Expected Results 

Make sure that listbox components are programmatically determined. In this scenario, create a proper listbox with ARIA. Use a native or custom <button> for the element that expands and collapses the listbox. Make sure that the accessible name of the button contains the external label and internal value. This can be done using aria-labelledby and referencing both values. As well, on the trigger button, use aria-expanded to differentiate when the listbox is expanded and collapsed. On the listbox, use role="listbox". Where possible, expand a list container such as <ul>. Use aria-activedescendant to programmatically determine the active option. This attribute uses the id of the active option. On the options, use role="option". Where possible, expand <li>. Use aria-selected to differentiate of the active and inactive options. As well, make sure to update the aria-selected attribute between true and false when the user adjusts the options. Make sure to update the aria-activedescendant attribute with the id of the active option when users adjust the listbox.

For more information, you can refer the listbox example on WAI ARIA Practices - Collapsible Listbox "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"

Code Snippet

<span id="exLabel">Group by:</span>
<button id="intLabel" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="exLabel intLabel">Internal Value</button>
<ul role="listbox" aria-labelledby="exLabel" aria-activedescendant="opt1">
  <li id="opt1" role="option" aria-selected="true">None</li>
  <li id="opt2" role="option">Team</li>
  ...
</ul>

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 Ventura 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest