optgroups invisible to screen reader

[RichardDavies]

Describe the bug
I have a Choices element created from a <select multiple> element which contains several <outgroup> elements. Choices correctly preserves the group labels when the list is presented visually, but I noticed that these groups are invisible to a screen reader (tested using NVDA on Windows 11 in Chrome and Firefox).

To Reproduce
Use the NVDA screen reader to navigate through the list items of the "Option groups" element on https://choices-js.github.io/Choices/

Expected behavior
When navigating through the list items of a native <select multiple> element, the screen reader will announce the group name when moving between items belonging to different groups. But with the Choices element, nothing is read and it's as if there were no groups at all.

Choices version and bundle

• Version: 11.1.0 (https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js)

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome 136.0.7 and Firefox 138.0.1
• NVDA version: 2024.4.2

Additional context
Looking at the HTML code Choices is using for its list items, I think this may be because the list elements are not actually children of their associated group element. Just like how the <options> are children of the <outgroup> in the native <select>, the HTML elements with role="treeitem" should be children of the element with role="group".

For more information about the ARIA group role, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/group_role. The first example is very similar to this use case and shows the proper nesting of elements.