nve-modal

En modal dialog for å vise viktig innhold eller handlinger som krever brukerens oppmerksomhet. Kan brukes til bekreftelser, skjemaer, ekstra informasjon eller andre oppgaver som skal løses før brukeren går videre. Komponenten bruker det native dialog-elementet med showModal(), låser siden mens den er åpen og viser et backdrop bak innholdet.

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-modal.

html

<nve-button onclick="this.nextElementSibling.show()">Vis modalen</nve-button>
<nve-modal label="Overskrift"> Dette er en modal dialog. </nve-modal>

Retningslinjer

Bruk alltid label på nve-modal. label brukes som modalens tilgjengelige navn og kobles til den native dialogen. Dette gjør at skjermlesere kan presentere modalen med en tydelig tittel.
Bruk modal kun når innholdet krever brukerens fulle oppmerksomhet. En modal avbryter arbeidsflyten og gjør resten av siden utilgjengelig mens den er åpen. Den egner seg derfor best til viktige valg, bekreftelser, korte skjemaer eller informasjon brukeren må forholde seg til før hen kan gå videre.
Unngå å bruke modal til innhold som ikke blokkerer arbeidsflyten. Hvis innholdet bare gir ekstra informasjon, forhåndsvisning eller sekundære valg, er det ofte bedre å bruke en mindre inngripende komponent.
Vurder nøye om modalen skal kunne lukkes ved klikk på bakgrunnen. For enkle og ufarlige handlinger kan closedBy="any" være passende. For viktige handlinger, bekreftelser eller oppgaver der brukeren lett kan miste arbeid, bør du som regel bruke closedBy="closerequest" (som er standard) eller closedBy="none".
La modalen være i DOM-en og åpne den med show(). Ikke bruk open for å styre modalen. nve-modal bygger på native <dialog> og er laget for å åpnes programmatisk via show(), slik at du får riktig modal oppførsel, fokusflyt og backdrop fra nettleseren.
Sørg for at modalen alltid har en tydelig måte å lukkes på. Brukeren bør alltid ha tilgang til en synlig lukkemekanisme, for eksempel lukkeknappen i toppen eller en avbryt-knapp i footer.
Hold innholdet kort og oppgaveorientert. Modaler fungerer best når innholdet er tydelig, avgrenset og lett å fullføre. Hvis innholdet blir langt eller komplekst, kan en vanlig side eller en annen type visning være et bedre valg.
Tenk gjennom hvilket element som skal få fokus når modalen åpnes. Standardfokus er ikke alltid det beste valget. Ved behov bør du bruke autofocus eller eksplisitt fokusplassering for å støtte arbeidsflyten og gjøre innholdet lettere å forstå.

nve-modal bygger på det native <dialog>-elementet. show()-metoden (som åpner nve-modal) kaller native showModal(), som gir dialogen modal oppførsel. Dette gjør at nettleseren automatisk viser en backdrop bak dialogen og setter resten av siden som inert.

Det betyr at brukeren ikke kan samhandle med noe annet på siden enn modalen (og nettleserens egne kontroller). I tillegg låser nve-modal sidescrolling mens modalen er åpen, slik at brukeren ikke kan scrolle innholdet som er satt til inert.

Følgende native dialog-attributter støttes:

closedBy

Følgende native dialog-attributter støttes ikke:

open – I henhold til HTML-spesifikasjonen bør dette attributtet ikke brukes til å åpne eller lukke en modal dialog (lenke). nve-modal eksponerer fortsatt en skrivebeskyttet open-property, slik at utviklere kan lese om modalen er åpen eller ikke (ved behov).
returnValue – den tilfører unødvendig kompleksitet, og våre bruksområder for dialoger har ikke behov for denne funksjonaliteten.

Følgende native dialog-metoder støttes:

close() (lenke)
requestClose() (lenke)
showModal()(lenke) eksponeres gjennom show()

Følgende native dialog-hendelser støttes:

cancel (lenke)
close (lenke)

