Research: Determine the best available way to improve long dropdown menus

[humancompanion]

We've tried to mitigate the issues of long dropdowns using the chosen plugin, which has now been replaced by the select2 plugin. We've also introduced text fields with autocomplete to traverse long lists such as occupations (5,000+ items). We've witnessed users struggling to use the type-ahead feature of the select2 plugin and we've heard anecdotal evidence that users can't use the autocomplete (though we don't know exactly why yet).

This issue is to track doing some UI research to determine how we might best allow users to select from long lists. Followed by some research with users testing potential solutions. After we identify a solution we need to make it accessible, codify it into the design system, then replace our instances of select2 and autocomplete for input across the site.

[starrchen]

Will look into if the autocomplete issue may be related to if the user's browser blocks tracking, as I experienced during bug bash

[dreeeeewwwww]

Concepts:

• add label or placeholder text for autocomplete/typeahead?
• Does anything exist for compliant dropdowns? -> https://github.com/forumone/jquery.selectability.js, https://github.com/haltersweb/Accessibility
• do we need to allow multiple things to be selected? or does only one selection work?
• can we test this out with autocomplete but without any styling on the select? how does it behave with default settings? Can we use autocomplete with a css only styling solution?

What about select 2 is non-compliant?

• Current open issues: https://github.com/select2/select2/labels/accessibility
• try to test out as many of those issues as we can
• Can we get by with a patch?

[humancompanion]

@dreeeeewwwww - The first concept is filed #132 While I think that would help folks know that they could type in the select2 text field, we should still verify that with another usability test.

@margaretdumas should have the details on how select2 fails 508 compliance. I'm going to hazard a guess that it has to do with the lack of support for using the arrow keys (which required pressing alt while using the arrow keys): select2/select2#3472

There are a few others where there is a pull request but, it hasn't been merged yet:
select2/select2#3735
select2/select2#3144

For our own testing I'd suggest we follow the WordPress groups instructions to the select2 team: select2/select2#3744 (comment)

[humancompanion]

@dreeeeewwwww - Developments on this front! Baymard Institute published an article on this (The Lab has a subscription). Check this out:

https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/
https://github.com/JamieAppleseed/selectToAutocomplete
https://baymard.com/labs/country-selector

It relies on the jquery UI autocomplete (which I believe we used at some point) so let's examine the accessibility of that before going down this road. I'll forward the article independently.

[humancompanion]

Another item for our consideration here:
https://design.cms.gov/components/autocomplete/

The CMS autocomplete is a React component but, I wonder if we couldn't role our own plain JS version:
https://github.com/CMSgov/design-system/blob/master/packages/core/src/components/Autocomplete/Autocomplete.jsx