Accordion
4.1.0
Show and hide details by expanding and collapsing content vertically.
Namn | Typ | Beskrivning |
---|---|---|
children * | ReactNode | The content to be displayed when the accordion is expanded. |
className | string | Optional CSS class name. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
defaultExpanded | boolean | If true, expands the accordion by default when the component mounts. Only controls the initial state - subsequent expand/collapse actions will be handled by user interaction. Use this for uncontrolled behavior where you just want to set the initial state. |
disabled | boolean | If true, the component is disabled. |
expanded | boolean | Controls the expanded state of the accordion.
Use this prop along with onChange to create a controlled component where you need to manage the state yourself.
If not provided, the accordion will be uncontrolled and manage its own state internally. |
id * | string | A unique identifier for the <Accordion> .
This is required to correctly associate <AccordionSummary> with <AccordionDetails>
via WAI-ARIA attributes, ensuring proper accessibility for screen readers. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component's content and all interactions will be disabled. |
lang | "sv" |
"en" | Language used for internal translations. |
negativeMargins | boolean | If true, applies negative horizontal margins. |
onChange | (expanded: undefined |
boolean) => void | Callback when accordion is changed. |
onClick | () => void | Callback when the item is clicked. |
sx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
npm install @sj-ab/component-library.ui.accordion
AccordionSummary
presenteras för användaren som en knapp inuti en rubrik:
<h2>
<button type="button" aria-expanded="false">
Varför är tillgänglighet viktigt?
</button>
</h2>
Rubriken gör det möjligt för användare med skärmläsare att hoppa mellan alla accordions och andra rubriker på sidan med tangentbordskommandot "H"
.
Varje utvecklare ansvarar för att Accordion får rätt rubriknivå för att passa i den kontext där den ska visas. Rubriknivåer får aldrig skippas på en sida utan måste följa sin semantiska ordning. Som standard används en h2-rubrik men det kan ändras vid behov med propen headingLevel.
ARIA-attributet aria-expanded
berättar för användare med skärmläsare om komponenten är utfälld eller inte. Det hanteras automatiskt på komponentnivå i AccordionSummary
och behöver inte sättas manuellt.
Namnet på AccordionSummary
som läses upp av skärmläsare kommer automatiskt från dess innehåll.
Accordion kan i vissa fall vara i behov av anpassade fokusmarkeringar – läs mer här: Bra att veta om fokusmarkeringar.
Importer av Accordion
Repos med Accordion
Senaste installerade version av Accordion
Äldsta installerade version av Accordion