fix: ♿ fix accessibilities issues

dnum-mi · Oct 7, 2024 · fc6cda8 · fc6cda8
1 parent 9471ae1
commit fc6cda8
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 54 deletions.
diff --git a/frontend/src/assets/logo_dnum.jpg b/frontend/src/assets/logo_dnum.jpg
diff --git a/frontend/src/assets/logo_dtnum.jpg b/frontend/src/assets/logo_dtnum.jpg
diff --git a/frontend/src/components/HeaderMain.vue b/frontend/src/components/HeaderMain.vue
@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { useRoute } from "vue-router";
 
 import type { DsfrHeader } from "@gouvminint/vue-dsfr";
+import basegunLogo from "@/assets/basegun.png";
 
 const route = useRoute();
 
@@ -20,7 +21,7 @@ const logoText = computed<
 
 const quickLinks: InstanceType<typeof DsfrHeader>["$props"]["quickLinks"] = [
   {
-    label: "Important",
+    label: "Informations",
     to: "/",
   },
   {
@@ -40,12 +41,21 @@ const quickLinks: InstanceType<typeof DsfrHeader>["$props"]["quickLinks"] = [
     to: "/accessibilite",
   },
 ];
+
+const operatorImgStyle: InstanceType<
+  typeof DsfrHeader
+>["$props"]["operatorImgStyle"] = {
+  width: "30%",
+};
 </script>
 
 <template>
   <DsfrHeader
     :class="{ 'marianne-only': !wholeLogo }"
     :quick-links="quickLinks"
+    :operator-img-src="basegunLogo"
+    :operator-img-style="operatorImgStyle"
+    operator-img-alt="Logo basegun"
     :show-beta="false"
     service-title=" "
     :home-to="{ name: 'StartPage' }"

diff --git a/frontend/src/components/OnboardingSwiper.vue b/frontend/src/components/OnboardingSwiper.vue
@@ -3,7 +3,7 @@
     <swiper-slide>
       <img
         src="@/assets/basegun_green.png"
-        alt=""
+        alt="Logo Basegun"
         height="250"
         class="swiper-logo"
         data-testid="basegun-logo"
@@ -12,50 +12,82 @@
         <ul class="swiper-ul fr-text--md">
           <li class="swiper-li">
             Basegun est une application
-            <span class="swiper-green-highlight">prototype</span> en cours de
-            développement par le Ministère de l’Intérieur et des Outre-Mer.
+            <strong
+              ><span class="swiper-green-highlight">prototype</span></strong
+            >
+            en cours de développement par le Ministère de l’Intérieur et des
+            Outre-Mer.
           </li>
           <li class="swiper-li">
             A ce jour, Basegun
-            <span data-v-f74c6fe1="" class="swiper-green-highlight"
-              >prend en compte uniquement
-            </span>
-            l'identification d'<span
-              data-v-f74c6fe1=""
-              class="swiper-green-highlight"
-              >armes à feu létales</span
-            >, d'<span data-v-f74c6fe1="" class="swiper-green-highlight"
-              >armes d'alarme</span
+            <strong
+              ><span data-v-f74c6fe1="" class="swiper-green-highlight"
+                >prend en compte uniquement
+              </span></strong
+            >
+            l'identification d'<strong
+              ><span data-v-f74c6fe1="" class="swiper-green-highlight"
+                >armes à feu létales</span
+              ></strong
+            >, d'<strong
+              ><span data-v-f74c6fe1="" class="swiper-green-highlight"
+                >armes d'alarme</span
+              ></strong
+            >
+            et d'<strong
+              ><span data-v-f74c6fe1="" class="swiper-green-highlight"
+                >armes factices type airsoft</span
+              >.</strong
             >
-            et d'<span data-v-f74c6fe1="" class="swiper-green-highlight"
-              >armes factices type airsoft</span
-            >.
           </li>
           <li>
             Basegun propose également de les
-            <span class="swiper-green-highlight">mettre en sécurité</span> grâce
-            à des
-            <span class="swiper-green-highlight">tutoriels personnalisés</span>.
+            <strong
+              ><span class="swiper-green-highlight"
+                >mettre en sécurité</span
+              ></strong
+            >
+            grâce à des
+            <strong
+              ><span class="swiper-green-highlight"
+                >tutoriels personnalisés</span
+              >.</strong
+            >
           </li>
         </ul>
       </div>
     </swiper-slide>
     <swiper-slide>
-      <img src="@/assets/basegun.png" alt="" height="250" class="swiper-logo" />
+      <img
+        src="@/assets/basegun.png"
+        alt="Logo Basegun"
+        height="250"
+        class="swiper-logo"
+      />
       <div class="swiper-content">
         <ul class="swiper-ul fr-text--md">
           <li class="swiper-li">
             Basegun
-            <span class="swiper-red-highlight">n’a pas vocation à donner</span>
+            <strong
+              ><span class="swiper-red-highlight"
+                >n’a pas vocation à donner</span
+              ></strong
+            >
             des instructions sur la préservation des traces et indices.
           </li>
           <li class="swiper-li">
             Basegun est un
-            <span class="swiper-red-highlight">outil d'aide à la décision</span
-            >. Il
-            <span class="swiper-red-highlight"
-              >ne remplace en aucun cas l'avis d'un expert</span
-            >.
+            <strong
+              ><span class="swiper-red-highlight"
+                >outil d'aide à la décision</span
+              >.</strong
+            >
+            Il
+            <strong
+              ><span class="swiper-red-highlight"
+                >ne remplace en aucun cas l'avis d'un expert</span
+              >.</strong
+            >
           </li>
         </ul>
         <router-link v-slot="{ navigate }" :to="{ name: 'StartPage' }">

diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
@@ -63,13 +63,15 @@ function sendFeedback(isCorrect: boolean) {
       setMessage({
         type: "success",
         message: "Votre vote a été pris en compte",
+        timeout: 60000,
       });
     })
     .catch((error) => {
       console.log(error);
       setMessage({
         type: "error",
         message: "Une erreur a eu lieu en enregistrant votre vote.",
+        timeout: 60000,
       });
     })
     .finally(() => {
@@ -88,7 +90,7 @@ function sendFeedback(isCorrect: boolean) {
         Typologie de l'arme
       </h1>
       <h1 v-else class="typology-title bg-white py-4">Résultat Final</h1>
-      <div class="result-image" :style="{ backgroundImage: `url(${img})` }" />
+      <img class="result-image" :src="img" />
       <div class="fr-tile fr-enlarge-link mb-3">
         <div v-if="confidenceLevel === 'low'">
           <div class="fr-tile__body">
@@ -246,10 +248,10 @@ function sendFeedback(isCorrect: boolean) {
 }
 
 .result-image {
-  height: 30vh;
   background-position: center;
   background-size: cover;
   margin-top: -1.5rem;
+  margin-bottom: -0.5rem;
 }
 
 .success-tag {

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -54,6 +54,7 @@ const routes: RouteRecordRaw[] = [
     beforeEnter: clearLocalStorage,
     meta: {
       wholeLogo: true,
+      title: "Informations",
     },
   },
   {
@@ -68,41 +69,48 @@ const routes: RouteRecordRaw[] = [
     beforeEnter: <RouteRecordRaw["beforeEnter"]>clearLocalStorage,
     meta: {
       wholeLogo: true,
+      title: "Accueil",
     },
   },
   {
     path: "/instructions",
     name: "InstructionsPage",
     component: InstructionsPage,
     beforeEnter: clearLocalStorage,
+    meta: { title: "Instructions" },
   },
   // tutorial to secure a firearm
   {
     path: "/guide-mise-en-securite",
     name: "GuideSecuringFirearm",
     component: GuideSecuringFirearm,
+    meta: { title: "Mise en sécurité" },
   },
   {
     path: "/mise-en-securite-choix-option-etape/:step",
     name: "SecuringSelectOption",
     component: SecuringSelectOptionContent,
     props: (route: RouteLocation) => ({ step: +route.params.step }),
+    meta: { title: "Choix du type d'arme" },
   },
   {
     path: "/mise-en-securite-tutoriel",
     name: "SecuringTutorialContent",
     component: SecuringTutorialContent,
+    meta: { title: "Tutoriel" },
   },
   {
     path: "/fin-mise-en-securite",
     name: "SecuringAchievement",
     component: SecuringAchievement,
+    meta: { title: "Fin mise en sécurité" },
   },
   // Tutorial to identificate a firearm
   {
     path: "/guide-identification",
     name: "GuideIdenticationFirearm",
     component: GuideIdentificationFirearm,
+    meta: { title: "Identification" },
     children: [
       {
         path: "resultat-typologie",
@@ -132,12 +140,14 @@ const routes: RouteRecordRaw[] = [
         path: "armes-alarme",
         name: "IdentificationBlankGun",
         component: IdentificationBlankGun,
+        meta: { title: "Identification" },
       },
       {
         path: "resultat-final",
         name: "IdentificationFinalResult",
         meta: {
           reload: true,
+          title: "Résultat final",
         },
         component: IdentificationFinalResult,
       },
@@ -150,6 +160,7 @@ const routes: RouteRecordRaw[] = [
     beforeEnter: clearLocalStorage,
     meta: {
       wholeLogo: true,
+      title: "A propos",
     },
   },
   {
@@ -159,6 +170,7 @@ const routes: RouteRecordRaw[] = [
     beforeEnter: clearLocalStorage,
     meta: {
       wholeLogo: true,
+      title: "Mentions légales",
     },
   },
   {
@@ -168,6 +180,7 @@ const routes: RouteRecordRaw[] = [
     beforeEnter: clearLocalStorage,
     meta: {
       wholeLogo: true,
+      title: "Contact",
     },
   },
   {
@@ -176,6 +189,7 @@ const routes: RouteRecordRaw[] = [
     component: ErrorPage,
     meta: {
       wholeLogo: true,
+      title: "Erreur",
     },
   },
   {
@@ -185,6 +199,7 @@ const routes: RouteRecordRaw[] = [
     beforeEnter: clearLocalStorage,
     meta: {
       wholeLogo: true,
+      title: "Accessibilité",
     },
   },
   {
@@ -193,21 +208,14 @@ const routes: RouteRecordRaw[] = [
     component: PageNotFound,
     meta: {
       wholeLogo: true,
+      title: "Page non trouvée",
     },
   },
   {
     path: "/guide-contact",
     name: "ExpertSituation",
     component: ExpertSituation,
-    beforeEnter: (to, from, next) => {
-      mgr.getUser().then((user) => {
-        if (user === null) {
-          mgr.signinRedirect();
-        } else {
-          next();
-        }
-      });
-    },
+    meta: { title: "Contact expert" },
   },
   {
     path: "/guide-demande-expertise",
@@ -260,4 +268,10 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach((to, from, next) => {
+  console.log(to);
+  document.title = "Basegun | " + to.meta.title;
+  next();
+});
+
 export default router;
diff --git a/frontend/src/utils/isUserUsingComputer.ts b/frontend/src/utils/isUserUsingComputer.ts
@@ -0,0 +1,5 @@
+export function isUserUsingComputer() {
+  return window.navigator.userAgent.includes(
+    "Macintosh" || "Windows" || "Linux",
+  );
+}
diff --git a/frontend/src/views/AboutPage.vue b/frontend/src/views/AboutPage.vue
@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import logoDnum from "@/assets/logo_dnum.jpg";
+import logoDTNUM from "@/assets/logo_dtnum.jpg";
 import logoSCAE from "@/assets/logo_scae.png";
 import logoPN from "@/assets/logo_police.png";
 import logoGendarmerie from "@/assets/logo_gendarmerie.png";
 
 const imgs = ref([
   {
-    alt: "Logo Ministère de l'interieur",
-    id: "logo_dnum",
-    src: logoDnum,
+    alt: "Logo Direction de la Transformation Numérique du Ministère de l'Intérieur et des Outre-Mer",
+    id: "logo_dtnum",
+    src: logoDTNUM,
   },
   {
     alt: "Logo SCAE",
@@ -23,7 +23,7 @@ const imgs = ref([
     src: logoPN,
   },
   {
-    alt: "Logo Gendarmerie",
+    alt: "Logo Gendarmerie Nationale",
     id: "logo_gendarmerie",
     src: logoGendarmerie,
   },

diff --git a/frontend/src/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue b/frontend/src/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue
@@ -10,7 +10,7 @@
     <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
       <img
         src="@/assets/guide-identification/icones/complements.jpg"
-        alt="alt"
+        alt=""
         class="img-deco"
       />
     </div>