A11y-dialog

Petite présentation d’une librairie javascript légère et flexible qui permet de créer des fenêtres de dialogue.

A11y-dialog est un script léger (1,3 Ko), qui permet d’éviter l’utilisation de JQuery lorsque l’on a un besoin assez basique au niveau des fenêtres de dialogue.

HTML / Markup

Tout d’abord, on définit le code HTML de notre fenêtre:

<-- Le container de notre fenêtre -->
<div id="notre-id" aria-labelledby="notre-id-titre"
  aria-hidden="true" class="dialog-container">
   <!-- L'overlay pour notre fenêtre -->
   <div class="dialog-overlay" data-a11y-dialog-hide></div>
   <!-- Le contenu de notre fenêtre -->
   <div role="document">
      <!-- Le bouton de fermeture de la fenêtre -->
      <button data-a11y-dialog-hide aria-label="Close this dialog window">
      &times;
      </button>
      <!--  Le titre de notre fenêtre -->
      <h1 id="notre-id-titre">Notre titre</h1>
      <!-- Le contenu! -->
      <div class="dialog-content">
          ...
      </div>
   </div>
</div>

Instancier notre fenêtre

De base, tous les éléments avec l’attribut « data-a11y-dialog » sont instanciés comme des fenêtres 🙂

Bon dans certains, il peut être nécessaire d’instancier notre fenêtre ultérieurement:

// On récupère l'élément HTML correspondant à notre fenêtre
const element = document.getElementById('notre-id')
;

// On instancie notre fenêtre 
const dialog = new A11yDialog(element);

// Affiche la fenêtre
dialog.show()

// Cache la fenêtre
dialog.hide()

Conclusion

Pour conclure, cette micro-librairie fait le job quand on a un besoin assez basique.

A11y-dialog sur Github.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *