Apprendre à faire une fenetre modal

Comment créer une fenêtre modale en JavaScript. On aura un lien qui aura une ancre et cet encre sera lier à un identifiant d'un autre element, ainsi le lien nous permettra de faire la correspondance entre le lien et cette boite modal

<a href="#modal1">Ouvrir la boite modal</a>
    <aside id="modal1"></aside>

Maintenant pour le style CSS on a besoin de 2 elements:

• La boite modal qui permettra de representer la boite dans son entiereté avec le fond noir et aura comme classe .modal
• Et le contenus de la boite modal qui aura comme classe .modal__wrapper ainsi on aura

<a href="#modal1">Ouvrir la boite modal</a>
    <aside id="modal1" class="modal">
        <div class="modal-wrapper"><div>
    </aside>

modal-wrapper sera le block blanc qui contiendra notre code HTML Maintenant il faut reflechir au problème lier à l'accessibilité et pour ça il faut regarder le standard aria ARIA: Accessible Rich Internet Application, c'est un standard qui va permettre de definir differents attribut qui permettent d'ameliorer l'accessibilités Il faut indiquer que notre element qui a la class modal par defaut il est caché et pour cela on va mettre un aria-hidden = true c'est qui veut dire que si on a quelqu'un qui regarde le site d'une maniere autrement que par un ecran cette element qui a l'attribut aria-hidden="true" ne va pas apparaitre Ensuite on va rajouter un role="dialog" pour dire que c'est une boite de dialogue. Pour mettre le titre de la boite de dialogue on utilise l'attribut aria-labelledby="" auquel on donne comme valeur l'identifiant du titre contenus dans la dite modal, cela marquera le titre de la boite modal et cela est toujours interessant pour les technologies d'assistance.

Tous les liens qui sont censer ouvrir une boite modal on une classe .js-modal Au niveau de notre JS on va cibler tous les liens qui sont censer ouvrir des boides modal.

On veut enfermer la tabulation dans dans la fenetre Modal et pour cela on va intercepter la pression sur la touche Tab et de rajouter un comportement Manuel qui va enfermer la tabulation. Pour cela on va créer une fonction focusInModal qui va à son initialisation va focusser sur le premier element à l'interieur de la boite modal et pour ca il doit etre capable de recuperer l'ensemble des elements focussable dans note boite modal et donc Quand j'ouvre la boite modal je veux trouver tous les elements qui sont focusable à l'interieur de la boite modal et les sauvegarder