🟢Accordion

Figma Component

Overview:

An accordion is a collapsible content container that reveals or hides content sections. It supports scalable, accessible UI patterns for FAQs, settings, and more.

Usage Guidelines:

• Use in vertical flows where content needs to be condensed and expanded by user choice.

• Avoid nesting multiple accordions within each other.

• Spacing should follow vertical rhythm of 16px between sections.

• Use single-select when content should be consumed one section at a time (e.g., guided flows).

• Use multi-select when users may need to compare or reference multiple sections simultaneously. Keep groups concise (3–5 items recommended) to maintain scannability.

• Default to text-only content, and introduce images or buttons only when they add clear value.

• All accordion items within a group should follow the same content structure to ensure visual consistency.

Component Properties:

multi-select (boolean: true, false):

• Purpose: Controls whether multiple accordion items can be expanded simultaneously

• Usage: Set to true to allow multiple items open, or false to restrict to a single expanded item

num-of-accordions (number: 5):

• Purpose: Defines the number of accordion items within a group

• Usage: Adjust based on content needs, with 3–5 items recommended for optimal scannability

has-icon (boolean: true, false):

• Purpose: Determines whether an icon is displayed in each accordion header

• Usage: Enable when icons provide meaningful context or improve recognition; Should be used consistently across all items within a group

trigger-position (enum: right, left):

• Purpose: Defines the placement of the expand/collapse caret trigger

• Usage: Default position is right and used for layouts with icons. Left is an alternative layout for when you have no icons.

Appearance Modes:

Supports the following variable collections:

• theme: light, dark

• status: default, hover, focus, active, disabled

• device: desktop, mobile

Nested Components:

• AccordionItem: Content area that expands/collapses

• AccordionHeader: Clickable label row with icon

• AccordionContent: Contains the expandable section of the accordion item. Supports text by default, with optional inclusion of images or action buttons based on desired content.

• ButtonGroup: Displays when the content variant includes actions.

♿ Accessibility Considerations:

• Contrast: Meets WCAG AA in all supported modes

• Keyboard navigation: Tab to header, Enter/Space to toggle

• Screen reader support: Uses appropriate ARIA roles for `button` and `region`

• Touch targets: Maintains a minimum effective 44px touch area.

• Semantic tags: Implement proper button and region roles for accessible interaction (utility-accordion-header, utility-accordion-panel)

🧠 Developer Notes:

• Maps to `<Accordion />` component in frontend system

• Uses `isExpanded` prop to control open state

• Icon rotates with CSS transition if animation is enabled

• Accordion Items currently set up to fill up available width. Max-width of 720px implemented to make them visually appropriate for laptop/desktops screens.

Known Issues

• Mixed Content Types: Accordion items within the same group should not mix content types (e.g., text-only and text+image), as this can create inconsistency in layout and user experience.

Reference Links:

• Accessibility guidelines follow WCAG 2.1 AA standards

• Icon library reference for available icon-type values

• \[Link to storybook component]