Accordion

An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.

Overview

Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times. The accordion component consists of several pre-styled components and directives.

Formatting

Accordions are built using <daff-accordion>, <daff-accordion-item>, and [daffAccordionItemTitle].

<daff-accordion>: A wrapper for grouping accordion items.
<daff-accordion-item>: The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked.
[daffAccordionItemTitle]: Used to provide a high level overview of the content.

Any additional content placed inside of an accordion item will be displayed as part of the collapsible content.

Usage

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

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

<daff-accordion>
  <daff-accordion-item>
    <div daffAccordionItemTitle></div>
    <p>Item Content</p>
  </daff-accordion-item>
  <daff-accordion-item>
    <div daffAccordionItemTitle></div>
    <p>Item Content</p>
  </daff-accordion-item>
</daff-accordion>

Examples

Expand an item by default

Use the initiallyExpanded property on the accordion item to have it opened by default.

<daff-accordion-item [initiallyExpanded]="true"></daff-accordion-item>

Disable an item

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

<daff-accordion-item [disabled]="true"></daff-accordion-item>

Accessibility

Accordion follows the Accordion WAI-ARIA design pattern.

Titles have an id, the button role, the aria-expanded state, and the aria-controls property set to the ID specified by the contentId property. It uses an autogenerated value by default but can be customized.
Content blocks have an id, the region role, and the aria-labelledby property set to the ID specified by the itemId property. It uses an autogenerated value by default but can be customized.

Keyboard interactions

Key	Action
`Tab`	Moves focus to the next focusable element.
`Space` or `Enter`	When focus is on the accordion item, it collapses or expands the associated content panel.