Accordion

The Accordion component groups related content in a collapsible section that users can expand or collapse to show or hide the body content.

When to use

Use an accordion when you need to present a list of sections that users can expand one at a time to conserve vertical space.
Use it for grouping secondary or detailed information that isn’t required to be visible immediately.
Use the “Closed” mode for sections that should start hidden and the “Open” mode for sections that should be visible on load.

When not to use

Don’t use an accordion for primary actions that must be immediately visible; a static layout or card is more appropriate.
Don’t use it when the content is short enough to fit without scrolling; a simple list or paragraph works better.
Don’t use multiple accordions that all start open if you want to avoid overwhelming the user; consider a single expanded section or a different pattern.

Anatomy / variants

Variant	Description	When to use
`Open`	The body content is visible when the component loads.	When the section contains essential information that should be seen by default.
`Closed`	The body content is hidden until the user expands the header.	When the information is supplemental or can be revealed on demand.

Props / API

Prop	Type	Default	Description
`title`	`string`	`Section Title`	Text shown in the header that identifies the accordion section.
`headerContent`	`slot`	`{'guid': {'sessionID': -1, 'localID': -1}}`	Slot for custom content placed alongside the title in the header (e.g., icons or secondary actions).
`actions`	`slot`	`{'guid': {'sessionID': -1, 'localID': -1}}`	Slot for actionable elements (e.g., buttons) that appear in the header.
`bodyContent`	`slot`	`{'guid': {'sessionID': -1, 'localID': -1}}`	Slot for the main content that is revealed when the accordion is open.
`mode`	`string` (enum)	`Open`	Controls the initial state of the accordion; options are `Open` or `Closed`.

Accessibility

Use a heading element (e.g., h3) that contains a <button> to toggle the accordion; the button must have aria-expanded set to true when mode is Open and false when Closed.
Associate the body region with the toggle button via aria-controls on the button and id on the content container.
The body container should have role="region" and aria-labelledby referencing the button’s id to provide a clear relationship for assistive technologies.
Ensure focus moves to the header button when navigating via keyboard; support Enter and Space keys to toggle the state.
Provide sufficient color contrast for both the header and body content according to WCAG 2.1 AA standards.

Changelog