Chosen show/hide arrow element is not accessible

[jenlampton]

The chosen module adds a <div> containing only a <b> tag to place the arrow to the right of the search box. The arrow is added into that box with a css pseudo-selector. This is not accessible.

This element should really be a <button> since it is used to toggle open/closed the list of selection items.

Problem markup:
<div><b></b></div>

Recommended alternative:
<div><b><button aria-label="Show options" class="visually-hidden focusable"></button></b></div>
<div><b><button aria-label="Hide options" class="visually-hidden focusable"></button></b></div>
When clicked, the aria-label should be changed to show the action the button will trigger.

Steps to reproduce

Working demo that shows the problem

1. Visit any page with the chosen element
2. Inspect the up/down arrow to the right of the search box
3. Confirm all you see is a <div> containing only a <b> tag (empty tags)

Expected behavior

This element should really be a <button> since it is used to toggle open/closed the list of selection items.

Actual behavior

This element is not "visible" to a screen reader

Environment

• Chosen Version: latest

• jQuery or Prototype Version: n/a

• Browser and Version: n/a

• OS and Version: n/a

Additional information

Our site is getting warnings from accessibility scans due to this empty element. We would love to get those cleaned up and provide an improvement to everyone using the chosen library.