Knapp (Button)

<adb-button> er en Web Component som fungerer i alle rammeverk. Internt bruker den et semantisk korrekt <button>-element, som gir tastaturnavigasjon og skjermleserstøtte gratis. Når href er satt, rendres et <a>-element i stedet — med samme visuelle stil, men korrekt lenke-semantikk.

Varianter

Tre visuelle vektnivåer × to fargeroller:

Primary

Accent

Slett konto

Secondary

Accent

Avbryt sletting

Tertiary

Nøytral

Størrelser

Liten

Medium

Stor

Deaktiverte knapper

Primary

Secondary

Tertiary

Deaktiverte knapper fjernes fra tab-rekkefølgen (native disabled). Bruk disabled bare når årsaken er synlig i konteksten — ellers kan brukere bli forvirret over hvorfor knappen ikke kan aktiveres.

Lenkeknapper (href)

Når href er satt, rendres komponenten som et <a>-element med knappens visuelle stil. Dette gir native lenkeatferd (CMD/CTRL-klikk, åpne i ny fane, etc.) med korrekt semantikk.

Gå til Artsdatabanken

Les mer

Tilbake

Åpne i nytt vindu

Bruk target="_blank" — rel="noopener noreferrer" legges til automatisk for sikkerhet.

<adb-button href="https://artsdatabanken.no" target="_blank">
  Åpne i nytt vindu
</adb-button>

Lenkeliste

Lenkeknapper fungerer godt i en liste med navigasjonsvalg:

Artskart

Nordtaxa

Rødliste

<adb-button href="/artskart" variant="secondary">Artskart</adb-button>
<adb-button href="/nordtaxa" variant="secondary">Nordtaxa</adb-button>
<adb-button href="/rodliste" variant="secondary">Rødliste</adb-button>

Bruk

Vanlig handling

<adb-button variant="primary" color="accent">Lagre endringer</adb-button>
<adb-button variant="secondary" color="accent">Avbryt</adb-button>

Destruktiv handling

Bruk alltid beskrivende tekst på danger-knapper — ikke bare «Bekreft». Fargen alene er ikke tilstrekkelig (WCAG 1.4.1).

<!-- ✅ Riktig: teksten beskriver handlingen -->
<adb-button variant="primary" color="danger">Slett konto</adb-button>

<!-- ❌ Feil: teksten gir ingen kontekst -->
<adb-button variant="primary" color="danger">Bekreft</adb-button>

Ikonknapper

Knapper uten synlig tekst må ha aria-label (WCAG 1.1.1).

<!-- ✅ Riktig -->
<adb-button aria-label="Lukk dialog">
  <svg slot="icon-start" aria-hidden="true">…</svg>
</adb-button>

<!-- ❌ Feil: ingen tilgjengelig navn -->
<adb-button>
  <svg slot="icon-start">…</svg>
</adb-button>

I skjemaer

<form>
  <adb-button type="submit">Send inn</adb-button>
  <adb-button type="reset" variant="tertiary">Tilbakestill</adb-button>
</form>

Disclosure / toggle (aria-controls + aria-expanded)

Bruk aria-controls og aria-expanded for knapper som åpner/lukker innhold — f.eks. dropdown-menyer, accordion-paneler eller sidepaneler.

<adb-button
  aria-controls="filter-panel"
  aria-expanded="false"
  variant="secondary"
>Vis filtre</adb-button>

<div id="filter-panel" hidden>
  <!-- Filterinnhold -->
</div>

Attributtene videresendes til det indre <button>- eller <a>-elementet, slik at skjermlesere korrekt annonserer relasjonen.

API

Attributt	Type	Standard	Beskrivelse
`variant`	`primary \| secondary \| tertiary`	`primary`	Visuell vekt
`color`	`accent \| danger`	`accent`	Fargebruk. Ignoreres av `tertiary`.
`size`	`sm \| md \| lg`	`md`	Størrelse
`disabled`	`boolean`	`false`	Deaktiverer knappen og fjerner den fra tab-rekkefølgen
`type`	`button \| submit \| reset`	`button`	Native `type`-attributt. Ignoreres når `href` er satt.
`href`	`string`	—	Når satt, rendres et `<a>`-element i stedet for `<button>`
`target`	`_self \| _blank \| _parent \| _top`	—	Lenke-mål. Kun brukt med `href`.
`download`	`string`	—	Filnavn for nedlasting. Kun brukt med `href`.
`rel`	`string`	—	Lenkerelasjoner. Automatisk `noopener noreferrer` ved `target="_blank"`.
`aria-label`	`string`	—	Påkrevd når knappen kun inneholder ikon
`aria-controls`	`string`	—	ID-en til elementet knappen styrer (f.eks. dropdown, accordion)
`aria-expanded`	`'true' \| 'false'`	—	Om det kontrollerte elementet er åpent — for disclosure-mønstre

Slots

Slot	Beskrivelse
(standard)	Knappetext
`icon-start`	Ikon før teksten
`icon-end`	Ikon etter teksten

CSS Parts

Bruk ::part(base) for å overstyre stiler utenfra shadow DOM:

adb-button::part(base) {
  letter-spacing: 0.05em;
}

