Recommendation for accordions with checkboxes #1153
-
|
Hey DSYS! I'm thinking of using accordions with checkbox groups in Event Streams. Are there any recommendations on how to use these components together? Here's a clickable prototype to show how I'm thinking it will work. I have a few questions called out in this image as well: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
Hey @mindytom ! This is definitely a tough problem. Because of the 3 levels of nesting and expanding/collapsing you're trying to achieve here, what you'd need is a Tree component to appropriately communicate the hierarchy of all the children elements. Without a Tree, it'll be unclear to a screenreader whether "Workflow" is a child of "Reservation" or "Taskrouter". (We don't have a Tree yet, though, but it is on our roadmap.) However if you're able to simplify the list to 2 levels only, we'd recommend removing the column of checkboxes on the left, and putting the Checkbox Groups inside each Disclosure so a customer would expand it and see something like:
This makes the relationship between the checkboxes and their labels a bit more straightforward. It could also make it a clearer what a customer is selecting at the top level (e.g., they're selecting "All Voice events", and not an item called "Voice") You could also potentially make "Voice", "Taskrouter", and "Messaging" text headings, and have just the children under Taskrouter show up as Disclosures. Since the interaction you've mocked up is a little bit similar to "expandable table rows" we've seen, I'd recommend reaching out to folks like @kylegilbreath, @syeo, and @PoojMenon, who have designed alternatives to expandable rows. Whatever your solution ends up being, please let us know where you took it! I'm sure your solution here could help out lots of folks working with complex pages like this. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mindytom - just wanted to followup and see if you had any additional questions or needed more clarity on Sarah's response? If you're all set for now, I'll go ahead and mark this one as answered. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
@serifluous Thanks Sarah for the thorough response! I iterated on the design. Any further thoughts with this version? I think it makes it a lot more clear now! An additional question I have is around the pattern of the disclosure. Is there a recommendation on how they behave with one another? If the "Reservation" disclosure is already expanded, and the user clicks to expand the "Workflow" disclosure, is it recommended that both the disclosures remain open? Or expanding the second disclosure will also close the first disclosure?
|
Beta Was this translation helpful? Give feedback.
-
|
Hey @mindytom ! We had some time in our design jam sesh to try out some different layouts. We haven't had a ton of opportunities to mock up realistic ideas using components in Figma so let us know what you think – don't feel like you have to use any of these (especially since we're not as involved in the UX/flow of this experience so the levels might not make sense). But let us know what you think! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Re: disclosure behavior, Opening and closing disclosures have no affect on other disclosures—This is the typical behavior we've seen throughout Twilio products. If you do need a component that only keeps one expandable section open, though, let us know! That's technically a different component (Accordion). We just haven't seen many examples of it in Twilio products, and it's a little lower down on our roadmap. |
Beta Was this translation helpful? Give feedback.
-
|
Got it. Thank you DSYS team for all your help! Will follow up if I have any further questions. |
Beta Was this translation helpful? Give feedback.
Hey @mindytom ! This is definitely a tough problem.
Because of the 3 levels of nesting and expanding/collapsing you're trying to achieve here, what you'd need is a Tree component to appropriately communicate the hierarchy of all the children elements. Without a Tree, it'll be unclear to a screenreader whether "Workflow" is a child of "Reservation" or "Taskrouter". (We don't have a Tree yet, though, but it is on our roadmap.)
However if you're able to simplify the list to 2 levels only, we'd recommend removing the column of checkboxes on the left, and putting the Checkbox Groups inside each Disclosure so a customer would expand it and see something like: