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?
- Type:
"default" | "neutral"
- Default:"default"
headingSize?
- Type:
"large" | "medium" | "small" | "xsmall"
- Default:"small"
size?
- Type:
"large" | "medium" | "small"
- Default:"medium"
indent?
- Type:
boolean
- Default:true
- Description:
children
- Type:
ReactNode
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Accordion.Item
children
- Type:
ReactNode
- Description:
open?
- Type:
boolean
- Description:
defaultOpen?
- Type:
boolean
- Default:false
- Description:
onOpenChange?
- Type:
((open: boolean) => void)
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
Accordion.Header
children
- Type:
ReactNode
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement>
- Description:
Accordion.Content
children
- Type:
ReactNode
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description:
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 |