fix: pageTitle, surveyList and personalData links (#87)

InseeFr · Nov 27, 2024 · f949dc9 · f949dc9
1 parent 9d4bc05
commit f949dc9
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 24 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -65,7 +65,6 @@ const { i18n } = declareComponentKeys<
   | "operator logo alt"
   | "page title surveys"
   | "contact support"
-  | "header"
   | "content"
   | "footer"
   | "my surveys"

diff --git a/src/components/LegalInformation.tsx b/src/components/LegalInformation.tsx
@@ -22,7 +22,7 @@ export function LegalInformation() {
       <TitleWithText title={t("cookiesTitle")} text={t("cookiesText")} />
       <TitleWithText title={t("copyrightTitle")} text={t("copyrightText")} />
 
-      <div aria-label={t("publisherInformationTitle")} className="fr-pb-3w">
+      <div className="fr-pb-3w">
         <h3 className="fr-mb-2w">{t("publisherInformationTitle")}</h3>
         <p className="fr-mb-1w">{t("address")}</p>
         <p className="fr-mb-1w">{t("streetInformation")}</p>

diff --git a/src/components/PersonalData.tsx b/src/components/PersonalData.tsx
@@ -7,7 +7,7 @@ export function PersonalData() {
 
   return (
     <FooterPageLayout t={t}>
-      <p>{t("personalDataText", {})}</p>
+      <div>{t("personalDataText", {})}</div>
     </FooterPageLayout>
   );
 }

diff --git a/src/components/SurveyList/SurveyList.tsx b/src/components/SurveyList/SurveyList.tsx
@@ -3,6 +3,7 @@ import Banner from "../../assets/banner.svg";
 import { fr } from "@codegouvfr/react-dsfr";
 import content from "resources/content.json";
 import { Card } from "@codegouvfr/react-dsfr/Card";
+import { List } from "@mui/material";
 
 export const SurveysList = () => {
   const { t } = useTranslation("SurveyHomepage");
@@ -30,9 +31,9 @@ export const SurveysList = () => {
       </div>
       <div className={fr.cx("fr-container", "fr-py-5w")}>
         <h2>{t("title")}</h2>
-        <div className="fr-grid-row">
+        <List className="fr-grid-row">
           {surveys.map(survey => (
-            <div className="fr-col-md-4 fr-col-12 fr-mb-3w" key={survey.id}>
+            <li className="fr-col-md-4 fr-col-12 fr-mb-3w" key={survey.id}>
               <Card
                 className="fr-mr-3w"
                 background
@@ -44,14 +45,15 @@ export const SurveysList = () => {
                   params: {
                     survey: survey.id,
                   },
+                  id: "content",
                 }}
                 endDetail={`${import.meta.env.VITE_APP_URL}/${survey.id}`}
                 title={survey.titleShort}
                 titleAs="h5"
               />
-            </div>
+            </li>
           ))}
-        </div>
+        </List>
       </div>
     </div>
   );

diff --git a/src/components/commons/TitleWithText.tsx b/src/components/commons/TitleWithText.tsx
@@ -5,7 +5,7 @@ type Props = {
 
 export const TitleWithText = ({ title, text }: Props) => {
   return (
-    <div aria-label={title}>
+    <div>
       <h3 className="fr-mb-2w">{title}</h3>
       <p>{text}</p>
     </div>

diff --git a/src/components/surveyHomepage/SurveyHomepage.tsx b/src/components/surveyHomepage/SurveyHomepage.tsx
@@ -244,6 +244,8 @@ const { i18n } = declareComponentKeys<
   | "homepage"
   | "sideMenuTitle"
   | "in this section"
+  | "contact support"
+  | "FAQ"
   | "legal framework"
   | "what are your answers for?"
   | "documents to the surveyed"

diff --git a/src/functions/getPageTitle.ts b/src/functions/getPageTitle.ts
@@ -0,0 +1,22 @@
+export const getPageTitle = (currentPath: string) => {
+  if (currentPath.includes("/cadre-juridique")) {
+    return "legal framework";
+  }
+  if (currentPath.includes("/utilisation-reponse")) {
+    return "what are your answers for?";
+  }
+  if (currentPath.includes("/documents")) {
+    return "documents to the surveyed";
+  }
+  if (currentPath.includes("/resultats")) {
+    return "some results";
+  }
+  if (currentPath.includes("/faq")) {
+    return "FAQ";
+  }
+  if (currentPath.includes("/contacter-assistance")) {
+    return "contact support";
+  }
+
+  return "survey introduction";
+};
diff --git a/src/i18n/resources/en.tsx b/src/i18n/resources/en.tsx
@@ -13,7 +13,6 @@ export const translations: Translations<"en"> = {
     "operator logo alt": "Insee, measure to understand",
     "page title surveys": "My surveys",
     "contact support": "Contact support",
-    "header": "Header",
     "content": "Content",
     "footer": "Footer",
     "my surveys": "My surveys",
@@ -34,6 +33,8 @@ export const translations: Translations<"en"> = {
     "survey introduction": "Survey introduction",
     "homepage": "Homepage",
     "in this section": "In this section",
+    "contact support": "Contact support",
+    "FAQ": "Answer your questions",
     "legal framework": "Legal framework",
     "what are your answers for?": "What are your answers for?",
     "documents to the surveyed": "Documents to the surveyed",
@@ -393,7 +394,7 @@ export const translations: Translations<"en"> = {
           className="fr-link"
           href="https://www.insee.fr/fr/information/3719162"
           target="_blank"
-          title="https://www.insee.fr/fr/information/3719162 - open link in a new tab"
+          title="Personal Data - open a new window"
         >
           Personal Data
         </a>{" "}
@@ -402,7 +403,7 @@ export const translations: Translations<"en"> = {
           className="fr-link"
           href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32016R0679"
           target="_blank"
-          title="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32016R0679 - open link in a new tab"
+          title="General Data Protection Regulation - open a new window"
         >
           General Data Protection Regulation (GDPR)
         </a>{" "}
@@ -411,7 +412,7 @@ export const translations: Translations<"en"> = {
           className="fr-link"
           href="https://www.legifrance.gouv.fr/loda/id/JORFTEXT000000886460"
           target="_blank"
-          title="https://www.legifrance.gouv.fr/loda/id/JORFTEXT000000886460 - open link in a new tab"
+          title="French Data Protection Act - open a new window"
         >
           French Data Protection Act
         </a>

diff --git a/src/i18n/resources/fr.tsx b/src/i18n/resources/fr.tsx
@@ -13,7 +13,6 @@ export const translations: Translations<"fr"> = {
     "operator logo alt": "Insee, mesurer pour comprendre",
     "page title surveys": "Mes enquêtes",
     "contact support": "Contacter l'assistance",
-    "header": "Menu",
     "content": "Contenu",
     "footer": "Pied de page",
     "my surveys": "Mes enquêtes",
@@ -33,6 +32,8 @@ export const translations: Translations<"fr"> = {
     "survey introduction": "Introduction à l'enquête",
     "homepage": "Accueil",
     "in this section": "Dans cette rubrique",
+    "contact support": "Contacter l'assistance",
+    "FAQ": "Réponses à vos questions",
     "legal framework": "Cadre juridique",
     "what are your answers for?": "À quoi servent vos réponses ?",
     "documents to the surveyed": "Documents aux enquêtés",
@@ -394,7 +395,7 @@ export const translations: Translations<"fr"> = {
           className="fr-link"
           href="https://www.insee.fr/fr/information/3719162"
           target="_blank"
-          title="https://www.insee.fr/fr/information/3719162 - ouvrir dans un nouvel onglet"
+          title="Données à caractère personnel - ouvre une nouvelle fenêtre"
         >
           Données à caractère personnel
         </a>{" "}
@@ -403,7 +404,7 @@ export const translations: Translations<"fr"> = {
           className="fr-link"
           href="https://eur-lex.europa.eu/legal-content/FR/TXT/?uri=CELEX%3A32016R0679"
           target="_blank"
-          title="https://eur-lex.europa.eu/legal-content/FR/TXT/?uri=CELEX%3A32016R0679- ouvrir dans un nouvel onglet"
+          title="Règlement général sur la protection des données- ouvre une nouvelle fenêtre"
         >
           Règlement général sur la protection des données (RGPD)
         </a>{" "}
@@ -412,7 +413,7 @@ export const translations: Translations<"fr"> = {
           className="fr-link"
           href="https://www.legifrance.gouv.fr/loda/id/JORFTEXT000000886460"
           target="_blank"
-          title="https://www.legifrance.gouv.fr/loda/id/JORFTEXT000000886460 - ouvrir dans un nouvel onglet"
+          title="loi Informatique et Libertés - ouvre une nouvelle fenêtre"
         >
           loi Informatique et Libertés
         </a>

diff --git a/src/routes/$survey.tsx b/src/routes/$survey.tsx
@@ -4,13 +4,15 @@ import { SurveyHomepage } from "components/surveyHomepage/SurveyHomepage";
 import { useTranslation } from "i18n";
 import { Helmet } from "react-helmet-async";
 import content from "resources/content.json";
+import { getPageTitle } from "functions/getPageTitle";
 
 export const Route = createFileRoute("/$survey")({
   component: Index,
 });
 
 function Index() {
   const { t: headerTranslation } = useTranslation("Header");
+  const { t } = useTranslation("SurveyHomepage");
   const { survey } = Route.useParams();
   const surveyData = content.specifique.find(s => s.id === survey);
   const router = useRouter();
@@ -30,10 +32,12 @@ function Index() {
   if (hasNotSideMenu) {
     return <Outlet />;
   }
+
+  const sectionTitle = getPageTitle(currentPath);
   return (
     <div>
       <Helmet>
-        <title>{`${surveyData?.titleShort} - ${headerTranslation("service tagline")}`}</title>
+        <title>{`${t(sectionTitle)} - ${surveyData?.titleShort} - ${headerTranslation("service tagline")}`}</title>
       </Helmet>
       <SurveyHomepage survey={surveyData} />
     </div>

diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -1,11 +1,17 @@
-import { createRootRouteWithContext, Outlet, ScrollRestoration } from "@tanstack/react-router";
+import {
+  createRootRouteWithContext,
+  Outlet,
+  ScrollRestoration,
+  useRouter,
+} from "@tanstack/react-router";
 import { Footer } from "components/Footer";
 import { Header } from "components/Header";
 import { QueryClient } from "@tanstack/react-query";
 import { AutoLogoutCountdown } from "components/AutoLogoutCountdown";
 import { SkipLinks } from "@codegouvfr/react-dsfr/SkipLinks";
 import { useTranslation } from "i18n";
 import { NotFound } from "components/errorPages/NotFound";
+import { useEffect, useRef } from "react";
 
 export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
   component: RootComponent,
@@ -15,18 +21,24 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
 function RootComponent() {
   const { t } = useTranslation("Header");
 
+  const router = useRouter();
+
+  const currentPath = router.history.location.pathname;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    ref.current?.focus();
+  }, [currentPath]);
+
   return (
-    <div>
+    <div ref={ref} tabIndex={-1}>
       <SkipLinks
         links={[
           {
-            anchor: "#contenu",
+            anchor: "#content",
             label: t("content"),
           },
-          {
-            anchor: "#header",
-            label: t("header"),
-          },
           {
             anchor: "#footer",
             label: t("footer"),