Modal

Om komponenten

Modal er en dialogboks som vises over innholdet på siden. Komponenten brukes html-elementet <dialog>, hvor standard oppførsel er å sette fokus på det første fokuserbare elementet i dialogen. Dette er ofte ‘lukk’ knappen, og derfor har vi valgt å sette autofocus på denne knappen. Det anbefales å alltid vise ‘Lukk’-knappen.

Husk på

• Modal er en dialogboks som vises over innholdet på siden. Denne bør ikke ha fokus i starten, men får fokus når den åpnes.
• Sørg for at det alltid er en synlig og enkel måte å lukke modalen på.
• Interagerbare elementer inni modalen må kunne navigeres med tastatur.
• For at man skal kunne bruke ‘Esc’ for å navigere ut av modalen, så må modalen åpnes gjennom den innebygde showModalfunksjonen. Sjekk kodeeksemplene for å se hvordan det gjøres.
• Fokus bør ikke forsvinne ut av modalen når den er åpnet.
• Ved åpnet, og så lukket modal, bør fokus returnere til samme element som trigget visning av modal.
• Ved knapp med type=submit(dette vil typisk være ‘Lagre’-knapper), er det viktig at man har <form method="dialog"> ... </form> elementet wrappet rundt. Modalen vil lukke seg når man submitter en <form> automatisk.
• Modalen skal ekspanderes og ta full bredde ved mindre skjerm (576px eller 36rem).
  Sjekkliste

  Får modalen fokus når den åpnes?

  Er det en synlig måte å lukke modalen på?

  Går det å navigere med tastatur når man først er inni modalen?

  Kan man bruke 'Esc'-knappen for å lukke modalen?

  Forblir fokus i modalen ved tastaturnavigering, og returneres den til første interagerbar element når man tabber seg gjennom?

  Returnerer fokus til samme element som trigget visning av modalen?

  Hvis du har en `submit`-knapp, bruker du en `form` element med `method='dialog'` for å wrappe denne?

Les mer

• MDN - dialog element