feat (accessibility) : get focus on elements (#6)

codexarama · May 13, 2021 · a13df56 · a13df56
1 parent 8e3e80e
commit a13df56
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 19 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/js/index.js b/js/index.js
@@ -23,17 +23,18 @@ const setCard = (photographer) => {
         elmtFactory('img', {
           src: 'images/portraits/' + `${photographer.portrait}`,
           alt: `${photographer.name}`,
+          tabindex: '0'
         })
       ),
-      elmtFactory('h2', { class: 'card__name' }, `${photographer.name}`)
+      elmtFactory('h2', { class: 'card__name', tabindex: '0' }, `${photographer.name}`)
     ),
     elmtFactory(
       'p',
-      { class: 'card__location' },
+      { class: 'card__location', tabindex: '0' },
       `${photographer.city}` + ', ' + `${photographer.country}`
     ),
-    elmtFactory('p', { class: 'card__tagline' }, `${photographer.tagline}`),
-    elmtFactory('p', { class: 'card__price' }, `${photographer.price}` + '€'),
+    elmtFactory('p', { class: 'card__tagline', tabindex: '0' }, `${photographer.tagline}`),
+    elmtFactory('p', { class: 'card__price', tabindex: '0' }, `${photographer.price}` + '€'),
     elmtFactory('ul', { class: 'tags' })
   );
 

diff --git a/js/profile.js b/js/profile.js
@@ -13,14 +13,26 @@ const setId = (photographer) => {
     elmtFactory(
       'div',
       { class: 'id__infos' },
-      elmtFactory('h2', { class: 'card__name' }, `${photographer.name}`),
+      elmtFactory(
+        'h2',
+        { class: 'card__name', tabindex: '0' },
+        `${photographer.name}`
+      ),
       elmtFactory(
         'p',
-        { class: 'card__location' },
+        { class: 'card__location', tabindex: '0' },
         `${photographer.city}` + ', ' + `${photographer.country}`
       ),
-      elmtFactory('p', { class: 'card__tagline' }, `${photographer.tagline}`),
-      elmtFactory('p', { class: 'card__price' }, `${photographer.price}` + '€'),
+      elmtFactory(
+        'p',
+        { class: 'card__tagline', tabindex: '0' },
+        `${photographer.tagline}`
+      ),
+      elmtFactory(
+        'p',
+        { class: 'card__price', tabindex: '0' },
+        `${photographer.price}` + '€'
+      ),
       elmtFactory('ul', { class: 'tags' })
     ),
     elmtFactory('div', { class: 'id__contact' }),
@@ -30,6 +42,7 @@ const setId = (photographer) => {
       elmtFactory('img', {
         src: 'images/portraits/' + `${photographer.portrait}`,
         alt: `${photographer.name}`,
+        tabindex: '0',
       })
     )
   );

diff --git a/propage.html b/propage.html
@@ -49,24 +49,27 @@
             </button>
             <i class="fas fa-chevron-down filter__arrow"></i>
             <ul
-              tabindex="0"
+              tabindex="-1"
               role="listbox"
               aria-labelledby="orderBy"
               class="filter__options">
               <li
+                tabindex="0"
                 role='option'
                 id="Popularité"
                 aria-selected="true"
                 class="filter__option filter__option--1 selected">
                 Popularité
               </li>
               <li
+                tabindex="-1"
                 role='option'
                 id="Date"
                 class="filter__option filter__option--2">
                 Date
               </li>
               <li
+                tabindex="-1"
                 role='option'
                 id="Titre"
                 class="filter__option filter__option--3">

diff --git a/sass/layout/_card.scss b/sass/layout/_card.scss
@@ -16,7 +16,8 @@
       object-fit: cover;
       transition: all 0.5s ease;
 
-      &:hover {
+      &:hover,
+      &:focus {
         transform: scale(1.25);
         transform-origin: 50% 50%;
       }

diff --git a/sass/layout/_gallery.scss b/sass/layout/_gallery.scss
@@ -24,7 +24,8 @@
       object-fit: cover;
       transition: all 0.5s ease;
 
-      &:hover {
+      &:hover,
+      &:focus {
         transform: scale(1.25);
         transform-origin: 50% 50%;
       }
@@ -45,7 +46,10 @@
   }
 
   &__title {
-    width: 100%;
+    width: 88%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__likes {

diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
@@ -22,5 +22,4 @@
     outline: none;
     box-shadow: 0 0 0 2px white, 0 0 0 3px $primaire-bg;
   }
-
 }
diff --git a/sass/layout/_profile.scss b/sass/layout/_profile.scss
@@ -29,7 +29,8 @@
       object-fit: cover;
       transition: all 0.5s ease;
 
-      &:hover {
+      &:hover,
+      &:focus {
         transform: scale(1.25);
         transform-origin: 50% 50%;
       }
@@ -46,7 +47,7 @@
       margin-left: 10px;
       width: 70%;
     }
-    
+
     &__contact {
       margin-top: 10px;
       position: fixed;