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.accordionAccordionSummary 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