Trekkspill (Accordion)

<adb-accordion> grupperer <adb-accordion-item>-elementer i et trekkspill-mønster. Hvert element bruker nativt <details>/<summary> internt — ingen JavaScript er påkrevd for å åpne/lukke.

Eksempel

Natur i Norge (NiN) er utviklet av Artsdatabanken i samarbeid med forskere fra flere norske universiteter og forskningsinstitusjoner.

Det arrangeres årlige introduksjonskurs til NiN ved Universitetet i Oslo (UiO). UiO har også egne emner på Bachelor- og Masternivå som omhandler NiN. NiN inngår også i emner hos andre universitet og høgskoler med utdanningsløp innen naturforvaltning og biologi.

Kursoversikt og påmelding

NiN brukes av miljøforvaltningen, forskere, konsulenter og andre som kartlegger natur i Norge.

NiN beskriver naturtyper og landskap, ikke enkeltarter. Dyr kartlegges gjennom andre systemer som Artskart.

Varianter

Neutral (standard)

Standard variant med hvit bakgrunn.

Rødlista er en oversikt over arter som har risiko for å dø ut i Norge.

Artene vurderes etter kriterier fastsatt av Den internasjonale naturvernunionen (IUCN).

Subtle

Variant med tonet bakgrunn — brukes når trekkspillet er plassert på en hvit flate og trenger visuell avgrensning.

Rødlista er en oversikt over arter som har risiko for å dø ut i Norge.

Artene vurderes etter kriterier fastsatt av Den internasjonale naturvernunionen (IUCN).

Bruk

Enkel gruppe

<adb-accordion>
  <adb-accordion-item heading="Overskrift">
    <p>Innhold som vises når elementet er åpent.</p>
  </adb-accordion-item>
  <adb-accordion-item heading="Overskrift 2">
    <p>Mer innhold.</p>
  </adb-accordion-item>
</adb-accordion>

Forhåndsåpent element

Bruk open-attributtet for å starte med et element åpent:

<adb-accordion-item heading="Åpen ved lasting" open>
  <p>Dette innholdet er synlig fra start.</p>
</adb-accordion-item>

Rich heading via slot

For overskrifter med HTML-innhold, bruk slot="heading" i stedet for heading-attributtet:

<adb-accordion-item>
  <span slot="heading">Overskrift med <strong>uthevet tekst</strong></span>
  <p>Innhold.</p>
</adb-accordion-item>

Med Drupal/Twig

Erstatter eksisterende <details>/<summary>-mønster:

{# Før (ren HTML) #}
<details>
  <summary>{{ title }}</summary>
  {{ content }}
</details>

{# Etter (med designsystemet) #}
<adb-accordion>
  <adb-accordion-item heading="{{ title }}">
    {{ content }}
  </adb-accordion-item>
</adb-accordion>

Standalone (uten gruppe)

Et enkelt element kan brukes uten <adb-accordion>-wrapper:

Fungerer uavhengig med native details/summary-toggle.

API

`<adb-accordion>` — Wrapper

Attributt	Type	Standard	Beskrivelse
`variant`	`neutral \| subtle`	`neutral`	Visuell stil — hvit eller tonet bakgrunn

`<adb-accordion-item>` — Enkelt element

Attributt	Type	Standard	Beskrivelse
`heading`	`string`	—	Overskriftstekst (alternativ til heading-slot)
`help-text`	`string`	—	Sekundærtekst etter overskriften i lettere vekt
`open`	`boolean`	`false`	Om elementet er utvidet

Slots

Slot	Komponent	Beskrivelse
`heading`	`<adb-accordion-item>`	Rich HTML-overskrift (erstatter `heading`-attributtet)
`help-text`	`<adb-accordion-item>`	Sekundærtekst etter overskrift (erstatter `help-text`-attributtet)
`badge`	`<adb-accordion-item>`	Høyrejustert badge-element (f.eks. antall, statusindikator)
(default)	`<adb-accordion-item>`	Innholdet som vises/skjules
(default)	`<adb-accordion>`	`<adb-accordion-item>`-elementer

CSS Parts

/* Tilpass summary-elementet */
adb-accordion-item::part(summary) {
  font-size: 1.25rem;
}

/* Tilpass innholdsområdet */
adb-accordion-item::part(content) {
  padding: 1rem 2rem 2rem;
}

Events

Event	Beskrivelse
`toggle`	Utløses når elementet åpnes eller lukkes

Universell utforming (WCAG 2.1 AA)

Native HTML-semantikk

Komponenten bruker <details> og <summary> — nettleserens innebygde støtte gir:

Tastaturnavigasjon: Enter og Space toggler åpen/lukket-tilstand
Skjermleser: Annonseres som utvidbar/sammenklappbar region automatisk
Ingen ARIA påkrevd: Native HTML-elementer har korrekte roller innebygd

WCAG-kriterier

Kriterium	Nivå	Oppfylt	Merknad
1.3.1 Informasjon og relasjoner	A	✅	Native `<details>`/`<summary>` gir semantisk struktur
1.4.3 Kontrast (minimum)	AA	✅	Tekst og ikoner bruker tokens med tilstrekkelig kontrast
1.4.11 Kontrast for ikke-tekstlig innhold	AA	✅	Kantlinjer og ikoner har tilstrekkelig kontrast
2.1.1 Tastatur	A	✅	Native `<summary>` er fokusbar og aktiverbar med tastatur
2.4.7 Fokus synlig	AA	✅	4 px fokusring på summary
4.1.2 Navn, rolle, verdi	A	✅	Native elementer gir korrekt rolle og tilstand

FOUC-håndtering (Drupal / SSR)

For å unngå visuelt hopp mens komponentene lastes, bruk :not(:defined) i CSS:

/* Skjul uregistrerte komponenter til de er lastet */
adb-accordion:not(:defined),
adb-accordion-item:not(:defined) {
  display: block;
  visibility: hidden;
  min-height: 3rem; /* reserverer plass */
}

Siden <adb-accordion-item> bruker <details>/<summary> internt, vil innholdet uansett være funksjonelt i ren HTML — brukeren kan klikke før JS er lastet.