Correction style modal et TABindex modal

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

css/modal.css

@@ -29,6 +29,10 @@
     width: 50px;
     height: 50px;
     cursor: pointer;
+}       
+.modal__form--BtnClose:hover, .modal__form--BtnClose:focus{
+    transform: scale(1.1);
+    outline: 2px solid #901C1C;
 }
 .modal__form--BtnClose:before{
     display: flex;
@@ -105,4 +109,19 @@ form textarea{
 }
 .text-control[data-error-visible="true"]{
     border: 5px solid #901C1C;
+}
+.contact__form--submitBtn{
+    background-color: #901C1C;
+    color: white;
+    font-size: 18px;
+    font-weight: 700;
+    border: none;
+    border-radius: 5px;
+    width: 42%;
+    height: 68px;
+    cursor: pointer;
+}
+.contact__form--submitBtn:hover, .contact__form--submitBtn:focus{
+    border: #312E2E 2px solid;    
+    transform: scale(1.1);
 }

photographer.html

@@ -53,27 +53,27 @@ <h2>Trier par</h2>
           <div class="modal__form">
             <header>          
                 <h2 class="modal__form--title" aria-labelledby="photographerName" tabindex="1">Contactez-moi</h2>                        
-                <span id="closeModalJS" class="modal__form--BtnClose" role="button" aria-label="clicker pour fermer le formulaire de contact"></span>                 
+                <span id="closeModalJS" class="modal__form--BtnClose" tabindex="1" role="button" aria-label="clicker pour fermer le formulaire de contact"></span>                 
             </header>
             <p id="photographerName" class="modal__form--photographerName"></p>
             <form id="contact__form">
               <div class="contact__form--data">
                 <label id="FirstName" name="firstNameJS">Prénom</label>
-                <input id="firstNameJS" class="text-control" type="text" placeholder="Veuillez saisir votre prénom" aria-placeholder="Veuillez saisir votre prénom"  aria-labelledby="FirstName"/>
+                <input id="firstNameJS" class="text-control" tabindex="2" type="text" placeholder="Veuillez saisir votre prénom" aria-placeholder="Veuillez saisir votre prénom"  aria-labelledby="FirstName"/>
               </div>
               <div class="contact__form--data">
                 <label id="LastName" name="lastNameJS">Nom</label>
-                <input id="lastNameJS" class="text-control" type="text" placeholder="Veuillez saisir votre nom" aria-placeholder="Veuillez saisir votre nom" aria-labelledby="LastName"/>
+                <input id="lastNameJS" class="text-control" tabindex="3" type="text" placeholder="Veuillez saisir votre nom" aria-placeholder="Veuillez saisir votre nom" aria-labelledby="LastName"/>
               </div>
               <div class="contact__form--data">
                 <label id="Email" name="emailJS">Email</label>
-                <input id="emailJS" class="text-control" type="email" placeholder="Veuillez saisir votre adresse mail" aria-placeholder="Veuillez saisir votre adresse mail" aria-labelledby="Email"/>
+                <input id="emailJS" class="text-control" tabindex="4" type="email" placeholder="Veuillez saisir votre adresse mail" aria-placeholder="Veuillez saisir votre adresse mail" aria-labelledby="Email"/>
               </div>
               <div class="contact__form--data">                
                 <label id="Message" name="userMessageJS">Votre message</label>
-                <textarea id="userMessageJS" class="text-control" type="textarea" rows="10" placeholder="Veuillez saisir votre message" maxlength="300" wrap="hard" aria-placeholder="Veuillez saisir votre message 300 caractères maximum" aria-labelledby="Message"></textarea>
+                <textarea id="userMessageJS" class="text-control" tabindex="5" type="textarea" rows="10" placeholder="Veuillez saisir votre message" maxlength="300" wrap="hard" aria-placeholder="Veuillez saisir votre message 300 caractères maximum" aria-labelledby="Message"></textarea>
               </div>
-              <button id="sendFormContactBtn" class="contact_button" type="submit" form="contact__form" aria-label="Bouton envoyer" name="envoyer">Envoyer</button>
+              <button id="sendFormContactBtn" class="contact__form--submitBtn" tabindex="6" type="submit" form="contact__form" aria-label="Bouton envoyer" name="envoyer">Envoyer</button>
             </form>
           </div>
         </div>

scripts/API/api.js

@@ -10,13 +10,23 @@ export default class Api {
   constructor(url){
       this.url = url;
   }
-  async get(){
-    try{
-        const response = await fetch(this.url);
+  async get() {
+    try {
+      const response = await fetch(this.url);
+
+      // Vérifiez l'en-tête Content-Type avant de parser en JSON
+      const contentType = response.headers.get('Content-Type');
+      if (contentType && contentType.includes('application/json')) {
         const data = await response.json();
         return data;
-    } catch(err){
-        throw new Error(err);
+      } else {
+        // Gérer les réponses non-JSON de manière appropriée
+        console.error("Le serveur a renvoyé des données non-JSON:", response.status, await response.text());
+        return null; // Ou lancez une erreur, ou gérez-la d'une autre manière
+      }
+    } catch (err) {
+      console.error("Erreur lors de la récupération des données:", err);
+      return null; // ou lancez une erreur
     }
-}
-};
+  }
+}

scripts/utils/contactForm.js

@@ -38,7 +38,13 @@ export  function closeModal() {
     modal.style.display = 'none';
     mainContainer.style.visibility = 'visible';
   });
-}
+  btn.addEventListener('keydown', (e) => {
+    if(e.key === 'Escape'){
+      modal.style.display = 'none';
+      mainContainer.style.visibility = 'visible';
+    }});
+  }
+
 //Création message d'erreur pour le formulaire et style des input en cas d'erreur
 /**
  * @description Ces fonctions permettent de mettre en forme les champs du formulaire en cas d'erreur