Eksempler
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.
Props
Modal
- children ReactNode
- open boolean
- onClose () => void
- shouldCloseOnOverlayClick?boolean
- className? string
- closeButton?boolean
- style? Styles
- parentSelector? (() => HTMLElement)
- aria-labelledby? string
- aria-describedby? string
- aria-modal? boolean
- aria-label? string
- ref? Ref<ReactModal>
- Modal content
- Open state for modal
- Callback for modal wanting to close
- If modal should close on overlay click (click outside Modal)
- User defined classname for modal
- Removes close-button(X) when false
- Allows custom styling of ReactModal, in accordance with their typing
- Callback for setting parent element modal will attach to
- Sets aria-label on modal
@warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
- Modal extends ReactModal
Modal.Content
- children ReactNode
- className? string
- ref? Ref<HTMLDivElement>
- Modal.Content content
- Modal.Content extends HTMLDivElement