Add a comment : Listbox semantics are broken

Issue Summary

On the "Add a comment" page, The listbox-related semantics are malformed.

Steps to Reproduce

1. Navigate to the above-mentioned page.
2. Navigate to the "Add comment" link and activate it.
3. Navigate onto the "This comment will be viewable by all users" link and activate it.
4. Inspect the code of the listbox component.
5. Observe that the list box is not correctly programmatically determined.

Screenshot

Actual Results

1. There is a collapsible listbox that is not correctly programmatically determined. When screen reader users navigate onto the listbox component and try to select an option, none of the options could be selected. This is because the listbox semantics are malformed. Each option is inappropriately coded into a separate <ul> and <li> elements respectively with role="listbox" and 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">This comment is viewable 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">All users</li>
  <li id="opt2" role="option">Project role</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