Universell utforming (WCAG 2.1 AA)

Semantikk

Komponenten rendrer alltid et native <button>-element i shadow DOM. Når href er satt, rendres et <a>-element i stedet — med role="button" for konsistent tilgjengelighetsopplevelse. Dette betyr at:

Rollen button er automatisk eksponert til hjelpemidler
Enter og Space aktiverer knappen uten ekstra kode
disabled-attributtet kommuniseres til skjermlesere som «utilgjengelig» eller «deaktivert»

Tastaturnavigasjon

Tast	Handling
`Tab`	Flytt fokus til knappen
`Shift + Tab`	Flytt fokus tilbake
`Enter`	Aktiver knappen
`Space`	Aktiver knappen

Fokusindikator

Fokusringen er implementert etter WCAG 2.4.7 og 2.4.11:

3 px ytre outline (#262F31 — høy kontrast)
2 px offset + 5 px hvit boks-skygge for synlighet mot alle bakgrunner
Vises kun ved tastaturnavigasjon (focus-visible) — ikke ved museklikk

button:focus-visible {
  outline: 3px solid var(--adb-focus-outer, #262F31);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--adb-focus-inner, #FFFFFF);
}

Fargekontrast

Alle varianter oppfyller WCAG 1.4.3 (tekst, AA) og 1.4.11 (UI-komponenter, AA):

Variant	Forgrunnsfarge	Bakgrunnsfarge	Kontrast	Status
Primary accent	`#FFFFFF`	`#005A71`	5,2:1	✅ AA
Primary danger	`#FFFFFF`	`#B80738`	6,8:1	✅ AA
Secondary accent (tekst)	`#005A71`	`#FFFFFF`	5,2:1	✅ AA
Secondary accent (kant)	`#005A71`	`#FFFFFF`	5,2:1	✅ AA (≥3:1)
Secondary danger (tekst)	`#9A0024`	`#FFFFFF`	8,7:1	✅ AA
Secondary danger (kant)	`#B80738`	`#FFFFFF`	6,8:1	✅ AA (≥3:1)
Tertiary	`#262F31`	`#D2DDE0`	9,9:1	✅ AA

Berøringsflatestørrelse

Størrelse	Høyde (ca.)	WCAG 2.5.5 (AAA)	Anbefaling
`sm`	~29 px	❌ Under 44 px	Kun til kompakte grensesnitt
`md`	~40 px	❌ Under 44 px	Standard — tilstrekkelig i praksis
`lg`	~52 px	✅ Over 44 px	Bruk på mobil og i skjemaer

Merk: WCAG 2.1 AA krever ikke 44 px (det er AAA). Men det er god praksis på mobil. Bruk lg i touch-kontekster.

Deaktiverte knapper

disabled-attributtet setter både native HTML disabled og aria-disabled="true". Dette betyr:

Knappen fjernes fra tab-rekkefølgen (kan ikke nås med Tab)
Skjermlesere annonserer den som «utilgjengelig»

Bruk disabled kun når årsaken er synlig — f.eks. et skjema med ugyldig input der valideringsfeilen er synlig. Hvis brukeren ikke forstår hvorfor knappen er deaktivert, er det bedre å la den være aktiv og gi en feilmelding ved klikk.

Fargebruk og `danger`

color="danger" bruker rød farge for å signalisere en destruktiv handling. Rød farge alene er ikke tilstrekkelig — det er en brudd på WCAG 1.4.1 (fargebruk). Alltid bruk beskrivende knappetext som kommuniserer handlingen, f.eks. «Slett konto» fremfor «Bekreft».

WCAG-kriterier

Kriterium	Nivå	Oppfylt	Merknad
1.1.1 Ikke-tekstlig innhold	A	✅	`aria-label` støttes for ikonknapper
1.3.1 Informasjon og relasjoner	A	✅	Native `<button>` — semantisk korrekt
1.4.1 Bruk av farge	A	⚠️	`danger` bruker farge — teksten må beskrive handlingen
1.4.3 Kontrast (minimum)	AA	✅	Alle varianter ≥4,5:1
1.4.11 Kontrast for ikke-tekstlig innhold	AA	✅	Kanter og fokusring ≥3:1
2.1.1 Tastatur	A	✅	Native `<button>` — Enter og Space fungerer
2.4.7 Fokus synlig	AA	✅	3 px fokusring ved `focus-visible`
2.5.3 Etikett i navn	A	✅	Synlig tekst = tilgjengelig navn
4.1.2 Navn, rolle, verdi	A	✅	Rolle: `button`, tilstand: `aria-disabled`

Knapp (Button)

Varianter

Størrelser

Deaktiverte knapper

Lenkeknapper (href)

Åpne i nytt vindu

Lenkeliste

Bruk

Vanlig handling

Destruktiv handling

Ikonknapper

I skjemaer

Disclosure / toggle (aria-controls + aria-expanded)

API

Slots

CSS Parts

Universell utforming (WCAG 2.1 AA)

Semantikk

Tastaturnavigasjon

Fokusindikator

Fargekontrast

Berøringsflatestørrelse

Deaktiverte knapper

Fargebruk og danger

WCAG-kriterier

Fargebruk og `danger`