Intro
Accordion er relaterte seksjoner med interaktive overskrifter som lar brukere åpne eller lukke visningen av innholdet under.
Egnet til:
- Samling av innhold for spesielt interesserte
- En liste med ofte stilte spørsmål
Uegnet til:
- Innhold som er så viktig at det ikke bør skjules (eksempelvis feilmeldinger)
- Forklaring av spørsmål i skjema
- Tilfeller med bare ett element
- Å velge mellom ulike valg
Eksempler
Retningslinjer
Innhold
Innholdet i Accordion burde høre sammen. Tenk på det som en liste. Hvis du bruker Accordion for å gruppere mye urelatert innhold blir det vanskeligere for brukeren å finne informasjonen de leter etter.
Du må regne med at innholdet du putter i en Accordion blir oversett. Derfor burde innholdet ikke være avgjørende for at en bruker skjønner helheten i informasjonen du vil formidle.
Lengden på innholdet burde tilsvare rundt ett til to avsnitt. Dette er for å unngå at innholdet blir irrelevant til overskriften den tilhører og at AccordionItemet blir lengre enn hensiktsmessig. Bryt innholdet opp i flere AccordionItems istedenfor å bruke flere overskrifter i en AccordionItem. Ofte kan man vurdere om innholdet burde være en egen side man kan lenke til da det da blir letere å nå.
Innhold i Accordion.Header
Komponenten er kodet med <button /> og vil ikke være et heading-nivå som h2, h3 eller lignende. På grunn av dette må man være forsiktig med hvor rikt eller nyansert innholdet her er da skjermleser ikke vil klare å differensiere mellom tagger, illusrasjoner eller dividers.
Tilgjengelighet
Tastaturinteraksjon
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus til neste element som kan ha fokus |
| Shift+Tab | Flytter fokus til forrige element som kan ha fokus |
| Space | Aktiverer knapp |
| Enter | Aktiverer knapp |
Props
Accordion
- variant?"default" | "neutral"
- headingSize?"large" | "medium" | "small" | "xsmall"
- size?"large" | "medium" | "small"
- indent?boolean
- Whether to indent content or not
- children ReactNode
- Instances of Accordion.Item
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Accordion extends HTMLDivElement
Accordion.Item
- children ReactNode
- Content in Accordion.Item Should include one Accordion.Header and one Accordion.Content
- open? boolean
- Controlled open-state Using this removes automatic control of open-state
- defaultOpen?boolean
- Defaults the accordion to open if not controlled
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Accordion.Item extends HTMLDivElement
Accordion.Header
- children ReactNode
- Text inside Accordion.Header
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Accordion.Header extends HTMLButtonElement
Accordion.Content
- children ReactNode
- Content inside Accordion.Content
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Accordion.Content extends HTMLDivElement
Tokens
| Token | Fallback |
|---|---|
| --ac-accordion-header-bg | --a-surface-transparent |
| --ac-accordion-header-bg-hover | --a-surface-hover |
| --ac-accordion-header-text-hover | inherit |
| --ac-accordion-header-border | --a-border-divider |
| --ac-accordion-item-bg-open | --a-surface-action-subtle |
| --ac-accordion-neutral-item-bg-open | --a-surface-neutral-subtle |
| --ac-accordion-header-icon-bg-hover | --a-surface-neutral-subtle-hover |