Modal@navikt/ds-react

betaOppdatert 9. juni 2022

Installasjon

aksel.nav.no

Props

Modal

Required
children
Type	`ReactNode`
Description	Modal content

Required
open
Type	`boolean`
Description	Open state for modal

Required
onClose
Type	`() => void`
Description	Callback for modal wanting to close

shouldCloseOnOverlayClick
Type	`boolean`
Description	If modal should close on overlay click (click outside Modal)
Default	`true`

className
Type	`string`
Description	User defined classname for modal

closeButton
Type	`boolean`
Description	Removes close-button(X) when false
Default	`true`

parentSelector
Type	`(() => HTMLElement)`
Description	Callback for setting parent element modal will attach to

aria-labelledby
Type	`string`

aria-describedby
Type	`string`

aria-modal
Type	`boolean`

aria-label
Type	`string`
Description	Sets aria-label on modal @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'

ref
Type	`Ref<ReactModal>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Modal.Content

Required
children
Type	`ReactNode`
Description	Modal.Content content

className
Type	`string`

ref
Type	`Ref<HTMLDivElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Retningslinjer

Husk å enten bruke aria-label eller aria-labelledby. Om det er brukt en beskrivende tittel i Modalen så er aria-labelledby et godt valg for å tilgjengeliggjøre den for skjermlesere.

Sikre skjermlesere

Husk å sette hvilken element modal skal mountes på. Dette må gjøres for å sikre at skjermlesere ikke leser opp innholdet bak modal når den er åpen.

// Eksempelbruk i en standard nextjs app
useEffect(() => {
  Modal.setAppElement("#__next");
},[])

Modal@navikt/ds-react

Installasjon

Props

Retningslinjer

Sikre skjermlesere

Var denne artikkelen til hjelp?