Improve accessibility of the interests select box

[WilHall]

Fixes #724.

Background

Accessible custom selects are hard to come by. webaxe has a good list of accessible options but none of them provide the multi-select tag input we have today for interests.

The jQuery plugin that we use for the interests select, selectize.js has poor accessibility for keyboard navigation and screen readers (see discussions selectize/selectize.js/issues/798 selectize/selectize.js/issues/349) and on top of that, maintenance on the library is lacking. SLMNBJ/selectize-plugin-a11y makes some improvements to this, but doesn't really improve the experience for the mode of selectize we are using (the tag input).

Selectize has a unique API, so while there is no drop-in replacement, the closest is select2 which unfortunately also has poor accessibility (see this open issue: select2/select2/issues/3744 and the discussion: wpaccessibility/select2-a11y/issues/1). There is a fork of select2 (woocommerce/selectWoo) which is not perfect (see this issue: woocommerce/woocommerce/issues/16003) but is nonetheless a better experience.

This PR

In this PR, I focused on two things:

• The minimal changes to replace selectize with selectWoo
• Changes to the preview of who is subscribed to the selected interests to make it more accessible

I think these changes are a step in the right direction because:

• It maintains an identical visual user experience compared to selectize
• It improves the accessibility for keyboard navigation and screen readers, even though it's not perfect
• selectWoo is a fork of select2, so it's a drop-in replacement; there is an active effort to make select2 more accessible, and it would be painless to switch to it from selectWoo if/when that happens

Alternatives

• I considered just integrating SLMNBJ/selectize-plugin-a11y which was a much smaller change, but I didn't feel like the benefit was there, given that it was only a minor improvement and selectize has not been maintained for quite some time
• A possible replacement option is combobo which has a great screen reader experience and is functionally the same, though it has a very different visual experience. It also has a very custom markup it requires, making it much less straightforward to integrate. If we don't mind changing the experience, though, this may be a good long-term option.

Testing

You can test using Voiceover on the selectWoo demo compared to the default select2 demo.

The below GIFs demonstrate the improvements to the preview of who is subscribed to the selected interests.

Navigating with TAB

Navigating with VO + → / VO + ←

[ericwbailey]

Sorry it's taken me a bit to get to this, @WilHall. Would you like to pair on it next Friday? The code itself looks good at first, but I'd love to check it with NVDA.

[WilHall]

@ericwbailey Yes definitely! That would be very helpful; if we have time, I think it would be worthwhile going over some of the other combobox options as well to see if we want to pivot our strategy there -- now that I have a better idea of how this area of code works I'm hoping the switch to different libraries won't be too painful.

[germsvel]

@ericwbailey do you think this PR is something we can recover or is this too stale and we should close it? I see it has a few conflicts that need to be resolved, and I could try to resolve them, but I'm not sure how close to the finish line this was. Is it worth putting in the effort to keep it going or should we close it?

[ericwbailey]

@germsvel I am unsure how close it was. I have a lot of trust in Wil's work, but it's been awhile. Maybe we can pair on it?

[WilHall]

👋

Most of the work here was the migration from selectize.js to selectWoo.

Given that it's pretty stale with conflicts, it might be better to start from scratch and use this as a reference as you encounter migration issues.

[brian-penguin]

@ericwbailey in the future if you're still interested in this we could pair through it. I'm going to close this PR as it's almost 2 years old