Universell einsetzbar

Accordion funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/accordion) — die Library erkennt die Umgebung automatisch.

Accordion

Die Accordion-Komponente rendert eine list of collapsible panels. Jedes Panel kann unabhängig umgeschaltet oder gesteuert werden. Unterstützt animated expansion and full ARIA disclosure pattern.

---

Übersicht

import { Accordion } from "@prokodo/ui/accordion"
;<Accordion
  items={[
    { title: "Panel 1", content: <p>Content A</p> },
    { title: "Panel 2", content: <p>Content B</p> },
  ]}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Accordion } from "@prokodo/ui/accordion"

CSS:

import "@prokodo/ui/accordion.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
id	string	—	—	Optionale HTML-id am Root-Element.
items	AccordionItem[]	—	✅	Array von Accordion-Panels.
multiExpand	boolean	false	—	Mehrere Items gleichzeitig öffnen.
hideHeaderOnExpand	boolean	false	—	Header bei geöffnetem Item ausblenden.
headerWrapperClassName	string	—	—	CSS-Klasse auf dem Header-Wrapper.
headerToggleClassName	string	—	—	CSS-Klasse auf dem Toggle-Button.
className	string	—	—	CSS-Klasse am Root-Element.
onChange	(id: string, open: boolean) => void	—	—	Wird beim Umschalten eines Items aufgerufen.

Siehe src/components/accordion/Accordion.model.ts für den vollständigen AccordionProps-Typ.

---

Design-Tokens

Passe Accordion über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
--pk-accordion-radius	var(--pk-radius-md)	Eckenradius der Einträge
--pk-accordion-border	var(--pk-color-border)	Rahmenfarbe
--pk-accordion-border-focus	var(--pk-color-brand)	Fokussierter Rahmen
--pk-accordion-shadow	var(--pk-shadow-sm)	Box-Schatten
--pk-accordion-header-bg	var(--pk-color-surface)	Header-Hintergrund
--pk-accordion-content-bg	var(--pk-color-surface)	Inhalt-Hintergrund
--pk-accordion-fg	var(--pk-color-fg)	Textfarbe
--pk-accordion-gradient-from	var(--pk-color-brand)	Verlauf Start (Hover)
--pk-accordion-gradient-to	var(--pk-color-accent)	Verlauf Ende (Hover)

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Accordion } from "@prokodo/ui/accordion"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 3 jest-axe-Assertion(s) in 5 Testdatei(en) · 4 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Accordion in Storybook öffnen

---

Quellcode

src/components/accordion/Accordion.model.ts