Disclosure (Show/Hide)

Diagram of the different cuts of a pig
Component Name

Disclosure (Show/Hide)

Keyboard Expectations
  • Enter or Space = Toggle content
Focus Expectations
  • Trigger has visible keyboard :focus state
Labelling Expectations
  • Trigger has role of button (e.g. <button>)
  • When content is visible, button has aria-expanded set to true. When content is hidden, it is set to false.
  • (Optional) button references content with aria-controls