Eksempler

Lukkemåte

Bruk closedBy for å velge hvordan modalen kan lukkes:

any – tillater lukking ved klikk på bakgrunnen, Esc og utviklerdefinerte lukkemekanismer (for eksempel en lukkeknapp).
closerequest (standard) – tillater lukking med Esc eller utviklerdefinerte lukkemekanismer, men ikke ved klikk på bakgrunnen.
none – modalen kan kun lukkes ved en utviklerdefinert lukkemekanisme (for eksempel en lukkeknapp eller et kall til close()).

html

<nve-button onclick="this.nextElementSibling.show()">Vis modalen</nve-button>
<nve-modal label="Overskrift" closedBy="any"> Dette er en modal dialog. </nve-modal>

Størrelse

Man kan velge mellom default (som er standard og ikke trenger å skrives) eller compact.

html

<nve-button onclick="this.nextElementSibling.show()">Vis kompakt modal</nve-button>
<nve-modal label="Overskrift" size="compact"> Dette er en modal dialog. </nve-modal>

Ikon foran label

Bruk start-icon-slottet for å vise et ikon foran ledeteksten.

html

<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
<nve-modal label="Overskrift">
  <nve-icon name="info" slot="start-icon"></nve-icon>
  Innhold
</nve-modal>

Ikon bak label

Bruk end-icon-slottet for å vise et ikon bak ledeteksten.

html

<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
<nve-modal label="Overskrift">
  <nve-icon name="info" slot="end-icon"></nve-icon>
  Innhold
</nve-modal>

Det er egne spor for å legge innhold i bunnen av modalen.

html

<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
<nve-modal label="Overskrift">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
  et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
  facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
  aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
  <div slot="footer">
    <nve-button variant="primary" onclick="this.parentElement.parentElement.close()">Ok</nve-button>
    <nve-button disabled>Slett alt</nve-button>
  </div>
</nve-modal>

Autofokus på et interaktivt element i modalen

Som standard settes fokus på det første fokuserbare elementet i modalen når den åpnes. I de fleste tilfeller vil dette være lukkeknappen.

Noen ganger kan det være mer hensiktsmessig å sette fokus på et annet element, for eksempel en «OK»-knapp i en modal som bare viser ekstra informasjon eller leder brukeren videre til neste steg. I slike tilfeller kan du bruke autofocus på elementet som skal få fokus først. Elementet må selv støtte autofocus, noe de fleste HTML-elementer og våre webkomponenter gjør.

html

<nve-button onclick="this.nextElementSibling.show()">Vis dialogen</nve-button>
<nve-modal label="Overskrift">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
  et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
  facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
  aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
  <div slot="footer">
    <nve-button variant="primary" autofocus onclick="this.parentElement.parentElement.close()">Ok</nve-button>
  </div>
</nve-modal>

Tilgjengelighet

nve-modal bruker det native modale <dialog>-elementet og får derfor modal dialogoppførsel og tilhørende tilgjengelighetsegenskaper fra nettleseren.

Alle modaler bør ha et synlig element med knapp-oppførsel som lukker modalen, for eksempel en lukkeknapp eller en avbryt-knapp. Derfor bør lukkeknappen som standard ikke fjernes.

nve-modal setter aria-labelledby på det native modale <dialog>-elementet og kobler dette til label-propertyen i nve-modal. Derfor er label påkrevd.

Fokus

Når modalen åpnes, flyttes fokus til et element inne i modalen. Som regel vil fokus settes på det første fokuserbare elementet, men det er ikke alltid det som gir best brukeropplevelse. Hvor fokus bør plasseres først, avhenger av innholdet og hva brukeren skal gjøre i modalen.

Fokus blir ikke aktivt låst inne i modalen. Brukeren kan fortsatt flytte fokus til nettleserens egne kontroller, for eksempel faner, adressefelt eller navigasjonsknapper, mens modalen er åpen. Dette er i tråd med hvordan native modale <dialog>-elementer fungerer, og vi forsøker derfor ikke å innføre en egen fokusfelle.

