Skip to main content

FAQ

Implemented

FAQ section organism — thin composition wrapper over the Accordion molecule (R1 composition fix, 2026-08-27): question maps to the accordion header (button + aria-expanded/aria-controls), answer to the region panel. Panels stay independently openable (multiple is always on); roving ArrowUp/ArrowDown/Home/End keyboard navigation is owned by the molecule. Ships in a card <section aria-label> with an <h2> heading — FR default, EN via locale, or a full heading override. Requires JavaScript.

Categoryorganisms
Sourcecomponents/organisms/faq/FAQ.tsx
AI HintUse for FAQ-style question/answer sections on event pages — the heading + card chrome and the question->header/answer->panel mapping come for free (composed Accordion, roving keyboard focus, JavaScript required). For any other stacked-disclosure list (settings groups, filters) use the Accordion molecule directly.

FAQ section organism — question/answer list composed on the Accordion molecule (button + aria-expanded headers, roving keyboard focus, independently openable panels) with a locale-aware default heading.

FAQ

design-system

FAQ organism preview and API reference — question→accordion header, answer→panel.

Questions fréquentes

Props

Preview

FAQ

Prop
Type
Required
Default
Description
items
FAQItem[]
Required
—

2-10 items ({ id, question, answer }) — the composed Accordion molecule dev-warns outside that range and on duplicate ids (NASA Rule 2)

heading
string
Optional
locale-aware

Section heading text; defaults to 'Questions fréquentes' (fr) or 'Frequently asked questions' (en).

locale
"fr" | "en"
Optional
'fr'

Selects the default heading copy when heading is omitted.

className
string
Optional
—

Class appended to the card section.

Quick use:<FAQ />

Accessibility

ARIA roleregion

Type

1 rule

NASA Rule 2

items bounded 2-10 (NASA Rule 2, enforced by the composed Accordion molecule's dev warning; duplicate ids also warn)

ARIA

1 rule

WAI-ARIA Accordion Pattern

Each question is an Accordion header (<button> in <h3> with aria-expanded/aria-controls); each answer is a role='region' panel labelled via aria-labelledby; roving ArrowUp/ArrowDown/Home/End focus per the WAI-ARIA Accordion Pattern; section named via aria-label

Usage

Import

tsxSnippet
import { FAQ } from "@epasslive/design-system"

Example 1

tsxSnippet
<FAQ items={faqItems} heading="Questions fréquentes" />

Example 2

tsxSnippet
<FAQ items={faqItems} locale="en" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

Design System v4.1.0 | ePassLive