Disclosure
A pattern that shows or hides content when a button is clicked
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsButton role on trigger
The trigger element must use role="button" or a native <button> element.
aria-expanded on trigger
Reflect the expanded state on the trigger via aria-expanded="true/false".
Toggle with Enter/Space
Pressing Enter or Space must toggle the visibility of the content.
aria-controls linking trigger to panel
Reference the content panel id from the trigger via aria-controls.
Visible focus indicator on trigger
Show a clear focus ring when the trigger button is focused.
Properly hide collapsed content
Collapsed content must be hidden using hidden, visibility:hidden, or display:none — not just moved offscreen.
Do not omit aria-expanded
Without aria-expanded, screen reader users cannot know whether content is expanded or collapsed.
Do not hide content with visibility alone
Using only CSS visibility on the container may not reliably hide content from all assistive technologies.
Additional checks
Use Collapse component
Use MUI Collapse for expand/collapse animations. Add unmountOnExit to remove content from the DOM when closed.
Code sample
Implementation notes
- –Add unmountOnExit to MUI Collapse to fully remove content from the DOM when in={false}.
- –When using IconButton instead of Button, always add an aria-label.