Accordion component

Accessibility

The Accordion component has been designed with accessibility in mind, providing collapsible sections that are fully keyboard navigable and screen reader compatible.

Accessibility Props

Accordion props:

Name	Type	Default	Description
loadingTitle	`string`		The title announced by screen readers when the accordion is in loading state. Required when `loading` is `true` and `loadingHidden` is not `true`.
loadingHidden	`boolean`		If `true`, the loading state will be hidden from screen readers. Use when loading state is conveyed through other visible text on the page.

AccordionSection props:

Name	Type	Default	Description
expandOnTileClick	`boolean`	`false`	When `true`, makes the entire header area clickable to expand/collapse the section, improving the touch target size for mobile users.

Automatic Accessibility Features

The component automatically manages ARIA attributes when a section is expandable AND expandOnTileClick is true:
- role="button" is applied to the header
- aria-expanded is set to true or false based on the section’s expanded state
- aria-controls associates the header with its controlled content section
- tabIndex is set to 0 to include the header in the tab order

The Accordion component supports the following keyboard interactions:

Enter/Space: When focus is on a section header with expandOnTileClick enabled, pressing Enter or Space will toggle the expansion state
Tab: Moves focus to the next focusable element (header or interactive elements within expanded sections)
Shift + Tab: Moves focus to the previous focusable element

Loading state accessibility

When using the Accordion’s loading state, you must provide either a descriptive loading message or explicitly hide it from screen readers:

Use loadingTitle to provide a descriptive message that will be announced to screen readers
Use loadingHidden to hide the loading state from screen readers when the loading state is conveyed through other visible text on the page

// Accessible loading state with descriptive message
<Accordion
  loading
  loadingTitle="Loading accordion content"
>
  <AccordionSection header="Section 1">Content 1</AccordionSection>
  <AccordionSection header="Section 2">Content 2</AccordionSection>
</Accordion>
// Loading state hidden from screen readers because loading state
// is conveyed through other visible text on the page
<Accordion
  loading
  loadingHidden
>
  <AccordionSection header="Section 1">Content 1</AccordionSection>
  <AccordionSection header="Section 2">Content 2</AccordionSection>
</Accordion>

Best Practices

Provide descriptive headers that clearly indicate the content of each section
Consider enabling expandOnTileClick for interfaces primarily used on mobile devices
Interactive elements in the main content area should only be accessible when their section is expanded

Example

<Accordion id="faq-accordion">
  <AccordionSection id="section-1" header="What is Orbit?" expandOnTileClick>
    Orbit is Kiwi.com's design system for creating consistent user experiences across products.
  </AccordionSection>
  <AccordionSection id="section-2" header="How do I use Accordion?" expandOnTileClick>
    Import the Accordion and AccordionSection components and nest the sections within the accordion.
  </AccordionSection>
</Accordion>

Screen reader announces: “What is Orbit?, button, collapsed” when focusing on the first section header.

Accordion