feat (accessibility filter) : improvements (#6)

codexarama · May 11, 2021 · 56777dc · 56777dc
1 parent af3694d
commit 56777dc
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 37 deletions.
diff --git a/js/filtres.js b/js/filtres.js
@@ -1,28 +1,40 @@
-// IDENTITFICATION DE L'OPTION CHOISIE
+// AFFICHE NOM OPTION PAR DEFAUT
+document.querySelector('.filter__selected').setAttribute('value', 'Popularité');
+
+// IDENTITFIE OPTION CHOISIE
 // ouvre la box au click
 document.querySelector('.filter').addEventListener('click', function () {
   this.querySelector('.filter__box').classList.toggle('open');
 });
 
-// iteration sur les options : affecte "selected" à celle qui est choisie
+// itere sur les options
 for (const option of document.querySelectorAll('.filter__option')) {
   option.addEventListener('click', function () {
     if (!option.classList.contains('selected')) {
       option.parentNode
+      // retire "selected" sur ancienne option
         .querySelector('.filter__option.selected')
         .classList.remove('selected');
+      // affecte "selected" sur nouvelle option
       option.classList.add('selected');
       option
         .closest('.filter__box')
-        .querySelector('.filter__selected li').textContent = this.textContent;
+        .querySelector('.filter__selected')
+        // affecte classe "button" sur input
+        .classList.add('btn');
+      option
+        .closest('.filter__box')
+        .querySelector('.filter__selected')
+        // affecte nom option choisie dans input
+        .setAttribute('value', this.textContent);
     }
   });
 
-  // ferme la liste d'option si click en dehors de la box
+  // ferme listbox si click hors box
   window.addEventListener('click', function (e) {
     const select = document.querySelector('.filter__box');
     if (!select.contains(e.target)) {
       select.classList.remove('open');
     }
   });
-}
+}
diff --git a/propage.html b/propage.html
@@ -35,24 +35,24 @@
 
     <!-- choix des options de filtrage de la galerie photos -->
       <section class="filter">
-          <p for="select" class="filter__title">Trier par</p>
-          <ul id="select" class="filter__box">
-            <div class="filter__selected btn" role="button" aria-haspopup="listbox", aria-expanded="">
-              <li class="filter__selected--value">Popularité</li>
-              <i class="fas fa-chevron-down filter__arrow"></i>
-            </div>
-            <ul class="filter__options" role="listbox" aria-labelledby="filtres">
-              <div class="filter__option filter__option--1 selected">
-                <li id="likes" value="likes">Popularité</li>
-              </div>
-              <div class="filter__option filter__option--2 ">
-                <li id="date" value="date">Date</li>
-              </div>
-              <div class="filter__option filter__option--3">
-                <li id="titre" value="titre">Titre</li>
-              </div>
+          <p type="text" class="filter__title">Trier par</p>
+          <div
+          id="listbox"
+          class="filter__box"
+          aria-haspopup="listbox"
+          aria-expanded="true">
+            <input type="text" class="filter__selected btn" readonly>
+            <i class="fas fa-chevron-down filter__arrow"></i>
+            <ul
+            class="filter__options"
+            role="listbox"
+            aria-activedescendant="selected"
+            aria-labelledby="listbox">
+              <li id="likes" class="filter__option filter__option--1 selected">Popularité</li>
+              <li id="date" class="filter__option filter__option--2 ">Date</li>
+              <li id="titre" class="filter__option filter__option--3">Titre</li>
             </ul>
-          </ul>
+          </div>
       </section>
 
       <!-- gallerie virtuelle -->

diff --git a/sass/layout/_filter.scss b/sass/layout/_filter.scss
@@ -5,8 +5,8 @@
   margin: 50px 0;
 
   &__title {
-    margin-right: 10px;
-    margin-top: 10px;
+    margin: 10px 10px 0 0;
+    font-size: $s;
   }
 
   &__box {
@@ -17,7 +17,11 @@
     }
   }
 
-  &__box.open .filter__select {
+  &__box.open {
+    border-radius: 3px;
+  }
+
+  &__box.open .filter__selected {
     border-radius: 3px 3px 0 0;
   }
 
@@ -27,23 +31,21 @@
 
   &__selected {
     position: relative;
-
-    & i {
-      position: absolute;
-      right: 10px;
-      padding-left: 5px;
-    }
+    width: 105px;
+    text-align: left;
   }
 
   &__arrow {
+    position: absolute;
+    margin-top: 12px;
+    margin-left: -20px;
     color: white;
     transition: all 0.5s;
   }
 
   &__box.open .filter__arrow {
-    position: absolute;
-    right: 10px;
     transform: rotateX(180deg);
+    margin-top: 11px;
   }
 
   &__options {
@@ -56,10 +58,6 @@
     z-index: 1;
   }
 
-  &__box.open {
-    border-radius: 0 0 3px 3px; // ne fonctionne pas
-  }
-
   &__box.open .filter__options {
     opacity: 1;
     visibility: visible;
@@ -68,6 +66,7 @@
 
   &__option {
     padding: 10px 0;
+    width: 105px;
     border-top: 1px solid white;
     border-left: 10px solid $primaire-bg;
     border-right: 10px solid $primaire-bg;
@@ -80,6 +79,10 @@
       border-right: 10px solid $secondaire-bg;
     }
   }
+
+  &__option .selected {
+    background-color: $secondaire-bg;
+  }
 }
 
 @media only screen and (max-width: 600px) {