Reference generated from the custom elements manifest — 6 properties, 2 slots, 2 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-accordion-panel / SOUTHLEFT
Loading preview
Label
Accordion Panel
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYNOT TRACKED
NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEaccordion-panel--DefaultPASS
Advanced statesAXE2 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 3 STORIES.
import '@southleft/al-web-components/components/accordion-panel';
import { ALAccordionPanel } from '@southleft/al-react';
API — 6 PROPS6 DOCUMENTED
PROPTYPEDEFAULT
isActivebooleanActive property
1. Panel is open when set to true. Close when set to false—
isDisabledbooleanDisabled property—
isLastbooleanIs last?
- Dynamically set by the ALAccordion
- Removes the bottom border if it is the last item—
idxnumberIndex of the panel
- Dynamically set by the ALAccordion0
ariaControlsstringAria Controls attribute
- Dynamically set for A11y—
ariaLabelledBystringAria Labelled By attribute
- Dynamically set for A11y—
SLOTS2
SLOTDESCRIPTION
headerThe panel heading content inside the disclosure button.
(default)The accordion panel content
EVENTS2
EVENTDESCRIPTIONTYPE
onAccordionPanelOpenFired when the panel expands. Detail: `{ index, expanded }` — the panel's index within the accordion and its new expanded state.CustomEvent
onAccordionPanelCloseFired when the panel collapses. Detail: `{ index, expanded }` — the panel's index within the accordion and its new expanded state.CustomEvent