Accordion

Overview

Accordions help reduce scrolling by hiding non-essential information until it's needed. They organize content into collapsible sections, making it easier for users to find and focus on information relevant to them. This is especially useful for long pages where not all information needs to be visible at once.

Best practices

When to use

• To organize related information
• To shorten pages and reduce scrolling when screen space is limited and content is not crucial to read

When not to use

• When most users will need to see all content anyway
• The content is very short and hiding it adds unnecessary complexity (use list instead)

Usage

To use accordion, import DAFF_ACCORDION_COMPONENTS directly into your custom component:

import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_ACCORDION_COMPONENTS,
  ],
})
export class CustomComponent {}

Anatomy

An accordion consists of the following components:

Container

<daff-accordion>: The wrapper component that groups all accordion items together.

Item

<daff-accordion-item>: Individual collapsible section containing a title and content. Handles expansion and collapse on user interaction.

Title

[daffAccordionItemTitle]: The clickable header that toggles the accordion item's visibility.

Content

Content placed inside <daff-accordion-item> (excluding the title) forms the collapsible panel content that is shown or hidden when toggled.

Basic structure

<daff-accordion>
 <daff-accordion-item>
   <div daffAccordionItemTitle>Title</div>
   <div>Expandable content</div>
 </daff-accordion-item>
</daff-accordion>

Features

Expand an item by default

Use the initiallyExpanded property on the accordion item to have an item open by default.

Disable an accordion item

Use the disabled property on the accordion item to disable and prevent it from being expanded or collapsed.

Accessibility

Accordion follows the Accordion WAI-ARIA design pattern.

Titles act as buttons with:

• role="button"
• A unique id, defined by the contentId property.
• aria-expanded to indicate current state.
• aria-controls property linked to the associated panel content.

Content blocks include:

• role="region"
• A unique id, defined by the itemId property.
• aria-labelledby property linked to the corresponding title.

IDs are autogenerated by default but can be overridden via the contentId and itemId inputs on <daff-accordion-item>.

Keyboard interactions

Key	Action
Tab	Moves focus to the next focusable element.
Space / Enter	Expands or collapses the focused accordion item's panel content.