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.

[JJJ]

I see what you mean.

After having copilot noodle on this a bit, I realized that this issue might have been mitigated in a previous commit that added role="button" to the primary anchor itself.

Also, that if we nested a button inside of an a we would unintentionally be making accessibility worse and the DOM more confusing to parse.

Knowing that now, I'm open to other ideas!

[JJJ]

if we nested a button inside of an a we would unintentionally be making accessibility worse and the DOM more confusing to parse.

This already happens when allow_single_deselect: true so maybe it's not a blocker?

[JJJ]

Bumping to 3.1.0 while I think about this more.