fix (accessibility) : MODALS > escape event (#6)

codexarama · May 25, 2021 · d7f5304 · d7f5304
1 parent aea1aff
commit d7f5304
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 29 deletions.
diff --git a/js/contact.js b/js/contact.js
@@ -36,7 +36,7 @@ modalOpenBtn.addEventListener('click', () => {
   openModal();
 });
 
-// close modal(s)
+// close modal(s) ("click" event)
 const closeModal = () => {
   mainContent.setAttribute('arias-hidden', 'false');
   modal.setAttribute('aria-hidden', 'true');
@@ -51,21 +51,10 @@ modalCloseBtn.forEach((btn) =>
   })
 );
 
-// close modal when escape key is pressed
-// -------------------------------------------------------------------------------
-// Failed to execute 'addEventListener' on 'EventTarget':
-// 2 arguments required, but only 1 present
-// form.addEventListener(
-//   ('keydown',
-//   (e) => {
-//     const keyCode = e.keyCode ? e.keyCode : e.which;
-
-//     if (modal.hasAttributes('aria-hidden') == 'false' && keyCode === 27) {
-//       closeModal();
-//     }
-//   })
-// );
-// -------------------------------------------------------------------------------
+// close modal(s) ("escape" event)
+document.addEventListener('keydown', (keyboardEvent) => {
+  if (keyboardEvent.keyCode == 27) closeModal();
+});
 
 // VERIFICATION DES SAISIES
 const inputs = document.querySelectorAll('.formData input');
@@ -101,11 +90,6 @@ const checkValidity = () => {
 
 checkValidity();
 
-// -------------------------------------------------------------------------------
-// ---------- CHECKVALIDITY NE FONCTIONNE PAS sur TEXTAREA ---------- //
-// ---------- POURQUOI ?! ---------- //
-// -------------------------------------------------------------------------------
-
 // MESSAGES
 // Error
 const dataError = (input, message) => {
@@ -131,7 +115,6 @@ form.addEventListener('submit', function (e) {
     // -------------------------------------------------------------------------------
     // form.reset(); // is not a function
     // -------------------------------------------------------------------------------
-    // closeModal();
   }
 
   console.log(`Prénom : ${firstName.value}`);

diff --git a/js/lightbox.js b/js/lightbox.js
@@ -47,8 +47,9 @@ const displayLightbox = () => {
         // -------------------------------------------------------------------------
         // "fleche gauche" au clavier = "click" sur btn
         // if (event.keycode == 37) prev.click(); // NE FONCTIONNE PAS
-        // retire 'selected' du media choisi
+        // console.log(event.keycode);
         // -------------------------------------------------------------------------
+        // retire 'selected' du media choisi
         selectedMedia.classList.remove('selected');
         // ---------- console.log(selectedMedia);
         // lui affecte index -1
@@ -101,9 +102,7 @@ const displayLightbox = () => {
       // btn "next" visible quand index media < nb total medias
       if (selectedMediaIndex < medias.length) next.style.display = 'block';
       // btn "next" invisible si dernier media choisi
-      if (selectedMediaIndex == medias.length - 1)
-        // if (selectedMediaIndex == mediaLink.length - 1)
-        next.style.display = 'none';
+      if (selectedMediaIndex == medias.length - 1) next.style.display = 'none';
     };
 
     // AFFICHE MEDIA CHOISI DANS LIGHTBOX
@@ -132,10 +131,8 @@ const displayLightbox = () => {
   }
 };
 
-// CLOSE LIGHTBOX
+// CLOSE LIGHTBOX ("clik" event)
 const closeLightbox = () => {
-  // const closeLightbox = (event) => {
-  // if (event.keycode == 27) closeLightbox.onclick(); // NE FONCTIONNE PAS
   lightbox.style.display = 'none';
   lightboxShow.classList.remove('active');
   const medias = document.querySelectorAll('.currentMedia');
@@ -144,3 +141,8 @@ const closeLightbox = () => {
     selectedMedia.classList.remove('selected');
   }
 };
+
+// CLOSE LIGHTBOX ("escape" event)
+document.addEventListener('keydown', (keyboardEvent) => {
+  if (keyboardEvent.keyCode == 27) closeLightbox();
+});