Dropdown needs accessibility improvements

The Dropdown component (I only tried the first one on the code page) has several accessibility problems:

1. Having a label that disappears is not considered very accessible (similar to placeholder in text input not being considered very accessible). I have seen devs try to give this a label with <label> (which doesn’t work here) or hook up a span with aria-labelledby. Fixing this “disappearing label” problem may involve a slight redesign. 😃
2. Typing Esc closes the list, but it also closes the side nav, so the key handler for Esc needs to stop propagation and maybe also prevent default.
3. The markup is confusing to screen readers:
   • it thinks this is a “list with 2 items”: the bx–dropdown-text item and the item containing the dropdown list. It may help to to change the outer <ul> and the 2 <li> into divs (or give them role=“presentation”).
   • it doesn’t know that the dropdown list drops down, so it doesn’t tell the user that there’s a dropdown available
   • it reads all of the items in the dropdown list right away, even though they are not showing

Some aria may be needed to make this more understandable (maybe aria-haspopup=“listbox” and aria-expanded=“true/false”). Please read the “menu button” pattern and the “combobox” pattern in the ARIA Authoring Practices Guide to see what makes the most sense. They are both similar to what you are trying to achieve, I think.

[elizabethsjudd]

I’m planning on breaking this issue up in to multiple PRs just to keep the size of the changes easier for reviewing. The first PR will have HTML/styles (with minor JS changes just to keep it “working”) and the second PR will contain more robust JS changes for complete a11y updates.

[elizabethsjudd]

I combined the two PRs because the JavaScript wasn’t as big of updates as anticipated. This PR should close this issue as the first 2 items were already fixed so I focused on the screen reader experience updates.