Dropdown items should be marked up as list items

[Stephanie Leary]

Our dropdowns would be more accessible if we could use <ul> for the container and <li> for each list item, as demonstrated in the most recent Bootstrap versions' basic dropdown examples: https://getbootstrap.com/docs/5.3/components/dropdowns/#examples

This matters for screen reader users. Without list markup, the dropdown choices are read as a run-on sequence of buttons: "clickable, action dash one, clickable, another action" and so on. With proper list markup, the user gets a count of the items they're about to hear: "List, three items. Item one, clickable, action dash one. Item two, clickable, another action."

Having that extra context tells the user if they're about to be confronted with a very long list, which sighted users would know by glancing at the size of the dropdown. It also lets them use the screen reader's built-in list navigation keyboard shortcuts.

We are currently blocked from fixing this because inserting any HTML element in between the ngbDropdown and ngbDropdownItem directives breaks the keyboard up/down arrow navigation of list items, as noted here: https://github.com/ng-bootstrap/ng-bootstrap/issues/4156

When ng-bootstrap fixes their bug, we should mark up dropdowns as lists.