16052023 | correctif aria-labels OpenClassrooms-Student-Center#1

OgdenRichard · May 16, 2023 · 2fec522 · 2fec522
1 parent 62ba984
commit 2fec522
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git a/js/templates/GridElement.js b/js/templates/GridElement.js
@@ -64,7 +64,7 @@ export default class GridElement extends MediaTemplate {
    * @returns {void}
    */
   setMediaAriaAttributes = () => {
-    this.figure.firstChild.ariaLabel = `${this.title}, closeup view`;
+    this.figure.firstChild.ariaLabel = `${this.title}, vue agrandie`;
   };
 
   /**
@@ -78,7 +78,7 @@ export default class GridElement extends MediaTemplate {
     this.likesCounter.role = 'button';
     this.likesCounter.ariaPressed = 'false';
     this.likesCounter.setAttribute('tabindex', '0');
-    this.likesCounter.ariaLabel = `${this.title} ${this.likes} likes`;
+    this.likesCounter.ariaLabel = `${this.title} nombre de likes ${this.likes}`;
     this.likesCounter.appendChild(p);
   };
 
@@ -101,7 +101,7 @@ export default class GridElement extends MediaTemplate {
             ? 'user-liked'
             : 'media-likes';
           this.likesCounter.lastChild.textContent = likes;
-          this.likesCounter.ariaLabel = `${this.title} ${likes} likes`;
+          this.likesCounter.ariaLabel = `${this.title}nombre de likes ${likes}`;
           this.likesCounter.ariaPressed = `${userliked}`;
           event.stopPropagation();
           this.GridSubject.fire(nb, this.id);

diff --git a/js/templates/PhotographerCard.js b/js/templates/PhotographerCard.js
@@ -41,7 +41,7 @@ export default class PhotographerCard extends PhotographerTemplate {
    */
   buildFigcaption = () => {
     const figcaption = document.createElement('figcaption');
-    figcaption.ariaLabel = `about ${this.photographer.name}`;
+    figcaption.ariaLabel = `À propos de ${this.photographer.name}`;
     figcaption.appendChild(this.buildTitle('h3'));
     figcaption.appendChild(this.buildParagraph('tagline'));
     figcaption.appendChild(this.buildParagraph('price'));

diff --git a/js/templates/PhotographerCounter.js b/js/templates/PhotographerCounter.js
@@ -32,7 +32,7 @@ export default class PhotographerCounter {
   update(...args) {
     this.likes += args[0];
     this.likesElement.textContent = `${this.likes}`;
-    this.likesElement.ariaLabel = `${this.likes} likes total`;
+    this.likesElement.ariaLabel = `nombre total de likes ${this.likes}`;
   }
 
   /**
@@ -65,7 +65,7 @@ export default class PhotographerCounter {
     const priceElement = document.createElement('p');
     priceElement.className = 'photographer_price';
     priceElement.textContent = `${this.price}€ / jour`;
-    priceElement.ariaLabel = `photographer daily rate`;
+    priceElement.ariaLabel = `tarif journalier`;
     priceElement.setAttribute('tabindex', '0');
     return priceElement;
   };

diff --git a/photographer.html b/photographer.html
@@ -13,13 +13,13 @@
 
 <body>
   <header id="banner-header">
-    <a href="./index.html" aria-label="Fisheye Home Page">
+    <a href="./index.html" aria-label="Fisheye page d'accueil">
       <img src="./assets/images/logo.png" class="logo" alt="Fisheye Home page" role="link" />
     </a>
   </header>
   <main id="main">
-    <section class="photographer-header" aria-label="Photographer informations">
-      <button class="contact_button" id="launchform" aria-label="Contact Me">Contactez-moi</button>
+    <section class="photographer-header" aria-label="Informations sur le photographe">
+      <button class="contact_button" id="launchform" aria-label="Contactez Moi">Contactez-moi</button>
     </section>
     <div role="menubar" class="sort-menu">
       <p id="sort-title">Trier par </p>
@@ -32,7 +32,7 @@
         </ul>
       </div>
     </div>
-    <section class="gallery_section" aria-label="Portfolio"></section>
+    <section class="gallery_section" aria-label="Portfolio du photographe"></section>
   </main>
   <div class="background" id="background_modal">
     <div class="contact-modal" id="contact-form" role="dialog" aria-labelledby="contact-headline" tabindex="0">
@@ -46,26 +46,27 @@ <h1 id="contact-headline">Contactez-moi</h1>
           <label for="firstname">Prénom</label>
           <input type="text" name="firstname" id="firstname" aria-required="true" />
           <label for="lastname">Nom</label>
-          <input type="text" name="lastname" id="lastname" aria-required="true"/>
+          <input type="text" name="lastname" id="lastname" aria-required="true" />
           <label for="email">Email</label>
-          <input type="email" name="email" id="email" aria-required="true"/>
+          <input type="email" name="email" id="email" aria-required="true" />
           <label for="message">Votre message</label>
           <textarea name="message" id="message" aria-required="true"></textarea>
         </div>
         <button class="contact_button" id="sendform">Envoyer</button>
       </form>
-      <img src="./assets/icons/close.svg" alt="close form button" class="closeform" id="closeform" role="button" aria-label="close form" tabindex="0" />
+      <img src="./assets/icons/close.svg" alt="close form button" class="closeform" id="closeform" role="button"
+        aria-label="Fermer le formulaire" tabindex="0" />
     </div>
-    <section class="lightbox" id="lightbox" role="dialog" aria-label="image closeup view">
+    <section class="lightbox" id="lightbox" role="dialog" aria-label="Vue lightbox des images">
       <div class="lightbox-wrapper">
         <div class="btn-wrapper">
-          <div class="btn-navigate backwards" id="btn-backwards" aria-label="previous media" tabindex="0"></div>
+          <div class="btn-navigate backwards" id="btn-backwards" aria-label="media précédent" tabindex="0"></div>
         </div>
         <div class="slider-container" id="slider-container"></div>
         <div class="btn-wrapper">
-          <div class="btn-navigate forwards" id="btn-forwards" aria-label="next media" tabindex="0"></div>
+          <div class="btn-navigate forwards" id="btn-forwards" aria-label="prochain media" tabindex="0"></div>
         </div>
-        <div class="closelightbox" id="closelightbox" aria-label="close lightbox" tabindex="0">
+        <div class="closelightbox" id="closelightbox" aria-label="Fermer la lightbox" tabindex="0">
           <img src="./assets/icons/closered.svg" alt="close modal button">
         </div>
       </div>