Il est temps de renouer le dialog

Qu’est-ce que l’élément HTML dialog ?

<dialog> est un élément HTML qui représente une boîte de dialogue telle qu’une alerte, une confirmation, un inspecteur ou une sous-fenêtre.
En terme de code, il se présente comme ceci :

<dialog open> 
      <p>Bonjour, Dialog !</p> 
</dialog>

L’élément HTML dialog a une propriété « open » qui détermine l’état actuel du dialog. Si vous supprimez l’attribut, la boîte de dialogue ne sera tout simplement plus visible.

Point de dialog sans JavaScript !

Le défi que nous devons relever avec l’affichage d’une boîte de dialogue est multiple ; il faut pouvoir :

• l’activer/le désactiver (l’afficher ou la masquer),
• stocker son état,
• assombrir l’arrière-plan,
• et désactiver le défilement de la page.

Or à ce jour, que cela soit WHATWG ou le W3C Le World Wide Web Consortium (W3C) est une organisation internationale qui développe des standards ouverts pour assurer la croissance à long terme du web, comme HTML, CSS, et XML. , il n’y a aucune spécification qui définit un système de boutons natifs permettant toutes les actions ci-dessus. Il nous faut donc passer par un peu de Javascript (J’ai dit un peu ! N’allez pas croire que j’ai renié mes convictions).

2 méthodes d’ouvertures

Il y a 2 méthodes JavaScript qui permettent d’afficher un élément HTML dialog.

La méthode showModal() affiche la boîte de dialogue en tant que modal, au-dessus de toutes les autres boîtes de dialogue qui pourraient être présentes. Il s’affiche dans la couche supérieure, avec un arrière plan. Il sera toujours au dessus de tout élément. Toute interaction en dehors du dialog est bloquée et le contenu à l’extérieur est rendu inaccessible. Exemple de fonction d’affichage :

function showModal() { 
      const dialog = document.querySelector('dialog'); 
      dialog.showModal(); 
}

La méthode  show() est légèrement différente en ce sens qu’elle affiche la boîte de dialogue de manière non modale, c’est-à-dire en permettant toujours l’interaction avec le contenu en dehors de la boîte de dialogue.

Même si dialog il y a, à un moment faut quand même la fermer…

Bizarrement, à contrario de l’ouverture, nous pouvons fermer une boite de dialogue avec un simple formulaire HTML sans JavaScript en utilisant la méthode « dialog ». Dès lors, l’action par défaut d’un bouton avec cette méthode consiste à fermer la boîte de dialogue.

<dialog> 
      <p>Bonjour, Dialog !</p> 
      <form method="dialog"> 
            <button>Fermer</button> 
      </form> 
</dialog>

NB : La boîte de dialogue HTML peut également être fermée en appuyant sur « ESC » sur votre clavier. Cependant, il ne peut pas être fermé en cliquant sur le fond.

L’élément HTML dialog et accessibilité

Malgré une implémentation avec JavaScript, l’utilisation de élément HTML dialog avec la méthode showModal() permet de cocher les critères d’ accessibilité L'accessibilité numérique garantit que les sites et applications sont utilisables par tous, y compris les personnes handicapées, via des pratiques comme l'utilisation de texte alternatif et la navigation au clavier. en termes d’UI des fenêtres modales, à savoir :

• A l’ouverture de la boite de dialogue, le focus doit être placé sur un élément au début de la boite. ✓
• Les éléments situés sous la boite de dialogue ne doivent plus être vocalisés. ✓
• On doit pouvoir boucler sur les éléments focusables que contient la boite de dialogue. ✓
• On doit pouvoir refermer la boite de dialogue avec un bouton ou la touche Echap. ✓
• Lorsque l’on referme la modale, on doit se retrouvé positionné au niveau de l’élément qui en a provoqué l’affichage. ✓

Personnalisation d’un élément HTML dialog

Mais en plus de limiter les nombres de lignes JS JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. , cet élément va aussi nous simplifier la vie coté CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. . En effet, si vous pouvez parfaitement utiliser toutes les propriétés CSS classiques pour positionner et customiser votre pop-in ; elle disposera aussi d’une propriété CSS pseudo « ::backdrop » qui vous permettra de changer la couleur et l’opacité de l’arrière plan. Vous disposez même de la propriété « backdrop-filter » pour lui appliquer un effet comme un flouté par exemple.

dialog::backdrop {
      backdrop-filter: blur(25px);
}

De plus, avec là encore une pseudo propriété :modal vous pourrez distinguer les boites de dialogues ouvertes avec showModal() de celles ouvertes avec show()et donc de différencier graphiquement les 2 cas.

L’intérêt de l’élément HTML dialog

Désormais, très bien supporté par les navigateurs comme le confirme Caniuse.com, je vous recommande de vous y intéresser notamment au travers de l’article très complet de CSS-Triks : « Remplacer les boîtes de dialogue JavaScript par le nouvel élément de boîte de dialogue HTML« . Les boites de dialogue font parti des éléments à définir avant d’attaquer la création d’un site internet. Avec cet élément, leur intégration L'intégration consiste à assembler des éléments visuels (HTML, CSS, JavaScript) pour transformer des maquettes graphiques en pages web fonctionnelles et interactives, tout en respectant les standards du web. a le mérite de simplifier à la fois le code JS et aussi CSS. Et comme me l’appris mon mentor :

Moins ya de code :
moins ya de bug !

Sources : towardsdev.com, blog.logrocket.com, web.dev.

Image par Volodymyr Hryshchenko via Unsplash