feat: rgaa link target title (#6367)

* feat: rgaa link target title * fix: link sur les pages générés * chore: clean * update links on fiche SP * only add title if target="_blank" * Update packages/code-du-travail-frontend/src/modules/fiche-ministere-travail/ContentParser.tsx * update link * fix: rgga pour liens de la politique confidentialite * fix: rgaa titre de l'iframe non pertinent * fix: mention légal titre lien contact * chore: fix tests * fix: link politique confidentialite * fix: link mention legal * chore: snap --------- Co-authored-by: victor <[email protected]> Co-authored-by: carolineBda <[email protected]> Co-authored-by: Caroline <[email protected]>
SocialGouv · Dec 19, 2024 · a01a52b · a01a52b
1 parent 9c0e5ac
commit a01a52b
Show file tree

Hide file tree

Showing 28 changed files with 92 additions and 38 deletions.
diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/ContentParser.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/ContentParser.tsx
@@ -1,4 +1,5 @@
 import parse, { domToReact } from "html-react-parser";
+import Link from "../common/Link";
 
 export const ContentParser = ({
   children,
@@ -19,8 +20,7 @@ export const ContentParser = ({
         const textToTrim = text[text.length - 1] === " ";
         return (
           <>
-            <a {...domNode.attribs}>{domToReact(domNode.children)}</a>
-
+            <Link {...domNode.attribs}>{domToReact(domNode.children)}</Link>
             {textToTrim ? " " : ""}
           </>
         );

diff --git a/packages/code-du-travail-frontend/src/modules/common/Link.tsx b/packages/code-du-travail-frontend/src/modules/common/Link.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import BaseLink, { LinkProps } from "next/link";
+
+type Props = LinkProps & {
+  children: ReactNode;
+  title?: string;
+  target?: string;
+  className?: string;
+  rel?: string;
+};
+
+const Link = ({ ...props }: Props): JSX.Element => {
+  if (props.target === "_blank" && props.children) {
+    props.title = `${props.title || props.children.toString()} - nouvelle fenêtre`;
+  }
+  return <BaseLink {...props} />;
+};
+
+export default Link;
diff --git a/packages/code-du-travail-frontend/src/modules/common/LogoLink.tsx b/packages/code-du-travail-frontend/src/modules/common/LogoLink.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { fr } from "@codegouvfr/react-dsfr";
 import { css } from "@styled-system/css";
-import Link from "next/link";
+import Link from "../common/Link";
 
 export const LogoLink = () => {
   return (

diff --git a/packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx b/packages/code-du-travail-frontend/src/modules/config/DefaultLayout.tsx
@@ -1,7 +1,7 @@
 import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
 import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
 import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
-import Link from "next/link";
+import Link from "../common/Link";
 import { MatomoAnalytics } from "./MatomoAnalytics";
 import { DefaultColorScheme } from "@codegouvfr/react-dsfr/next-appdir";
 import { StartDsfrSystem } from "./StartDsfrSystem";

diff --git a/packages/code-du-travail-frontend/src/modules/config/StartDsfrDark.tsx b/packages/code-du-travail-frontend/src/modules/config/StartDsfrDark.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
-import Link from "next/link";
+import Link from "../common/Link";
 
 declare module "@codegouvfr/react-dsfr/next-appdir" {
   interface RegisterLink {

diff --git a/packages/code-du-travail-frontend/src/modules/config/StartDsfrLight.tsx b/packages/code-du-travail-frontend/src/modules/config/StartDsfrLight.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
-import Link from "next/link";
+import Link from "../common/Link";
 
 declare module "@codegouvfr/react-dsfr/next-appdir" {
   interface RegisterLink {

diff --git a/packages/code-du-travail-frontend/src/modules/config/StartDsfrSystem.tsx b/packages/code-du-travail-frontend/src/modules/config/StartDsfrSystem.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
-import Link from "next/link";
+import Link from "../common/Link";
 
 declare module "@codegouvfr/react-dsfr/next-appdir" {
   interface RegisterLink {

diff --git a/...-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsGlossaire.tsx b/...-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsGlossaire.tsx
@@ -1,5 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import Link from "next/link";
+import Link from "../../common/Link";
 import { css } from "@styled-system/css";
 
 type Props = {

diff --git a/...code-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsIntro.tsx b/...code-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsIntro.tsx
@@ -1,5 +1,5 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import Link from "next/link";
+import Link from "../../common/Link";
 import { css } from "@styled-system/css";
 import Image from "next/image";
 import AgreementSearch from "../AgreementSearch.svg";

diff --git a/...de-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsSection.tsx b/...de-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsSection.tsx
@@ -1,7 +1,7 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
 import { ListWithArrow } from "../../common/ListWithArrow";
-import Link from "next/link";
+import Link from "../../common/Link";
 import { ElasticAgreement } from "@socialgouv/cdtn-types";
 
 type Agreement = Pick<ElasticAgreement, "shortTitle" | "slug">;

diff --git a/packages/code-du-travail-frontend/src/modules/error/NotFound.tsx b/packages/code-du-travail-frontend/src/modules/error/NotFound.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { IconError } from "./IconError";
 import { fr } from "@codegouvfr/react-dsfr";
-import Link from "next/link";
+import Link from "../common/Link";
 
 export const NotFound: React.FC = () => {
   return (

diff --git a/packages/code-du-travail-frontend/src/modules/fiche-ministere-travail/ContentParser.tsx b/packages/code-du-travail-frontend/src/modules/fiche-ministere-travail/ContentParser.tsx
@@ -6,6 +6,7 @@ import parse, {
 } from "html-react-parser";
 import { fr } from "@codegouvfr/react-dsfr";
 import xss, { escapeAttrValue, getDefaultWhiteList } from "xss";
+import Link from "../common/Link";
 
 const xssWrapper = (text: string): string => {
   return xss(text, {
@@ -18,7 +19,7 @@ const xssWrapper = (text: string): string => {
         "type",
         "data-fr-js-collapse-button",
       ],
-      div: ["data-src"],
+      div: ["data-src", "data-title"],
     },
     /*
     Keep this attribute for all HTML tag. Use it safely.
@@ -45,13 +46,14 @@ const options = (): HTMLReactParserOptions => {
         ) {
           return (
             <p>
-              <a
+              <Link
                 href={domNode.attribs["data-src"]}
-                title={""}
                 target={"_blank"}
+                rel="noopener noreferrer"
+                title={`Cliquez ici pour voir la vidéo ${domNode.attribs["data-title"]}`}
               >
                 Cliquez ici pour voir la vidéo
-              </a>
+              </Link>
             </p>
           );
         }

diff --git a/...-du-travail-frontend/src/modules/fiche-ministere-travail/__tests__/ContentParser.test.tsx b/...-du-travail-frontend/src/modules/fiche-ministere-travail/__tests__/ContentParser.test.tsx
@@ -8,7 +8,21 @@ describe("Fiche MT content parser", () => {
       <ContentParser>{contentWithYoutubeVideo}</ContentParser>
     );
 
-    expect(getByText("Cliquez ici pour voir la vidéo")).toBeInTheDocument();
+    expect(getByText("Cliquez ici pour voir la vidéo").title).toEqual(
+      "Cliquez ici pour voir la vidéo Le travail illégal ; la répression | web série droit du travail - nouvelle fenêtre"
+    );
+    expect(getByText("Cliquez ici pour voir la vidéo")).toHaveAttribute(
+      "href",
+      "https://www.youtube.com/embed/lSYAHnf9F1Q?t&start=0"
+    );
+    expect(getByText("Cliquez ici pour voir la vidéo")).toHaveAttribute(
+      "target",
+      "_blank"
+    );
+    expect(getByText("Cliquez ici pour voir la vidéo")).toHaveAttribute(
+      "rel",
+      "noopener noreferrer"
+    );
   });
 
   test("should replace callout with icon by a default one to avoid icon issue", () => {

diff --git a/...les/fiche-service-public/builder/__tests__/__snapshots__/FicheServicePublic.test.tsx.snap b/...les/fiche-service-public/builder/__tests__/__snapshots__/FicheServicePublic.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
         href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000046771781"
         rel="noopener noreferrer"
         target="_blank"
+        title="loi n°2022-1598 du 21 décembre 2022 - nouvelle fenêtre"
       >
         loi n°2022-1598 du 21 décembre 2022
       </a>
@@ -34,6 +35,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
         href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000047455109"
         rel="noopener noreferrer"
         target="_blank"
+        title="n°2023-275 du 17 avril 2023 - nouvelle fenêtre"
       >
         n°2023-275 du 17 avril 2023
       </a>
@@ -290,6 +292,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
                 href="https://www.service-public.fr/simulateur/calcul/Demission"
                 rel="noopener noreferrer"
                 target="_blank"
+                title="Lettre de démission du salarié - nouvelle fenêtre"
               >
                 Lettre de démission du salarié
               </a>
@@ -580,6 +583,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
                 href="https://code.travail.gouv.fr/outils/preavis-demission"
                 rel="noopener noreferrer"
                 target="_blank"
+                title="Calculer la durée du préavis de démission selon la convention collective - nouvelle fenêtre"
               >
                 Calculer la durée du préavis de démission selon la convention collective
               </a>
@@ -1234,6 +1238,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
                 href="https://www.service-public.fr/simulateur/calcul/Demission"
                 rel="noopener noreferrer"
                 target="_blank"
+                title="Lettre de démission du salarié - nouvelle fenêtre"
               >
                 Lettre de démission du salarié
               </a>
@@ -1953,6 +1958,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
                 href="https://www.service-public.fr/simulateur/calcul/Demission"
                 rel="noopener noreferrer"
                 target="_blank"
+                title="Lettre de démission du salarié - nouvelle fenêtre"
               >
                 Lettre de démission du salarié
               </a>
@@ -2452,6 +2458,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
       href="https://www.service-public.fr/simulateur/calcul/Demission"
       rel="noopener noreferrer"
       target="_blank"
+      title="Lettre de démission du salarié - nouvelle fenêtre"
     >
       Lettre de démission du salarié
     </a>
@@ -2462,6 +2469,7 @@ exports[`<FicheServicePublic /> should render 1`] = `
       href="https://code.travail.gouv.fr/outils/preavis-demission"
       rel="noopener noreferrer"
       target="_blank"
+      title="Calculer la durée du préavis de démission selon la convention collective - nouvelle fenêtre"
     >
       Calculer la durée du préavis de démission selon la convention collective
     </a>

diff --git a/...e-du-travail-frontend/src/modules/fiche-service-public/builder/components/LienExterne.tsx b/...e-du-travail-frontend/src/modules/fiche-service-public/builder/components/LienExterne.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 
 import { getInChildrenByName, getText } from "../utils";
-import Link from "next/link";
+
 import {
   FicheSPDataLienExterne,
   FicheSPDataLienExterneCommente,
 } from "../type";
+import Link from "../../../common/Link";
 
 export const LienExterneCommente = ({
   data,

diff --git a/...e-du-travail-frontend/src/modules/fiche-service-public/builder/components/OuSAdresser.tsx b/...e-du-travail-frontend/src/modules/fiche-service-public/builder/components/OuSAdresser.tsx
@@ -4,8 +4,9 @@ import { getInChildrenByName, getTitleInChildren } from "../utils";
 import { ElementBuilder } from "./ElementBuilder";
 import Title from "./Title";
 import { fr } from "@codegouvfr/react-dsfr";
-import Link from "next/link";
+
 import { FicheSPDataOuSAdresser, FicheSPDataRessourceWeb } from "../type";
+import Link from "../../../common/Link";
 
 export const OuSAdresser = ({
   data,

diff --git a/...u-travail-frontend/src/modules/fiche-service-public/builder/components/ServiceEnLigne.tsx b/...u-travail-frontend/src/modules/fiche-service-public/builder/components/ServiceEnLigne.tsx
@@ -1,10 +1,11 @@
 import React from "react";
 
 import { getText } from "../utils";
-import Link from "next/link";
+
 import { fr } from "@codegouvfr/react-dsfr";
 import { FicheSPDataServiceEnLigne } from "../type";
 import { cleanUrl } from "./LienExterne";
+import Link from "../../../common/Link";
 
 export const ServiceEnLigne = ({
   data,

diff --git a/...es/code-du-travail-frontend/src/modules/fiche-service-public/builder/components/Video.tsx b/...es/code-du-travail-frontend/src/modules/fiche-service-public/builder/components/Video.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
 import { getText } from "../utils";
-import Link from "next/link";
 import { FicheSPDataVideo } from "../type";
+import Link from "../../../common/Link";
 
 export const Video = ({ data }: { data: FicheSPDataVideo }) => {
   const url = data.attributes.URL;

diff --git a/...che-service-public/builder/components/__tests__/__snapshots__/Avertissement.test.tsx.snap b/...che-service-public/builder/components/__tests__/__snapshots__/Avertissement.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`<Avertissement /> affiche un avertissement 1`] = `
         href="https://www.legifrance.gouv.fr/loda/id/JORFTEXT000045197395/"
         rel="noopener noreferrer"
         target="_blank"
+        title="loi n°2022-217 du 21 février 2022 - nouvelle fenêtre"
       >
         loi n°2022-217 du 21 février 2022
       </a>
@@ -34,6 +35,7 @@ exports[`<Avertissement /> affiche un avertissement 1`] = `
         href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000046780040"
         rel="noopener noreferrer"
         target="_blank"
+        title="L'ordonnance n°2022-1067 du 22 décembre 2022 - nouvelle fenêtre"
       >
         L'ordonnance n°2022-1067 du 22 décembre 2022
       </a>

diff --git a/...fiche-service-public/builder/components/__tests__/__snapshots__/LienExterne.test.tsx.snap b/...fiche-service-public/builder/components/__tests__/__snapshots__/LienExterne.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<LienExterne /> should render 1`] = `
     href="https://formulaire.defenseurdesdroits.fr/code/afficher.php?ETAPE=accueil_2016"
     rel="noopener noreferrer"
     target="_blank"
+    title="formulaire de contact - nouvelle fenêtre"
   >
     formulaire de contact
   </a>
@@ -22,6 +23,7 @@ exports[`<LienExterneCommente /> should render 1`] = `
       href="http://travail-emploi.gouv.fr/droit-du-travail/contrats-et-carriere/contrats-de-travail/types-de-contrats/article/le-contrat-a-duree-determinee-cdd"
       rel="noopener noreferrer"
       target="_blank"
+      title="Fiche pratique sur le CDD - nouvelle fenêtre"
     >
       Fiche pratique sur le CDD
     </a>

diff --git a/...fiche-service-public/builder/components/__tests__/__snapshots__/OuSAdresser.test.tsx.snap b/...fiche-service-public/builder/components/__tests__/__snapshots__/OuSAdresser.test.tsx.snap
@@ -118,6 +118,7 @@ exports[`<OuSAdresser /> should render a ressource web component 1`] = `
               href="mailto:[email protected]"
               rel="noopener noreferrer"
               target="_blank"
+              title="[email protected] - nouvelle fenêtre"
             >
               [email protected]
             </a>

diff --git a/...dules/fiche-service-public/builder/components/__tests__/__snapshots__/Video.test.tsx.snap b/...dules/fiche-service-public/builder/components/__tests__/__snapshots__/Video.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<Video /> should render 1`] = `
     href="https://youtu.be/ie4KrcEt6pU"
     rel="noopener noreferrer"
     target="_blank"
+    title="Cliquez ici pour voir la vidéo ,Le compte retraite - nouvelle fenêtre"
   >
     Cliquez ici pour voir la vidéo 
     Le compte retraite

diff --git a/packages/code-du-travail-frontend/src/modules/layout/ContainerWidget.tsx b/packages/code-du-travail-frontend/src/modules/layout/ContainerWidget.tsx
@@ -2,7 +2,7 @@
 import { ReactNode, useEffect } from "react";
 import { fr } from "@codegouvfr/react-dsfr";
 import { useIframeResizer } from "../../../src/common/hooks";
-import Link from "next/link";
+import Link from "../common/Link";
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { LogoLink } from "../common/LogoLink";
 

diff --git a/...ontend/src/modules/mentions-legales/__tests__/__snapshots__/MentionsLegales.test.tsx.snap b/...ontend/src/modules/mentions-legales/__tests__/__snapshots__/MentionsLegales.test.tsx.snap
@@ -28,6 +28,7 @@ exports[`<MentionsLegales /> should match snapshot 1`] = `
           <a
             href="https://www.fabrique.social.gouv.fr/"
             target="_blank"
+            title="fabrique des Ministères sociaux - nouvelle fenêtre"
           >
             fabrique des Ministères sociaux
           </a>
@@ -90,7 +91,7 @@ exports[`<MentionsLegales /> should match snapshot 1`] = `
          
         <a
           href="mailto:[email protected]"
-          title="Envoyer un mail à [email protected]"
+          title="Merci de nous en faire part en envoyant un mail à [email protected]"
         >
           merci de nous en faire part.
         </a>

diff --git a/packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx b/packages/code-du-travail-frontend/src/modules/mentions-legales/index.tsx
@@ -1,5 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { Container } from "../layout/Container";
+import Link from "../common/Link";
 
 export const MentionsLegales = () => (
   <Container>
@@ -11,9 +12,9 @@ export const MentionsLegales = () => (
     <div className={fr.cx("fr-mb-3w")}>
       <p className={fr.cx("fr-mb-0")}>
         Le site est édité par la{" "}
-        <a target="_blank" href="https://www.fabrique.social.gouv.fr/">
+        <Link target="_blank" href="https://www.fabrique.social.gouv.fr/">
           fabrique des Ministères sociaux
-        </a>{" "}
+        </Link>{" "}
         située&nbsp;:
       </p>
       <address>
@@ -60,7 +61,7 @@ export const MentionsLegales = () => (
       Si vous rencontrez un défaut d’accessibilité vous empêchant d’accéder à un
       contenu ou une fonctionnalité du site,{" "}
       <a
-        title="Envoyer un mail à [email protected]"
+        title="Merci de nous en faire part en envoyant un mail à [email protected]"
         href="mailto:[email protected]"
       >
         merci de nous en faire part.

diff --git a/packages/code-du-travail-frontend/src/modules/plan-du-site/SiteMap.tsx b/packages/code-du-travail-frontend/src/modules/plan-du-site/SiteMap.tsx
@@ -1,7 +1,7 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { Document } from "./queries";
 import React from "react";
-import Link from "next/link";
+import Link from "../common/Link";
 import { getRouteBySource, SourceKeys, SOURCES } from "@socialgouv/cdtn-utils";
 import { Container } from "../layout/Container";