Comment utiliser l'élément HTMLlt;dialog>

Dans le développement front-end, la création ou l'utilisation de composants d'interface utilisateur prédéfinis est une tâche courante. Cependant, ces composants comportent souvent des limites. Ils sont généralement liés à des cadres spécifiques et nécessitent une logique complexe et non standardisée. Pendant longtemps, les composants de base de l'interface utilisateur, tels que les fenêtres de dialogue, reposaient sur des implémentations personnalisées ou, dans des cas plus simples, sur des méthodes JavaScript intégrées telles que alert(), prompt() et confirm().

La bonne nouvelle est que vous pouvez désormais implémenter ce composant à l'aide du module

Élément HTML, qui fait partie de la norme HTML5 et est entièrement pris en charge par tous les navigateurs modernes.

Le La balise HTML, introduite en mai 2013 dans le cadre d'un projet de travail du W3C, a été lancée avec des éléments interactifs tels que et pour relever les défis courants de l’interface utilisateur. Sorti en 2014,

était initialement pris en charge uniquement dans Google Chrome et Opera. Prise en charge complète de

dans Firefox et Safari n'est arrivé qu'en mars 2022, retardant son adoption dans les projets de production. Cependant, avec plus de deux ans de support par les principaux navigateurs, le

L'élément est maintenant suffisamment stable pour remplacer le

personnalisé

Explorons les fonctionnalités de

plus en détail.

Principaux aspects de l'utilisation

Le La balise crée une boîte de dialogue masquée par défaut qui peut fonctionner comme une popup ou une fenêtre modale.

Les fenêtres contextuelles sont fréquemment utilisées pour afficher des notifications simples, telles que des messages de cookies, des alertes Toast qui disparaissent, des info-bulles ou des éléments de menu contextuel par clic droit.

Les fenêtres modales aident les utilisateurs à se concentrer sur des tâches spécifiques, telles que les notifications et les avertissements nécessitant une confirmation de l'utilisateur, les formulaires interactifs complexes et les lightbox pour les images ou les vidéos.

Les popups n'empêchent pas l'interaction avec la page, tandis que les fenêtres modales superposent le document, atténuent l'arrière-plan et bloquent d'autres actions. Ce comportement fonctionne sans styles ni scripts supplémentaires ; la seule différence est la méthode utilisée pour ouvrir la boîte de dialogue.

Méthodes d'ouverture de fenêtre de dialogue

— fenêtre contextuelle :

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— fenêtre modale :

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Dans les deux cas, l'ouverture de la fenêtre

La balise définit son attribut open sur true. Le définir directement ouvrira la boîte de dialogue sous forme de fenêtre contextuelle et non modale. Pour afficher des fenêtres modales, vous devez utiliser la méthode appropriée. Aucun JavaScript n'est nécessaire pour créer une fenêtre contextuelle initialement ouverte.

<dialog open>Hi, I'm a popup!</dialog>

Essayez-le :

• Ouverture d'une popup à l'aide de la méthode .show() : https://codepen.io/alexgriss/pen/zYeMKJE
• Ouverture d'une fenêtre modale à l'aide de la méthode .showModal() : https://codepen.io/alexgriss/pen/jOdQMeq
• Modification directe de l'attribut open : https://codepen.io/alexgriss/pen/wvNQzRB

Approches de fermeture de la fenêtre de dialogue

Les fenêtres de dialogue se ferment de la même manière, quelle que soit la manière dont elles ont été ouvertes. Voici quelques façons de fermer une fenêtre contextuelle ou modale :

— avec la méthode .close() :

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— en déclenchant l'événement submit dans un formulaire avec l'attribut method="dialog" :

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— en appuyant sur la touche Échap :

La fermeture avec Esc ne fonctionne que pour les fenêtres modales. Il déclenche d'abord l'événement d'annulation, puis se ferme, ce qui permet d'avertir facilement les utilisateurs des modifications non enregistrées dans les formulaires.

Essayez-le :

• Fermer une boîte de dialogue avec la méthode close : https://codepen.io/alexgriss/pen/GRzwjaV
• Fermeture d'une boîte de dialogue via le formulaire de soumission : https://codepen.io/alexgriss/pen/jOdQVNV
• Fermer une fenêtre modale avec la touche Echap : https://codepen.io/alexgriss/pen/KKJrNKW
• Empêcher la fermeture d'une fenêtre modale avec Esc : https://codepen.io/alexgriss/pen/mdvQObN

Valeur de retour à la fermeture

