From db0146b2f43d4a03fde267cbbf589bbdd99d2568 Mon Sep 17 00:00:00 2001
From: YoanRos <98326747+YoanRos@users.noreply.github.com>
Date: Thu, 7 Dec 2023 09:09:47 +0100
Subject: [PATCH] fix: accessibility (#92)

* fix: accessibility

* fix/add linkedin link and precisions alt
---
 components/Footer.js                 |  16 +--
 components/Navigation.js             |   6 +-
 next.config.js                       |   9 +-
 pages/index.js                       | 186 ++++++++++++++++++++-------
 pages/stats.js                       |   7 +
 public/images/icon/external-link.svg |   1 +
 6 files changed, 164 insertions(+), 61 deletions(-)
 create mode 100644 public/images/icon/external-link.svg

diff --git a/components/Footer.js b/components/Footer.js
index b1f2516..395c83e 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -63,7 +63,7 @@ export default function Footer() {
               link="mailto:ozensemble@fabrique.social.gouv.fr"
             /> */}
             <button
-              className="block text-sm font-light mb-2 cursor-pointer"
+              className="block underline text-sm font-light mb-2 cursor-pointer"
               onClick={() => setShowContactPopup(true)}
             >
               → Nous contacter ?
@@ -98,14 +98,14 @@ export default function Footer() {
                 <img
                   className="object-contain"
                   src="images/other/google-play-fr.png"
-                  alt=""
+                  alt="Disponible sur Google Play"
                 />
               </a>
               <a href={IOS_URL}>
                 <img
                   className="object-contain"
                   src="images/other/app-store-fr.png"
-                  alt=""
+                  alt="Télécharger dans l'App Store"
                 />
               </a>
             </div>
@@ -118,28 +118,28 @@ export default function Footer() {
                 <img
                   className="object-contain w-[40px]"
                   src="images/icon/instagram.svg"
-                  alt="instagram"
+                  alt="Vers profil instagram"
                 />
               </a>
               <a href={FACEBOOK_URL}>
                 <img
                   className="object-contain w-[40px]"
                   src="images/icon/facebook.svg"
-                  alt="facebook"
+                  alt="Vers profil facebook"
                 />
               </a>
               <a href={TWITTER_URL}>
                 <img
                   className="object-contain w-[40px]"
                   src="images/icon/X.svg"
-                  alt="twitter"
+                  alt="Vers profil twitter"
                 />
               </a>
               <a href={LINKEDIN_URL}>
                 <img
                   className="object-contain w-[40px]"
                   src="images/icon/linkedin.svg"
-                  alt="linkedin"
+                  alt="Vers profil linkedin"
                 />
               </a>
             </div>
@@ -156,7 +156,7 @@ export default function Footer() {
 const ArrowList = ({ text, link }) => (
   <div className="mb-2">
     <a href={link}>
-      <p className="text-sm font-light">→ {text}</p>
+      <p className="text-sm font-light underline">→ {text}</p>
     </a>
   </div>
 )
diff --git a/components/Navigation.js b/components/Navigation.js
index 82e90ef..cf0eade 100644
--- a/components/Navigation.js
+++ b/components/Navigation.js
@@ -27,7 +27,11 @@ export default function Navigation({ showPopup, setShowPopup }) {
       <nav className="flex items-center justify-between px-5 bg-white fixed w-full h-[70px] top-0 z-0">
         <div>
           <a className="flex-center" href="/">
-            <img className="w-14" src="/images/logo_oz.png" alt="" />
+            <img
+              className="w-14"
+              src="/images/logo_oz.png"
+              alt="Logo principal, cliquez pour accéder à l'accueil"
+            />
           </a>
         </div>
         <div className="items-center justify-center md:flex">
diff --git a/next.config.js b/next.config.js
index 658404a..5b5bff3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  i18n: {
+    locales: ["fr"],
+    defaultLocale: "fr",
+  },
+}
 
-module.exports = nextConfig;
+module.exports = nextConfig
diff --git a/pages/index.js b/pages/index.js
index b53ae38..8d24c8c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -25,14 +25,14 @@ export default function Index() {
                   <img
                     className="object-contain w-full"
                     src="images/other/google-play-fr.png"
-                    alt=""
+                    alt="disponible sur google play"
                   />
                 </a>
                 <a href={IOS_URL}>
                   <img
                     className="object-contain w-full"
                     src="images/other/app-store-fr.png"
-                    alt=""
+                    alt="télécharger dans l'app store"
                   />
                 </a>
               </div>
@@ -55,7 +55,10 @@ export default function Index() {
           <div className="items-center justify-center w-2/3 m-auto md:w-1/2 md:flex pl-[5%] mt-14 md:mt-0">
             <img
               src="images/other/hero.png"
-              alt=""
+              alt="3 affichages écrans décoratifs : 
+              - l'écran suivi composé de graphiques et du récapitulatif des badges
+              - l'écran calendrier indiquant par des icones la réusite d'objectifs quotidiens
+              - l'écran mes activités regroupant les activités disponibles"
               className="max-w-2/3 md:max-w-full md:max-h-[450px] lg:max-h-[600px]"
             />
           </div>
@@ -105,24 +108,33 @@ export default function Index() {
             <p className="text-base text-black">
               Chez Oz Ensemble, l’objectif est de vous redonner la maîtrise de
               votre consommation d’alcool, tout au long de l’année,{" "}
-              <span className="text-oz-pink">
+              <span className="sr-only">
+                Le texte suivant est en gras et de couleur rouge
+              </span>
+              <strong className="text-oz-pink">
                 sans nécessairement promouvoir l’abstinence totale et
                 définitive.
-              </span>
+              </strong>
               <br />
               <br />
               Oz Ensemble s’appuie sur les dernières recommandations de la HAS
               (Haute Autorité de Santé) qui promeut la{" "}
-              <span className="text-oz-pink">
+              <span className="sr-only">
+                Le texte suivant est en gras et de couleur rouge
+              </span>
+              <strong className="text-oz-pink ">
                 réduction des risques alcool
-              </span>{" "}
+              </strong>{" "}
               par les acteurs de la prévention et du soin en addictologie.
               <br />
               <br />
               Oz Ensemble enrichie également le{" "}
-              <span className="text-oz-pink">
+              <span className="sr-only">
+                Le texte suivant est en gras et de couleur rouge
+              </span>
+              <strong className="text-oz-pink">
                 travail de suivi des professionnels
-              </span>{" "}
+              </strong>{" "}
               de santé grâce à l’agenda de consommation que le patient pourra
               vous partager.
             </p>
@@ -175,7 +187,7 @@ export default function Index() {
             <img
               className="w-full"
               src="images/other/january_challenge.png"
-              alt="Et si on faisait le défi de janvier ? Tous ensemble. Première étape : on télécharge l'appli !"
+              alt="Et si on faisait le défi de janvier ? Tous ensemble. Première étape : on télécharge l'appli ! Lancer le téléchargement en cliquant sur cette image"
             />
           </button>
         </div>
@@ -187,35 +199,77 @@ export default function Index() {
                 Qui sommes nous ?
               </h3>
               <p className="text-center my-7">
-                OZ Ensemble est un dispositif expérimental créé par le Dr
-                Géraldine Talbot, médecin addictologue de l'association{" "}
-                <a href="https://capasscite.fr/" className="text-link-style">
+                OZ Ensemble est un dispositif expérimental créé par le{" "}
+                <a
+                  href="https://www.linkedin.com/in/geraldine-talbot-13989b263/"
+                  className=" inline-flex h-4 items-center font-semibold border-b border-black "
+                >
+                  Dr Géraldine Talbot
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le linkedin de Dr Géraldine Talbot"
+                    className="w-4 ml-1"
+                  />
+                </a>
+                , médecin addictologue de l'association{" "}
+                <a
+                  href="https://capasscite.fr/"
+                  className=" inline-flex h-4 items-center font-semibold border-b border-black "
+                >
                   CaPASSCité
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le site de l'association capasscité"
+                    className="w-4 ml-1"
+                  />
                 </a>
                 , financé par l’
-                <a href="https://www.ars.sante.fr/" className="text-link-style">
+                <a
+                  href="https://www.ars.sante.fr/"
+                  className="inline-flex h-4 items-center font-semibold border-b border-black"
+                >
                   ARS
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le site de l'ars"
+                    className="w-4 ml-1"
+                  />
                 </a>
                 , la{" "}
                 <a
                   href="https://www.drogues.gouv.fr/"
-                  className="text-link-style"
+                  className=" inline-flex h-4 items-center font-semibold border-b border-black"
                 >
                   MILDECA
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le portail de la mildeca"
+                    className="w-4 ml-1"
+                  />
                 </a>{" "}
                 et la{" "}
                 <a
                   href="https://www.numerique.gouv.fr/dinum/"
-                  className="text-link-style"
+                  className=" inline-flex h-4 items-center font-semibold border-b border-black"
                 >
                   DINUM
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers la page de la dinum"
+                    className="w-4 ml-1"
+                  />
                 </a>
                 , en collaboration avec la{" "}
                 <a
                   href="https://www.fabrique.social.gouv.fr/"
-                  className="text-link-style"
+                  className=" inline-flex h-4 items-center font-semibold border-b border-black"
                 >
                   Fabrique numérique des ministères sociaux
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le site de la fabrique numérique des ministères sociaux"
+                    className="w-4 ml-1"
+                  />
                 </a>
                 .
               </p>
@@ -226,28 +280,44 @@ export default function Index() {
                   <img
                     className=""
                     src="images/logo_ministeres_sociaux.png"
-                    alt=""
+                    alt="Partenaire les ministères sociaux, accédez à leur site en cliquant sur ce logo"
                   />
                 </a>
               </div>
               <div className="transition duration-500 hover:scale-110 basis-1/4 lg:basis-1/6">
                 <a href="https://www.ars.sante.fr/">
-                  <img className="" src="images/logo_ars.png" alt="" />
+                  <img
+                    className=""
+                    src="images/logo_ars.png"
+                    alt="Partenaire l'agence régionale de santé Ile-de-France, accédez à leur site en cliquant sur ce logo"
+                  />
                 </a>
               </div>
               <div className="transition duration-500 hover:scale-110 basis-1/4 lg:basis-1/6">
                 <a href="https://www.drogues.gouv.fr/">
-                  <img className="" src="images/logo_MILDECA.png" alt="" />
+                  <img
+                    className=""
+                    src="images/logo_MILDECA.png"
+                    alt="Partenaire la MILDECA, accédez au portail de la mildeca"
+                  />
                 </a>
               </div>
               <div className="transition duration-500 hover:scale-110 basis-1/4 lg:basis-1/6">
                 <a href="https://capasscite.fr/association/">
-                  <img className="" src="images/logo_CaPASSCite.png" alt="" />
+                  <img
+                    className=""
+                    src="images/logo_CaPASSCite.png"
+                    alt="Partenaire l'association Capasscité, accédez à leur site en cliquant sur ce logo"
+                  />
                 </a>
               </div>
               <div className="transition duration-500 hover:scale-110 basis-1/4 lg:basis-1/6">
                 <a href="https://www.numerique.gouv.fr/dinum/">
-                  <img className="" src="images/logo_DINUM.png" alt="" />
+                  <img
+                    className=""
+                    src="images/logo_DINUM.png"
+                    alt="Partenaire la direction interministérielle du numérique, accédez à leur site en cliquant sur ce logo"
+                  />
                 </a>
               </div>
             </div>
@@ -264,42 +334,56 @@ export default function Index() {
             </h3>
             <div className="grid gap-5 md:grid-cols-2">
               <div className="flex items-center mx-auto md:mx-0">
-                <a href="files/Affiche_OZ-Ensemble.pdf">
-                  <img src="images/icon/link.svg" alt="" className="w-[30px]" />
+                <a
+                  href="files/Affiche_OZ-Ensemble.pdf"
+                  className="border-b border-black h-5 flex flex-row font-semibold"
+                >
+                  Affiche Oz Ensemble
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le pdf affiche oz ensemble"
+                    className="w-4 ml-1 mt-1"
+                  />
                 </a>
-                <p className="underline font-semibold pl-1">
-                  <a href="files/Affiche_OZ-Ensemble.pdf">
-                    Affiche Oz Ensemble
-                  </a>
-                </p>
               </div>
               <div className="flex items-center mx-auto md:mx-0">
-                <a href="files/AFFICHE_OZ_-_Defi_de_Janvier.pdf">
-                  <img src="images/icon/link.svg" alt="" className="w-[30px]" />
+                <a
+                  href="files/AFFICHE_OZ_-_Defi_de_Janvier.pdf"
+                  className="border-b border-black h-5 flex flex-row font-semibold"
+                >
+                  Affiche Oz Ensemble - Défi de janvier
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le pdf défi de janvier"
+                    className="w-4 ml-1 mt-1"
+                  />
                 </a>
-                <p className="underline font-semibold pl-1">
-                  <a href="files/AFFICHE_OZ_-_Defi_de_Janvier.pdf">
-                    Affiche Oz Ensemble - Défi de janvier
-                  </a>
-                </p>
               </div>
               <div className="flex items-center mx-auto md:mx-0">
-                <a href="files/DEPLIANT-OZ.pdf">
-                  <img src="images/icon/link.svg" alt="" className="w-[30px]" />
+                <a
+                  href="files/DEPLIANT-OZ.pdf"
+                  className="border-b border-black h-5 flex flex-row font-semibold"
+                >
+                  Dépliant Oz Ensemble
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le pdf dépliant d'oz ensemble"
+                    className="w-4 ml-1 mt-1"
+                  />
                 </a>
-                <p className="underline font-semibold pl-1">
-                  <a href="files/DEPLIANT-OZ.pdf">Dépliant Oz Ensemble</a>
-                </p>
               </div>
               <div className="flex items-center mx-auto md:mx-0">
-                <a href="files/Dossier_de_presse_-_2023_-_Defi_de_Janvier.pdf">
-                  <img src="images/icon/link.svg" alt="" className="w-[30px]" />
+                <a
+                  href="files/Dossier_de_presse_-_2023_-_Defi_de_Janvier.pdf"
+                  className="border-b border-black h-5 flex flex-row font-semibold"
+                >
+                  Dossier de presse Oz Ensemble
+                  <img
+                    src="images/icon/external-link.svg"
+                    alt="Icone indiquant une redirection, ici vers le pdf dossier de presse 2023 du défi de janvier"
+                    className="w-4 ml-1 mt-1"
+                  />
                 </a>
-                <p className="underline font-semibold pl-1">
-                  <a href="files/Dossier_de_presse_-_2023_-_Defi_de_Janvier.pdf">
-                    Dossier de presse Oz Ensemble
-                  </a>
-                </p>
               </div>
             </div>
           </div>
@@ -313,7 +397,9 @@ export default function Index() {
 
 const Checklist = ({ title, subtitle }) => (
   <div>
-    <h6 className="text-base font-bold text-oz-pink">✓ {title}</h6>
+    <h6 className="text-base text-oz-pink">
+      <strong>✓ {title}</strong>
+    </h6>
     <p className="text-sm text-black">{subtitle}</p>
   </div>
 )
@@ -323,7 +409,7 @@ const Checklist2 = ({ content }) => (
     <img
       className="mr-3 md:mx-7"
       src="images/icon/check-circle-turqoise-500.svg"
-      alt=""
+      alt="Icone coche turquoise entourée "
     />
     <p className="text-base text-black">{content}</p>
   </div>
diff --git a/pages/stats.js b/pages/stats.js
index 71fc91f..6a26fbb 100644
--- a/pages/stats.js
+++ b/pages/stats.js
@@ -16,6 +16,13 @@ const Stats = () => {
           allowTransparency
         />
       </div>
+      <div>
+        <p className="text-center">
+          L'affichage des données auxquelles vous avez accès est géré par
+          Métabase. L'accessibilité non-conforme de cet affichage est sous le
+          contrôle de Métabase.
+        </p>
+      </div>
       <Footer />
     </div>
   )
diff --git a/public/images/icon/external-link.svg b/public/images/icon/external-link.svg
new file mode 100644
index 0000000..5a827fe
--- /dev/null
+++ b/public/images/icon/external-link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6Zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8Z"/></svg>
\ No newline at end of file