Modal
Le composant modal fournit une base solide pour la création de boîtes de dialogue, de popovers, de lightboxes ou autres.
Le composant affiche ses nœuds children
devant un composant d'arrière-plan. La Modal
offre d'importantes fonctionnalités :
- 💄 Gère la superposition de modales.
- 🔐 Crée un backdrop, pour désactiver les interactions sous la modale.
- 🔐 Désactive le scroll de la page quand elle est ouverte.
- ♿️ Gère proprement le focus ; assure l'accessibilité au contenu de la modale jusqu'à sa fermeture.
- ♿ Ajoute automatiquement les rôles ARIA appropriés.
- 📦 5 kB gzippé.
Note de terminologie. Le terme "modal" est parfois utilisé pour signifier "dialogue", mais c'est un terme impropre. Un élément est considéré modal si il bloque l'interaction avec le reste de l'application. A modal window describes parts of a UI.
Si vous créez une boîte de dialogue modale, vous voudrez probablement utiliser le composant Dialog plutôt que d'utiliser directement Modal. Modal est un élément de construction de niveau faible exploitée par les composants suivants :
Modal simple
<button type="button" onClick={handleOpen}>
Open Modal
</button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
Notez que vous pouvez désactiver le contour (souvent bleu ou or) avec la propriété outline : 0
CSS .
Les transitions
L'état ouvert/fermé de la modale peut être animé avec un composant de transition. Ce composant doit respecter les conditions suivantes :
- Être un enfant descendant direct du modal.
- Avoir la propriété
in
. Correspond à l'état ouvert/fermé. - Appeler la propriété de callback
onEnter
lorsque la transition d'entrée démarre. - Appeler la propriété de callback
onExited
lorsque la transition de sortie est terminée. Ces deux fonctions de callback permettent à la modale de retirer le contenu enfant lorsqu'elle est fermée et que la transition est terminée.
Modal a un support intégré pour react-transition-group.
Alternativement, vous pouvez utiliser react-spring.
Modal côté serveur
React doesn't support the createPortal()
API on the server. In order to display the modal, you need to disable the portal feature with the disablePortal
prop:
<Modal
disablePortal
disableEnforceFocus
disableAutoFocus
open
aria-labelledby="server-modal-title"
aria-describedby="server-modal-description"
className={classes.modal}
container={() => rootRef.current}
>
<div className={classes.paper}>
<h2 id="server-modal-title">Server-side modal</h2>
<p id="server-modal-description">If you disable JavaScript, you will still see me.</p>
</div>
</Modal>
Limites
Focus trap
The modal moves the focus back to the body of the component if the focus tries to escape it.
This is done for accessibility purposes, however, it might create issues. In the event the users need to interact with another part of the page, e.g. with a chatbot window, you can disable the behavior:
<Modal disableEnforceFocus />
Accessibilité
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#dialog_modal)
Be sure to add
aria-labelledby="id..."
, referencing the modal title, to theModal
. Additionally, you may give a description of your modal with thearia-describedby="id..."
prop on theModal
.<Modal aria-labelledby="modal-title" aria-describedby="modal-description" > <h2 id="modal-title"> My Title </h2> <p id="modal-description"> My Description </p> </Modal>
The WAI-ARIA authoring practices can help you set the initial focus on the most relevant element, based on your modal content.
Windows under a modal are inert. That is, users cannot interact with content outside an active modal window. Keep in mind that a "modal window" overlays on either the primary window or another modal window. This might create conflicting behaviors.