ComboboxControl: Improve selection and error/empty state UX

[jeryj]

I did an accessibility and usability review of the ComboboxControl created in #19657. To make it easier to discuss, I've recreated my usability recommendations here:

1. Autoselect matched options: I think this should autoselect the option if it matches. It's confusing when you type in a matched option, like "Large," then tab off of the field. This doesn't automatically select "Large" even though it's a direct match. There's no indicator that you haven't selected it, so I imagine this will be a common issue. See the Autoselect with Filtering option on this CodePen.
2. No results found error message: It's not clear when you type something in and tab off. It feels like your value is accepted.
3. Empty/No value found: Like above, when you enter a value that isn't a 1:1 match with an option, it seems like it accepts your value even though nothing is selected. Some kind of warning/error/state to indicate you don't have anything selected would be enormously helpful, IMO.
4. Down arrow not focusable: I'm not really sure what to do with this one, but you can click the down arrow to bring up the options, but it isn't able to receive focus. I think this would be fixed by always opening the listbox options on focus and remove the down arrow as a separate clickable element.
5. Items are selectable on tab

• Open listbox options
• Press down arrow to move into options
• Tab off the input
• The option you highlighted is now the selected option
  I'm not sure in spec what is expected here. I keep going back and forth if this is the best interaction or not. If this is left, then I think it makes sense to make the input autoselect the closest option as well, as then it'd be a similar pattern. Either way, it needs to be clear what option is selected.

Here's a gif that consolidates most of my usability concerns:

1. Open the full option menu
2. Select Large
3. Delete the input text
4. Type "Small"
5. Tab off the input
6. Delete the input text
7. See that Large is still selected

If we autoselected the closest option, then I think it would resolve this issue

Summary of recommendations

• Autoselect closest typed option on blur/tab off of the field
• Remove down arrow as clickable element
• Add "No results found" error state in the dropdown if there are no matched options
• If the input text does not actually have a selected option aligned with it, show some kind of error state/indicator so this is clear.

Related usability issue for the ComboboxControl: #22950

[adamsilverstein]

Hey @jeryj -

Thanks for reporting this. We made some significant changes in the ComboboxControl control in #25442. If is now used for the post Author selector and not for the font selector (you need to have more than one WordPress user who can author posts for this selector to show up)

Could you please give it another test and update your findings with the current version of the component?

[jeryj]

Hi @adamsilverstein - I've been loosely following along with the progress but it got so quick I couldn't keep up! I'll do my best to review it next week.

[jeryj]

I haven't had time to look at this. @adamsilverstein, is this something that still needs reviewed and tested?

[adamsilverstein]

Whenever you have a chance @jeryj - you can test this with the post author selector or the parent page selector (make sure you have a bunch of users or pages to test).

[jordesign]

Hey @jeryj @adamsilverstein Im just going back through some older issues and wanted to check if the changes mentioned above make this sufficiently resolved to close?

[jordesign]

With no further comments or movement on this, I will close the issue.

If it is still a problem - a new issue can be opened with updated details on how to reproduce.