Customizing the disclosure to add slots for actions #3473
-
BackgroundWe are building AB experimentation into Segment's Broadcasts. Part of this feature is showing the user all the different templates they are using and some meta data associated with each template during the creation of their Broadcast. Given there is a lot of information on the page, we have chosen to use a Disclosure component to contain and show a template so that it can be minimized. One of the things our designs include are action to duplicate or delete a template from the experiment. We think those actions should live in the heading of the Disclosure. However, when trying to buttons to the heading, clicking the button also triggers the opening and closing of the disclosure (see recording below). Screen.Recording.2023-09-06.at.11.00.36.AM.movFeedbackWe would like to enable the user to click an action without triggering the opening and closing of the Disclosure. Is what we are trying to accomplish feasible with the Disclosure component? If not, how could we update the Disclosure component to enable this use case? We would be happy to guest engineer to make this happen if a change is required. Stage of designHigh-Fidelity. A screenshot of our design for this section is included below. 
ResearchNo response Relevant linksAre you looking for visual design support?
Additional InformationNo response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
In addition to general feasibility, would appreciate additional feedback and input on the accessibility of this approach. Is there a challenge around having nested selectable/focusable elements within each other? If so, how might we best include actions with each disclosure object? |
Beta Was this translation helpful? Give feedback.
-
|
Hi there As per the Disclosure documentation, nested focusable elements are not accessible and should not be implemented.
You can do something pretty similar though which would be perfectly accessible, using the Disclosure Primitive. We've planned to build something called a Summary Detail component for a while, but it's never quite made the prioritization cut. I've knocked up a quick Codesandbox to demo what it might look like. You might take some inspiration from that and build something yourselves, that would be perfectly accessible and so the same job as your design intends. 
Essentially, the trigger is separated from the Heading as a sibling, allowing you to have as many actions in line as you like, but still be collapsible. |
Beta Was this translation helpful? Give feedback.
-
|
Perfect, thanks @SiTaggart! We'll follow your suggestion here. |
Beta Was this translation helpful? Give feedback.
Hi there
As per the Disclosure documentation, nested focusable elements are not accessible and should not be implemented.
You can do something pretty similar though which would be perfectly accessible, using the Disclosure Primitive.
We've planned to build something called a Summary Detail component for a while, but it's never quite made the prioritization cut. I've knocked up a quick Codesandbox to demo what it might look like.
You might take some inspiration from that and build…