Hvis modalen inneholder mye tekst eller flere semantiske strukturer, som lister, tabeller eller flere avsnitt, kan det være bedre å sette fokus på et statisk element øverst i innholdet i stedet for på den første knappen. Da kan brukere av hjelpemidler lettere lese og forstå innholdet i riktig rekkefølge. I slike tilfeller kan du for eksempel bruke tabindex="-1" på overskriften eller første avsnitt og flytte fokus dit når modalen åpnes.

Det samme gjelder hvis innholdet er så langt at starten av modalen kan forsvinne ut av syne dersom fokus settes direkte på det første interaktive elementet. Da kan det være mer hensiktsmessig å fokusere et statisk element øverst i modalen først.

Hvis modalen brukes til en handling som er vanskelig å angre, som sletting av data eller bekreftelse av en viktig handling, kan det være lurt å sette fokus på det minst destruktive valget først, for eksempel en avbryt-knapp. Hvis modalen derimot bare gir ekstra informasjon eller lar brukeren gå videre i en prosess, kan det være mer hensiktsmessig å sette fokus på handlingen som oftest brukes, som en «OK»- eller «Fortsett»-knapp.

Når modalen lukkes, returneres fokus til elementet som åpnet den.

Du kan lese mer her.

Tastaturinteraksjon

Når modalen åpnes, flyttes fokus inn i modalen. Hvilket element som får fokus først, avhenger av innholdet i modalen og om et element er merket med autofocus.

Tab flytter fokus til neste tabbable element i modalen.
Står fokus på det siste tabbable elementet, flyttes fokus tilbake til det første.
Shift + Tab flytter fokus til forrige tabbable element i modalen.
Escape lukker modalen.

Spor

Navn	Beskrivelse
hovedinnholdet	(body)
end-icon	ikon etter overskriften
start-icon	ikon foran overskriften
footer	feltet i bunnen hvor knappene er plassert
header-actions	valgfrie handlinger i headeren

Hendelser

Navn	Arvet fra	Beskrivelse
cancel		Når brukeren trykker Escape. Kan forhindres med `preventDefault()`
close		Når dialogen lukkes (fra `dialog.close()`)

Egenskaper

Navn	Type	Beskrivelse
testId	string \| undefined = undefined
label	string = ''	Teksten i overskriften. Den er påkrevd
closedBy	'any' \| 'none' \| 'closerequest' = undefined	Bestemmer hvordan modalen kan lukkes. Standard er 'closerequest' som er satt opp når modalen åpnes
size	'default' \| 'compact' = 'default'	Sett størrelse på kortet

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
show				Viser dialogen
close				Skjuler dialogen.
requestClose				Sender en forespørsel om å lukke dialogen. Emitter cancel-eventet for å indikere at lukking er forespurt og close-eventet når dialogen faktisk lukkes.

Deler

Navn	Beskrivelse
base	Dialog-elementet
overlay	Overlegget bak dialogen - den skal ikke styles
panel	Dialogens panel
header	Headeren
title	Tittelen
header-actions	Header handlinger
close-button	Lukk-knappen
body	Innhold
footer	Footer

nve-modal

Feil / oppgaver / PR ​

Retningslinjer ​

Eksempler ​

Lukkemåte ​

Størrelse ​

Ikon foran label ​

Ikon bak label ​

Knapper i footer ​

Autofokus på et interaktivt element i modalen ​

Tilgjengelighet ​

Fokus ​

Tastaturinteraksjon ​

Spor ​

Hendelser ​

Egenskaper ​

Metoder ​

Deler ​

Feil / oppgaver / PR

Retningslinjer

Eksempler

Lukkemåte

Størrelse

Ikon foran label

Ikon bak label

Knapper i footer

Autofokus på et interaktivt element i modalen

Tilgjengelighet

Fokus

Tastaturinteraksjon

Spor

Hendelser

Egenskaper

Metoder

Deler