Reference generated from the custom elements manifest — 6 properties, 2 slots, 2 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-accordion-panel / ALTITUDE
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 PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
6 ATTR · 2 SLOT · 2 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
Known missing in Figma (altitude-figma-sync MISSING_IN_FIGMA) — needs a bespoke build.
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