Accordion

A component that consists of multiple collapsible sections.

Features Section titled Features

• Option to hide the content when collapsed instead of unmounting it for better SEO
• CSS variables to animate the height/width of every item content
• Full keyboard navigation

Installation Section titled Installation

npm install @corvu/accordion

The accordion is also included in the main corvu package under corvu/accordion.

Usage Section titled Usage

import Accordion from '@corvu/accordion' // 'corvu/accordion'
// or
// import { Root, Trigger, ... } from '@corvu/accordion'

Anatomy Section titled Anatomy

<Accordion>
<Accordion.Item>
  <Accordion.Trigger />
  <Accordion.Content />
</Accordion.Item>
</Accordion>

The accordion item uses the Disclosure component under the hood. It forwards the same props in the Item children callback and the disclosure context is re-exported as Accordion.useDisclosureContext.

Animation Section titled Animation

corvu sets the --corvu-disclosure-content-height and --corvu-disclosure-content-width css properties on every accordion item content that make it possible to animate the height/width.

[data-corvu-accordion-content][data-collapsed] {
animation: collapse 200ms linear;
}
[data-corvu-accordion-content][data-expanded] {
animation: expand 200ms linear;
}

@keyframes collapse {
0% {
  height: var(--corvu-disclosure-content-height);
}
100% {
  height: 0px;
}
}

@keyframes expand {
0% {
  height: 0px;
}
100% {
  height: var(--corvu-disclosure-content-height);
}
}

Accessibility Section titled Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Ensuring items are accessible Section titled Ensuring items are accessible

Based on the Accordion WAI-ARIA design pattern, every accordion item trigger should include a meaningful title text and should be wrapped in a heading element like this:

<Accordion.Item>
  <h3>
    <Accordion.Trigger>What is corvu?</Accordion.Trigger>
  </h3>
  <Accordion.Content />
</Accordion.Item>

If you don’t want to use a heading element for some reason, you can instead use the aria-level attribute to define the hierarchical level:

<Accordion.Item>
  <span aria-level="3">
    <Accordion.Trigger>What is corvu?</Accordion.Trigger>
  </span>
  <Accordion.Content />
</Accordion.Item>

Keyboard navigation Section titled Keyboard navigation

API reference Section titled API reference

The disclosure context is re-exported as Accordion.useDisclosureContext and the item children callback also accepts all props of the disclosure root children callback, which are documented in the Disclosure API reference.