Disclosure Component

[joshblack]

We've seen a use-case crop up for a generic component that combines a trigger and a pop-up to enable a variety of use-cases. This primitive can be used by teams to build a variety of accessible functionality in their product.

At its core, this component would have two pieces:

• A trigger that the user interacts with by clicking or using their keyboard to disclose the content of the component
• A pop-up that contains the content

Depending on the type of content, it may be useful for the pop-up to contain a way to close the pop-up (like a X present in a modal). Similarly, focus may need to be placed on the first item for certain cases like in a dialog pattern.

In terms of focus order, the content in the pop-up should appear after the trigger. This means that a user can do the following:

• Tab to the trigger
• Press spacebar
• Press tab to go into the content of the pop-up
• Press tab to get out of the content of the pop-up (note: this does not dismiss the pop-up)

2021 Release:

• Accessibility Primitives: Disclosure

[joshblack]

As an example, GitHub uses this pattern across their site to drive the following parts of their experience:

Nav menus

Disclosure buttons

Branch switcher

This pattern includes nested components like a combobox and content switcher / tabs

Action buttons

For cases like sorting

Or filtering

[janhassel]

Are there any plans on pursuing this? I've seen a lot of teams using an OverflowMenu to achieve such interfaces which mostly results in invalid HTML (by not using <li> as direct children of <ul>) and comes with considerable accessibility violations.

I think a component like this which would allow for a wider range of use cases is desperately needed.

[joshblack]

@janhassel yes! 100%. I think the plan is to see if we can get it into the next sprint and tackle the exact case that you mentioned.

Let me know if you want to help out at all with it! Happy to loop you in on any conversations if you're interested 😄

[laurenmrice]

[joshblack]

@janhassel just a heads up, we have a related component to this (Popover) that will be used in conjunction with the Disclosure component. Let me know if you want to help us test it out!

[laurenmrice]

Design specs

Icon button

Text

Menus

Dismissable

[laurenmrice]

Avatar example

Text button example

Settings example