Combobox vs. Button

[jess-watson]

Hey team,

I'm working on migrating some Evergreen components and interactions to Paste (here). In other parts of the product we use a button that opens a menu of audiences, events, etc that a user can choose from, however I'm wondering if a combobox is a better component to use in this situation.

Here are some of my questions:

• Should we use a single select combobox for this interaction, or continue using a button?
• For the ‘create audience’ flow, can we have the ‘create’ button live within the listbox, or is it more accessible to have a separate button?
• The Segment app has a “two panel” menu where the right side of the menu shows information about what a user selected. Is there a way we can build this in Paste? Is this accessible? If we can’t recreate it, is there a better way to display this information?

Thanks for your input!

[loreina]

Hi @jess-watson,

Should we use a single select combobox for this interaction, or continue using a button?

I think a Combobox works well here. If using a Button, you would have to use the Listbox Primitive to build the popover. It would be simpler, if it's a single panel, to use Combobox.

For the ‘create audience’ flow, can we have the ‘create’ button live within the listbox, or is it more accessible to have a separate button?

Your engineers should be able to compose an option within Combobox to create options. We have it in our backlog to add an example to our docs site.

The Segment app has a “two panel” menu where the right side of the menu shows information about what a user selected. Is there a way we can build this in Paste? Is this accessible? If we can’t recreate it, is there a better way to display this information?

You can make the double panel accessible, but you would need to build everything in it, and it has to be a popover. You can't have that type of content in a combobox value right now. The ARIA APG's Combobox pattern accommodates this, but it doesn't work super well and we don't currently support it.

@darcimm came by to discuss the double panel component a little bit ago if you want to review the office hours recording or sync with her: #3104

Hope that helps! Let us know what you decide to do with the double panel component as our team would be curious on how it turns out. Thanks!

[SiTaggart]

Hi @darcimm, unfortunately not. Components or UI controls or Widgets, whatever we want to call them, can only perform the action that it is designed to do. We are governed by a couple of things:

• The HTML spec
• ARIA and ARIA Authoring practices.

Both of these describe all the known concepts of UI controls that are able to communicate their Identity, Operation and State to assistive technologies (AT). In essence, they have predefined anatomy.

We can't change or adapt that anatomy or intended use case because browsers and AT don't know how to communicate it and non-visual users don't know how to interpret them. We basically can't just make up or invent UI controls. We can, on the other hand, compose know controls into more complex compositions. So you might be able to build something similar using Pills, Popovers and Listboxes

[marektonik]

@SiTaggart hey! we are working on these comboboxes and wondering if we could remove popover's padding as on default it's 32px and it's a lot for these more complex comboboxes, especially having on mind that there is a max-width set. Could you please confirm if it's ok to remove this padding + give us some additional guidance? thanks!

below screenshot, here link to figma

[SiTaggart]

Hi there

Having had another conversation about this component this week in office hours, probing into the usability, where even the implementing team had questions about the validity or need for some features, we have come to the conclusion that this component should be completely rethought as an experience and not reimplemented.

We won't be supporting it, or recommending it.

This should be broken down into it's sub parts and displayed on the page as form fields.

Thanks

[marektonik]

@SiTaggart hey, understand. And how comboboxes like this one? In addition to regular combobox component, there is a search. Should this experience be rethought also, or can we compose it like that?

[SiTaggart]

That should just be a multi select Combobox https://paste.twilio.design/components/multiselect-combobox. No need to hide the autocomplete inside a popover, just let folks type into an input.