Error Summary

Når en innsending stopper, skal brukeren få vite hvorfor, og komme til feltet med ett klikk. Serveren skriver overskriften og lista. Komponenten gjør de to tingene nettleseren ikke gjør selv: flytter fokus hit når boksen kommer til syne, og gir fokus til selve kontrollen når en lenke følges.

To veier til den samme markupen

Lages markupen med JavaScript, gir fs.errorSummary() boksen klassen, role="alert" og tabindex="-1", ferdig i HTML-en. Blir den til uten JavaScript, holder det med <fs-error-summary> rundt en overskrift og en liste: komponenten setter de tre, og klassen på overskriften. Fokus hit, og videre til feltet, kommer fra komponenten i begge tilfeller. Se Markup og oppførsel.

// main.ts, kjøres én gang når appen starter
import { defineFsErrorSummary } from "@fristil/designsystem/error-summary"
import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/error-summary.css"

defineFsErrorSummary()

Slik tar du den i bruk

Prøv den

Ren HTML

<!-- Stilarkene siden trenger. Uten byggesteg er det `<link>`, ikke
     `import`: en nettleser slår ikke opp et pakkenavn. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/ramme/error-summary/error-summary.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/label/label.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/input/input.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/button/button.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<form novalidate>
  <!-- Klassen, role="alert" og tabindex="-1" setter komponenten. -->
  <fs-error-summary id="feil" hidden>
    <h2></h2>
    <ul class="fs-list"></ul>
  </fs-error-summary>

  <label class="fs-label" for="epost">E-postadresse</label>
  <input class="fs-input" id="epost" type="email" />
  <button class="fs-button">Send søknad</button>
</form>

<!-- Én gang for hele appen, i sidemalen. Ikke én gang per komponent. -->
<script type="module">
  import { defineFsErrorSummary } from
    "https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/components/ramme/error-summary/fs-error-summary.js"

  defineFsErrorSummary()
</script>

<script type="module">
  const boks = document.getElementById("feil")

  function visFeil(feilene) {
    boks.querySelector("ul").innerHTML = feilene
      .map((f) => `<li><a href="#${f.id}">${f.melding}</a></li>`)
      .join("")

    // Overskriften og hidden skrives her, slik en server ville gjort det.
    if (feilene.length > 0) {
      boks.querySelector("h2").textContent =
        feilene.length === 1 ? "Skjemaet har én feil" : `Skjemaet har ${feilene.length} feil`
    }
    boks.hidden = feilene.length === 0
  }
</script>

Komponenten flytter fokus hit i det hidden tas bort.

React

// src/fristil.d.ts, gir <fs-error-summary> typer i JSX
import "@fristil/designsystem/react-jsx"

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/error-summary.css"

import { fs } from "@fristil/designsystem/react"
import { defineFsErrorSummary } from "@fristil/designsystem/error-summary"

defineFsErrorSummary()

type Feil = { id: string; melding: string }

export function Feiloppsummering({ feilene }: { feilene: Feil[] }) {
  const boks = fs.errorSummary({ count: feilene.length, id: "feil" })

  return (
    <fs-error-summary {...boks.host}>
      <h2 {...boks.title}>
        {feilene.length === 1 ? "Skjemaet har én feil" : `Skjemaet har ${feilene.length} feil`}
      </h2>
      <ul {...fs.list()}>
        {feilene.map((f) => (
          <li key={f.id}><a href={`#${f.id}`}>{f.melding}</a></li>
        ))}
      </ul>
    </fs-error-summary>
  )
}

Astro

---
import { fs } from "@fristil/designsystem"

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/error-summary.css"

const boks = fs.errorSummary({ count: feilene.length, id: "feil" })
---

<fs-error-summary {...boks.host}>
  <h2 {...boks.title}>Skjemaet har {feilene.length} feil</h2>
  <ul {...fs.list()}>
    {feilene.map((f) => <li><a href={`#${f.id}`}>{f.melding}</a></li>)}
  </ul>
</fs-error-summary>

<script>
  import { defineFsErrorSummary } from "@fristil/designsystem/error-summary"
  defineFsErrorSummary()
</script>

Datastar

