Accordion Item

shadow

The wje-accordion-item is the actual interactive item inside wje-accordion. This is where the header click, state switching, ARIA links between headline and content, fallback toggle icon and open and close events are addressed.

Basic use in the context of the group

The sample below uses a single entry inside wje-accordion to make it clear where the headline, description and content slots belong. The headline may contain additional auxiliary or action components in addition to the text.

What's worth thinking about

• The headline slot forms a clickable header. After rendering, the component sets it to role="button", tabindex="0", aria-controls and aria-expanded.
• The description slot is the additional text in the header, and content holds the drop-down panel.
• The toggle slot is optional. If you don't fill it in, the component displays a fallback wje-icon with a chevron.
• The events wje-accordion-item:open and wje-accordion-item:close bubble to the parent wje-accordion.
• Program opening and closing are handled by the public methods expand() and collapse().
• Colour variants are set via the color attribute; detailed visuals are tuned via shadow parts and CSS custom properties.

Accessibility

• The headline is controlled by the Enter and Space keys.
• The panel content has role="region" and is linked to the headline via aria-labelledby.
• If you're inserting multiple interactive elements into the headline, test to make sure they don't "fight" with clicking on the entire headline.

Recommended practices

• Use the headline slot for a clear section title, not for an overly long paragraph of text.
• Keep the description slot brief; move detailed explanations to content rather than content.
• If you need a custom toggle appearance, fill the toggle slot, but keep the affordance that it is a dropdown element clear to the user.
• When programmatically opening and closing, think of consistency with the state of the parent wje-accordion.

Attributes and properties

color

Popis	Určuje významový farebný variant obalu accordion položky.
Atribút	color
Typ	string
Predvolené	-

Events

Názov	Popis
wje-accordion-item:open	Vyvolá sa pri rozbalení accordion položky.
wje-accordion-item:close	Vyvolá sa pri zbalení accordion položky.

Methods

collapse

Popis	Zbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	() => void

expand

Popis	Rozbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	() => void

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
headline	Štýluje klikateľnú oblasť hlavičky.
description	Štýluje oblasť doplnkového popisu.
toggle	Štýluje toggle slot a oblasť markera.
content	Štýluje rozbaľovaný obsahový panel.

CSS custom variables

Názov	Popis
--wje-accordion-background	Vlastná CSS premenná, ktorá riadi farbu pozadia zbalenej accordion položky.
--wje-accordion-border	Vlastná CSS premenná, ktorá riadi farbu okraja zbalenej accordion položky.
--wje-accordion-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov accordion položky.
--wje-accordion-background-hover	Vlastná CSS premenná, ktorá riadi farbu pozadia položky pri hover stave.
--wje-accordion-border-hover	Vlastná CSS premenná, ktorá riadi farbu okraja položky pri hover stave.
--wje-accordion-background-expanded	Vlastná CSS premenná, ktorá riadi farbu pozadia rozbalenej accordion položky.
--wje-accordion-border-expanded	Vlastná CSS premenná, ktorá riadi farbu okraja rozbalenej accordion položky.
--wje-accordion-headline-color	Vlastná CSS premenná, ktorá riadi farbu textu hlavičky.
--wje-accordion-content-color	Vlastná CSS premenná, ktorá riadi farbu textu rozbaľovaného obsahu.
--wje-accordion-marker-rotate	Vlastná CSS premenná, ktorá riadi rotáciu toggle markera.

Slots

Názov	Popis
headline	Slot pre hlavný klikateľný obsah hlavičky.
description	Slot pre doplnkový popisný text.
toggle	Slot pre obsah prepínača.
content	Slot pre hlavný alebo rozbaľovaný obsah tela komponentu.