Lors de la fermeture d'une boîte de dialogue avec un formulaire à l'aide de l'attribut method="dialog", vous pouvez capturer la valeur du bouton de soumission. Ceci est utile si vous souhaitez déclencher différentes actions en fonction du bouton cliqué. La valeur est stockée dans la propriété returnValue.

Essayez-le : https://codepen.io/alexgriss/pen/ZEwmBKx

Un aperçu plus approfondi de son fonctionnement

Approfondissons les mécanismes de la fenêtre de dialogue et les détails de sa mise en œuvre dans le navigateur.

La mécanique d'une popup

Ouvrir une sous forme de popup avec .show() ou l'attribut open le positionne automatiquement avec position: absolue dans le DOM. Les styles CSS de base, comme les marges et les bordures, sont appliqués à l'élément, et le premier élément pouvant avoir le focus à l'intérieur de la fenêtre obtiendra automatiquement le focus via l'attribut autofocus. Le reste de la page reste interactif.

La mécanique d'une fenêtre modale

Une fenêtre modale est conçue et fonctionne de manière plus complexe qu'une popup.

Superposition de documents

Lors de l'ouverture d'une fenêtre modale avec .showModal(), le

L'élément est rendu dans une couche HTML spéciale qui couvre toute la zone visible de la page. Cette couche est appelée couche supérieure et est contrôlée par le navigateur. Dans certains navigateurs comme Google Chrome, chaque modal est rendu dans un nœud DOM distinct au sein de cette couche, visible dans l'inspecteur d'éléments.

Le concept de calques fait référence au contexte d'empilement, qui définit la façon dont les éléments sont positionnés le long de l'axe Z par rapport à l'utilisateur. La définition d'une valeur z-index en CSS crée un contexte d'empilement pour un élément, où la position de ses enfants est calculée dans ce contexte. Les fenêtres modales sont toujours au sommet de cette hiérarchie, aucun z-index n'est donc nécessaire.

En savoir plus sur le contexte d'empilage sur MDN.

Pour en savoir plus sur les éléments rendus dans la couche supérieure, visitez MDN.

Blocage de documents

Lorsqu'un élément modal est rendu dans la couche supérieure, un pseudo-élément ::backdrop est créé avec la même taille que la zone visible du document. Cette toile de fond empêche l'interaction avec le reste de la page, même si la règle CSS pointer-events: none est définie.

L'attribut inerte est automatiquement défini pour tous les éléments à l'exception de la fenêtre modale, bloquant les actions de l'utilisateur. Il désactive les événements de clic et de mise au point et rend les éléments inaccessibles aux lecteurs d'écran et autres technologies d'assistance.

En savoir plus sur l'attribut inerte sur MDN.

Comportement de concentration

Lorsque le modal s'ouvre, le premier élément pouvant être focalisé à l'intérieur obtient automatiquement le focus. Pour modifier l'élément initialement ciblé, vous pouvez utiliser les attributs autofocus ou tabindex. Définir tabindex pour l'élément de dialogue lui-même n'est pas possible, car c'est le seul élément de la page où la logique inerte ne s'applique pas.

Une fois la boîte de dialogue fermée, le focus revient sur l'élément qui l'a ouverte.

Résoudre les problèmes UX avec les fenêtres modales

Malheureusement, l'implémentation native du

L'élément ne couvre pas tous les aspects de l'interaction avec les fenêtres modales. Ensuite, j'aimerais passer en revue les principaux problèmes UX qui peuvent survenir lors de l'utilisation de fenêtres modales et comment les résoudre.

Blocage du défilement

Même si la fenêtre modale HTML5 native crée un pseudo-élément ::backdrop qui bloque l'interaction avec le contenu en dessous, le défilement de la page est toujours actif. Cela peut distraire les utilisateurs, il est donc recommandé de couper le contenu du corps lorsque le modal s'ouvre :

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Une telle règle CSS devra être ajoutée et supprimée dynamiquement à chaque fois que la fenêtre modale est ouverte et fermée. Ceci peut être réalisé en manipulant une classe contenant cette règle CSS :

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Vous pouvez également utiliser le sélecteur :has si son statut de support répond aux exigences du projet.

<dialog open>Hi, I'm a popup!</dialog>

Essayez-le : https://codepen.io/alexgriss/pen/XWOyVKj

Fermer la boîte de dialogue en cliquant en dehors de la fenêtre

Il s'agit d'un scénario UX standard pour une fenêtre modale et il peut être implémenté de plusieurs manières. Voici deux façons de résoudre ce problème :

