Collapse component

Accessibility

The Collapse component has been designed with accessibility in mind, providing collapsible content that is fully keyboard accessible and screen reader compatible.

Accessibility Props

The following props are available to improve the accessibility of your Collapse component:

Name	Type	Description
expandButtonLabel	string	Specifies the accessible label of the button when the content is collapsed. This should clearly indicate the action to expand the content.
collapseButtonLabel	string	Specifies the accessible label of the button when the content is expanded. This should clearly indicate the action to collapse the content.
label	string	Defines the visible heading that also serves as the accessible name for the collapsible section.
customLabel	React.Node	Allows replacing the default heading with custom content while maintaining the click target for keyboard accessibility.

Automatic Accessibility Features

The component automatically manages ARIA attributes:
- aria-expanded is automatically set to true or false based on the current state.
- aria-controls is automatically set to reference the collapsible content.

Best Practices

Always provide descriptive expandButtonLabel and collapseButtonLabel that clearly indicate the action.
Use clear and concise labels that describe the content being collapsed.
When using customLabel, ensure it includes text that can be announced by screen readers.
If the collapsed content includes interactive elements, make sure they’re not focusable when collapsed.
All label texts should always be translated to the user’s language.
When using the actions prop, ensure all action buttons have descriptive labels and are keyboard accessible to maintain a logical tab order in the component.

Focus Management

When expanded, focus moves from the label to the button to the content inside.
When collapsed, focus will skip over any focusable elements inside the collapsed content.

Tab: Moves focus to the collapse label or expand/collapse button.
Enter or Space: When focus is on the label or button, toggles the collapsed state.
Focus order: Focus moves from the label to the button to the content inside (when expanded).
When collapsed, focus will skip over any focusable elements inside the collapsed content.

Examples

Basic Usage with Required Accessibility Labels

import { Collapse, Text } from "@kiwicom/orbit-components";
<Collapse
  label="Flight Information"
  expandButtonLabel="Show flight details"
  collapseButtonLabel="Hide flight details"
>
  <Text>Flight number: KL1234</Text>
  <Text>Departure: 10:00</Text>
  <Text>Arrival: 12:30</Text>
</Collapse>;

Screen reader announces: “Flight Information, collapsed, button” when focused on the label and “Show flight details, collapsed, button” when focused on the button.

Expanded State

import { Collapse, Text } from "@kiwicom/orbit-components";
<Collapse
  label="Passenger Details"
  expandButtonLabel="Show passenger details"
  collapseButtonLabel="Hide passenger details"
  expanded={true}
>
  <Text>Name: John Smith</Text>
  <Text>Passport: AB123456</Text>
</Collapse>;

Screen reader announces: “Passenger Details, expanded, button” when focused on the label and “Hide passenger details, expanded, button” when focused on the button.

With Actions

import { Collapse, Button, Text } from "@kiwicom/orbit-components";
<Collapse
  label="Filter Options"
  expandButtonLabel="Show filters"
  collapseButtonLabel="Hide filters"
  actions={
    <Button type="white" size="small">
      Reset
    </Button>
  }
>
  <Text>Filter controls...</Text>
</Collapse>;

Screen reader announces: “Filter Options, collapsed, button” when focused on the label, “Reset, button” when focused on the reset button, and “Show filters, collapsed, button” when focused on the button.

With Custom Label

import { Collapse, Badge, Text } from "@kiwicom/orbit-components";
<Collapse
  customLabel={<Badge type="info">2 baggages</Badge>}
  expandButtonLabel="Show baggage details"
  collapseButtonLabel="Hide baggage details"
>
  <Text>Cabin baggage: 1 × 8kg</Text>
  <Text>Checked baggage: 1 × 23kg</Text>
</Collapse>;

Screen reader announces: “Two baggages collapsed, button” when focused on the custom label and “Show baggage details, collapsed, button” when focused on the button.

Collapse