refactor (accessibility) : LIKES events improvements (#6)

codexarama · Jun 10, 2021 · 4c298a2 · 4c298a2
1 parent a08e6d3
commit 4c298a2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 10 deletions.
diff --git a/js/likes_counter.js b/js/likes_counter.js
@@ -18,6 +18,7 @@ const likesCount = () => {
       let likesAnnouncer = like.parentElement.children[2];
       // si "selected"
       if (like.classList.contains('selected')) {
+        likeCounter.style.border = '';
         // affiche mention dans url
         location.hash = "j'aime";
         // ACCESSIBILITE
@@ -28,15 +29,16 @@ const likesCount = () => {
         likeCounter.value++;
         // modifie apparence input
         likeCounter.style.color = '#db8876';
-        // ACCESSIBILITE focus sur annonciateur nb likes
+        // ACCESSIBILITE
+        // focus sur annonciateur nb likes
         likesAnnouncer.focus();
-        likesAnnouncer.textContent = likeCounter.value + ' likes';
         // signale correspondance element lu
         // likeCounter.style.boxShadow = '0 0 0 2px white, 0 0 0 4px #db8876';
+        likesAnnouncer.textContent = likeCounter.value + ' likes';
         // + 1 au compteur global
         totalCounter.value++;
-
       } else {
+        likeCounter.style.border = '';
         // affiche mention dans url
         location.hash = "je n'aime plus";
         // ACCESSIBILITE
@@ -50,12 +52,11 @@ const likesCount = () => {
         // ACCESSIBILITE
         // focus sur annonciateur nb likes
         likesAnnouncer.focus();
-        likesAnnouncer.textContent = likeCounter.value + ' likes';
         // signale correspondance element lu
         // likeCounter.style.boxShadow = '0 0 0 2px white, 0 0 0 4px #901c1c';
+        likesAnnouncer.textContent = likeCounter.value + ' likes';
         // - 1 au compteur global
         totalCounter.value--;
-
       }
 
       // ACCESSIBILITE btn "like" navigation clavier

diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
@@ -111,11 +111,6 @@
       font-size: inherit;
       font-weight: $bold;
       color: $secondaire-txt;
-
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 0 2px white, 0 0 0 4px $primaire-bg;
-      }
     }
   }
 }