<!-- Stilarkene siden trenger. Uten byggesteg er det `<link>`, ikke
     `import`: en nettleser slår ikke opp et pakkenavn. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/ramme/error-summary/error-summary.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

<!-- Én gang for hele appen, i sidemalen. Ikke én gang per komponent. -->
<script type="module">
  import { defineFsErrorSummary } from
    "https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/components/ramme/error-summary/fs-error-summary.js"

  defineFsErrorSummary()
</script>

<fs-error-summary id="feil" hidden>
  <h2></h2>
  <ul class="fs-list"></ul>
</fs-error-summary>

Serveren sender hele boksen på nytt når skjemaet valideres, med overskriften og lista ferdig utfylt, og uten hidden når det finnes feil. Komponenten oppdager at boksen ble synlig og flytter fokus dit.

Markupen

const feil = fs.errorSummary({ count: feilene.length, id: "feil" })

<fs-error-summary class="fs-error-summary" role="alert" tabindex="-1" id="feil">
  <h2 class="fs-error-summary__title">Skjemaet har to feil</h2>
  <ul class="fs-list">
    <li><a href="#epost">Skriv en e-postadresse med krøllalfa</a></li>
    <li><a href="#fodselsdato">Skriv datoen som dag, måned og år</a></li>
  </ul>
</fs-error-summary>

Overskriften og lista skriver serveren. Komponenten lagde overskriften tidligere selv, og da forsvant den ved første oppdatering fra serveren, uten å komme tilbake. Klassen, role="alert" og tabindex="-1" skriver fs.errorSummary() når markupen lages med JavaScript; ellers setter komponenten dem, og klassen på overskriften, og setter dem tilbake om en patch tar dem. Har serveren skrevet en annen rolle, står den. Se Markup og oppførsel.

Er det ingen feil, setter byggefunksjonen hidden på boksen. En tom oppsummering med overskriften «Skjemaet har 0 feil» er verre enn ingen.

Lenkene peker på feltets id

Hver lenke i lista skal peke på id-en til kontrollen som feilet. Peker den på en <label>, følger komponenten ledeteksten videre til kontrollen, enten den peker med for eller omslutter den.

<li><a href="#fodselsdato">Skriv datoen som dag, måned og år</a></li>
...
<input class="fs-input" id="fodselsdato" type="date">

Klasser du kan style

Klasse	Hva det er
.fs-error-summary	Selve boksen. Ligger på <fs-error-summary>
.fs-error-summary__title	Overskriften over lista

Variabel	Reserve
--fs-error-summary-padding	var(--fs-spacing-4)
--fs-error-summary-radius	var(--fs-spacing-1)

.fs-error-summary {
  --fs-error-summary-padding: var(--fs-spacing-6);
}

Tilgjengelighet

Boksen er role="alert", så den leses opp når den kommer til syne. Den har tabindex="-1" for å kunne få fokus uten å bli en tabbestopp.

To ting er lette å glemme, og begge er grunnen til at komponenten finnes:

• Fokus flyttes til boksen når den blir synlig. Uten det vet ikke den som hører siden at innsendingen stoppet. Sett data-autofocus="false" hvis du ikke vil ha det. Attributtet heter ikke autofocus, fordi det er en boolsk egenskap på elementet, og React 19 setter egenskapen i stedet for attributtet. Da ville avslaget ikke virket. Signalet er at hidden tas bort. Står boksen synlig fra før når skjemaet feiler på nytt, må appen slå hidden på og av, eller kalle focus() selv. Komponenten flytter ikke fokus av at lista endrer seg, for da ville en oppsummering som krymper mens brukeren retter, rykket fokus ut av feltet. Ett unntak: landet ikke fokus første gang, fordi boksen sto i et skjult panel, prøver den igjen ved neste endring i lista, men bare når ingen står i et felt. Mangler tabindex på boksen, setter komponenten den.
• Fokus går til selve kontrollen når en lenke følges. En vanlig ankerlenke ruller bare dit, og neste tastetrykk fortsetter der fokus sto før, altså i oppsummeringen.

Komponenten kobler seg også på lenker serveren sender inn senere, så en oppsummering som oppdateres mens brukeren retter, fortsetter å virke.