Une méthode basée sur le comportement du pseudo-élément ::backdrop

Cliquer sur le pseudo-élément ::backdrop est considéré comme un clic sur l'élément de dialogue lui-même. Par conséquent, si vous enveloppez l'intégralité du contenu de la fenêtre modale dans un fichier

puis couvrez l'élément de dialogue lui-même, vous pouvez déterminer où le clic a été dirigé — sur l'arrière-plan ou sur le contenu de la fenêtre modale.

N'oubliez pas de réinitialiser les styles de remplissage et de bordure par défaut du navigateur pour le

élément pour empêcher la fenêtre modale de se fermer en cas de clics accidentels :

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Maintenant, nous appliquons les styles courants pour les bordures et les marges de la fenêtre modale uniquement au wrapper interne.

Nous devons écrire une fonction qui fermera la fenêtre modale uniquement en cliquant sur le fond, pas sur l'élément wrapper interne :

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Essayez-le : https://codepen.io/alexgriss/pen/mdvQXpJ

Une méthode basée sur la détermination de la taille de la fenêtre de dialogue

Cette méthode est différente de la première, qui nécessitait un wrapper supplémentaire pour le contenu modal. Ici, vous n'avez pas besoin d'emballage supplémentaire. Il suffit de vérifier si la position du curseur sort de la zone de l'élément lorsqu'on clique dessus :

<dialog open>Hi, I'm a popup!</dialog>

Essayez-le : https://codepen.io/alexgriss/pen/NWoePVP

Styliser la fenêtre de dialogue

Le L'élément est plus flexible en termes de style que de nombreux éléments HTML natifs. Voici quelques exemples de style des fenêtres de dialogue :

Styliser la toile de fond à l'aide du sélecteur ::backdrop : https://codepen.io/alexgriss/pen/ExrOQEO

Ouverture et fermeture de la fenêtre de dialogue animée : https://codepen.io/alexgriss/pen/QWYJQJO

Fenêtre modale sous forme de barre latérale : https://codepen.io/alexgriss/pen/GRzwxgr

Accessibilité

Pendant longtemps, le

L'élément avait quelques problèmes d'accessibilité, mais il fonctionne désormais bien avec les principales technologies d'assistance telles que les lecteurs d'écran (VoiceOver, TalkBack, NVDA).

Lorsqu'un

est ouvert, le focus est déplacé vers la boîte de dialogue par le lecteur d'écran. Pour les fenêtres modales, le focus reste dans la boîte de dialogue jusqu'à sa fermeture.

Par défaut, le

L'élément est reconnu par les technologies d'assistance comme ayant l'attribut ARIA role="dialog". Une boîte de dialogue modale sera reconnue comme ayant l'attribut ARIA aria-modal="true".

Voici quelques façons d'améliorer l'accessibilité de la fenêtre

élément :

aria-labelledby

Incluez toujours un titre dans les fenêtres de dialogue et spécifiez l'attribut aria-labelledby pour l'attribut

élément, avec la valeur définie sur l'identifiant du titre.

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

Si vous devez styliser le pseudo-élément ::backdrop, assurez-vous d'appliquer également ces styles à l'élément .backdrop correspondant pour garantir la compatibilité avec les anciens navigateurs :

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

Il est recommandé de connecter le polyfill via une importation dynamique et uniquement pour les navigateurs ne prenant pas en charge le

élément :

<dialog open>Hi, I'm a popup!</dialog>

Conclusion

Le

element est un outil relativement simple mais puissant pour implémenter des fenêtres modales et des popups. Il est bien pris en charge par les navigateurs modernes et peut être utilisé avec succès dans des projets basés à la fois sur Vanilla JS et sur n'importe quel framework frontend.

Dans cet article, nous avons abordé les sujets suivants :

• Problèmes du l'élément résout ;
• Interaction avec le
  API de l'élément ;
• Comment fonctionnent les fenêtres de dialogue au niveau du navigateur ;
• Problèmes courants avec les modaux et leurs solutions ;
• Amélioration de l'accessibilité de la fenêtre
  élément pour les technologies d'assistance comme les lecteurs d'écran ;
• Extension de la prise en charge du navigateur pour l'option
  élément.

Enfin, je vous invite à découvrir l'implémentation du composant de fenêtre modale en JS pur, qui prend en compte les principaux aspects abordés dans l'article : https://codepen.io/alexgriss/pen/abXPOPP

C'est tout ce que je voulais partager sur le travail avec l'interface

Élément HTML. J'espère que cet article vous incitera à expérimenter !