fix (accessibility) : improvements (#6)

codexarama · May 21, 2021 · 7f6bc93 · 7f6bc93
1 parent a9ca8d0
commit 7f6bc93
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 8 deletions.
diff --git a/js/gallery.js b/js/gallery.js
@@ -42,6 +42,10 @@ const setGallery = (media) => {
         {
           class: 'gallery__likes',
         },
+        elmtFactory('label',
+        {
+          class: 'gallery__likes--label',
+        }),
         elmtFactory('input', {
           class: 'gallery__likes--count',
           type: 'text',

diff --git a/js/likes_counter.js b/js/likes_counter.js
@@ -6,14 +6,13 @@ const likesCount = () => {
   for (let i = 0; i < likes.length; i++) {
     let like = likes[i];
     // ajoute attributs ACCESSIBILITE
-    like.setAttribute('aria-label', 'likes');
-    like.setAttribute('title', 'Add a like');
+    like.setAttribute('title', 'Add like');
 
     like.addEventListener('click', (event) => {
       // ajoute toggle "selected"
       like.classList.toggle('selected');
       // au click sur "like", focus sur input "counter"
-      let likeCounter = like.parentElement.children[0];
+      let likeCounter = like.parentElement.children[1];
       // si "selected"
       if (like.classList.contains('selected')) {
         // affiche mention dans url
@@ -38,6 +37,7 @@ const likesCount = () => {
         // - 1 au compteur global
         totalCounter.value--;
       }
+
       // ACCESSIBILITE btn "like" navigation clavier
       // "entree" = "click"
       if (event.keycode == 13) like.click();

diff --git a/js/pro_page.js b/js/pro_page.js
@@ -18,14 +18,14 @@ function fetchData() {
         id = urlId.get('id');
         return id;
       };
-      console.log(getId()); // n° id
+      // console.log(getId()); // n° id
 
       // ----- gestion donnees ----- //
       // RECUPERE LES DONNEES DU PHOTOGRAPHE CHOISI
       const photographerData = data.photographers.filter(
         (elmt) => elmt.id == getId()
       )[0];
-      console.log(photographerData); // array data by ID
+      // console.log(photographerData); // array data by ID
 
       // AFFICHE SON PROFIL
       setId(photographerData);
@@ -34,7 +34,7 @@ function fetchData() {
       const photographerWorks = data.media.filter(
         (elmt) => elmt.photographerId == getId()
       );
-      console.log(photographerWorks); // array media by ID
+      // console.log(photographerWorks); // array media by ID
 
       // ----- gallery section  ----- //
       // AFFICHE SA GALLERIE SELON FILTRE CHOISI
@@ -96,7 +96,38 @@ function fetchData() {
       };
       launchGallery();
 
-      // openLightbox();
+      // ----- labels + inputs likes counter ----- //
+      function setAttributes(elmt, attribute) {
+        for (let key in attribute) {
+          elmt.setAttribute(key, attribute[key]);
+        }
+      }
+
+      // LABELS : ajout id & for
+      const likeCounterLabel = document.querySelectorAll(
+        '.gallery__likes--label'
+      );
+      // console.log(likeCounterLabel);
+      for (let i = 0; i < likeCounterLabel.length; i++) {
+        let label = likeCounterLabel[i];
+        // console.log(label);
+        setAttributes(label, {
+          id: 'likes-counter' + i,
+          for: 'likes' + i,
+        });
+      }
+
+      // INPUTS : ajout id
+      const likeCounterInput = document.querySelectorAll(
+        '.gallery__likes--count'
+      );
+      for (let i = 0; i < likeCounterInput.length; i++) {
+        let input = likeCounterInput[i];
+        // console.log(input);
+        setAttributes(input, {
+          id: 'likes' + i,
+        });
+      }
 
       // ----- footer section  ----- //
       // AFFICHE NOMBRE TOTAL DE LIKES
@@ -115,7 +146,7 @@ function fetchData() {
       // ----- contact form  ----- //
       // NOM ACCESSIBLE
       const formAria = document.querySelector('#form-dialog');
-      formAria.setAttribute('aria-label', 'contacter + photographerData.name')
+      formAria.setAttribute('aria-label', 'contacter + photographerData.name');
       // AFFICHE NOM PHOTOGRAPHE EN TITRE DU FORMULAIRE
       const formName = document.querySelector('.form__body--name');
       formName.textContent = photographerData.name;

diff --git a/propage.html b/propage.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <head>
   <meta charset="UTF-8" />
+  <html lang="fr">
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="Site web de photographes freelance" />