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.