[Autocomplete] Rebuild AutoComplete internals to fix accessibility issues

[voiid]

Issue summary

There are a number of bugs and accessibility issues with the current AutoComplete component. We are seeking to replace the internals of the component with new versions of ComboBox and ListBox built by @daniedleroux and @AndrewMusgrave.

Expected behavior

The new AutoComplete component should be fully backwards compatible with the existing one. It should also reach ComboBox and ListBox 1.2 spec.

Remaining Tasks

• Address listTitle markup differences - (@AndrewMusgrave)
• Visual checkboxes for allowMultiple - Chris
• Loading indicator not showing when there are no results - Chris
• Focus ring partially cut off when last item in list - (@AndrewMusgrave)
• Add support for empty state - Chris
• Add support for actionBefore - Chris
• Handle id prop (ex: on combobox + listbox.options) - (@AndrewMusgrave)
• Fix/write tests
• Map (old) ComboBoxProps['options'] (aka OptionDescriptor) to ListBox.OptionProps - Andrew
  • Support media prop in ListBox.Option
  • label -> now part of Children
  • Map active -> selected
  • Add support for id
• Map (old) SectionDescriptor to (new) SectionProps
  • Options now part of children
• Investigate performance differences - (@AndrewMusgrave)
  • Investigate if we need to memoize options - (@AndrewMusgrave)
• Determine best pattern to use for loading localization - (@AndrewMusgrave)
• Fix storybook bugs
• Empty state accessibility (@AndrewMusgrave)
• Review pixel perfect padding for all prop variations (@voiid)
• Test on all browsers (@voiid)

Nice to have/pending discussion

• Arrow navigation is different (? - pending discussion)
• Add any missing tests from old component use cases (@AndrewMusgrave)
• Performance comparison screenshots/outline for PR (@AndrewMusgrave)
• Make component easier to use through hooks (@AndrewMusgrave)
• Improve README examples (@voiid)
• Finalize accessibility for screen readers
  • (?) Should it announce options as selected
  • (?) Should there be anything announced when toggling options?

Was there a decision made regarding the following two items?

(?) Should it announce options as selected
(?) Should there be anything announced when toggling options?

Currently, navigating the ComboBox options with Voice Over is confusing – CMD + F5 on Mac. It always reads the currently selected item, not the focused item, so voice over users cannot navigate the list of options because they do not know what they are.

[voiid]

@ztratify I don't 100% remember where we landed on those since it's been a while but those two were only relevant to the interaction of selecting an option and wouldn't impact what you're describing.

Is this when using Combobox in isolation, using it with Listbox or using the Autocomplete component? Single or multi-selection?

For reference, this is what I see when using Autocomplete (which is Combobox + Listbox internally).

Screen.Recording.2022-02-09.at.9.47.47.AM.mov

Sorry @voiid I should have been more clear!

I can replicate using the Autocomplete + Combobox, but only when an item in the combobox list has already been selected. The combobox works as expected if there is no item selected (1st half of my video). Once an item is highlighted voice over only reads that item (2nd half of my video):

09-39-0y501-cbxto.mp4

[chloerice]

Ahhh yes, I believe that's a problem with aria-activedescendent not updating onKeyDown. I'll be fixing and adding support for some things like adding support for tapping into the currently active option in Combobox and Listbox to implement the inline autocomplete combobox pattern in TagCard in the Admin for the project I'm working on (see #5146).

[voiid]

Thank you both!!