fix(liens): prise en compte des retours RGAA pour les liens qui s'ouv…

…rent dans une nouvelle fenêtre (#6416) * fix(liens): prise en compte des retours RGAA pour les liens qui s'ouvrent dans une nouvelle fenêtre * fix tests
SocialGouv · Jan 14, 2025 · 4a887a4 · 4a887a4
1 parent e590799
commit 4a887a4
Show file tree

Hide file tree

Showing 15 changed files with 54 additions and 35 deletions.
diff --git a/packages/code-du-travail-frontend/src/modules/besoin-plus-informations/index.tsx b/packages/code-du-travail-frontend/src/modules/besoin-plus-informations/index.tsx
@@ -13,6 +13,7 @@ import {
   getServiceInfo,
   ServiceRenseignement,
 } from "./data/servicesDeRenseignement";
+import Link from "../common/Link";
 
 export const BesoinPlusInformations = () => {
   const [department, setDepartment] = useState<string>("");
@@ -111,15 +112,15 @@ export const BesoinPlusInformations = () => {
           }}
         />
         {result && (
-          <a
+          <Link
             className={fr.cx("fr-link")}
             href={result.url}
             target="_blank"
             data-testid="result-search-service"
             ref={setLinkRef}
           >
             {result.url}
-          </a>
+          </Link>
         )}
       </section>
       <Alert

diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx
@@ -4,6 +4,7 @@ import Html from "../common/Html";
 import { ContainerRich } from "../layout/ContainerRich";
 import { RelatedItem } from "../documents";
 import { ContentParser } from "./ContentParser";
+import Link from "../common/Link";
 
 type Props = {
   metaDescription: string;
@@ -34,9 +35,9 @@ export function ArticleCodeDuTravail({
 
       <p>
         Source&nbsp;:{" "}
-        <a href={url} target="_blank" rel="noopener noreferrer">
+        <Link href={url} target="_blank" rel="noopener noreferrer">
           Code du travail
-        </a>{" "}
+        </Link>{" "}
         - Mis à jour le&nbsp;: {date}
       </p>
 

diff --git a/packages/code-du-travail-frontend/src/modules/common/Link.tsx b/packages/code-du-travail-frontend/src/modules/common/Link.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, Ref } from "react";
 import BaseLink, { LinkProps } from "next/link";
 
 type Props = LinkProps & {
@@ -7,6 +7,7 @@ type Props = LinkProps & {
   target?: string;
   className?: string;
   rel?: string;
+  ref?: Ref<HTMLAnchorElement>;
 };
 
 const Link = ({ ...props }: Props): JSX.Element => {

diff --git a/packages/code-du-travail-frontend/src/modules/common/ReferencesList.tsx b/packages/code-du-travail-frontend/src/modules/common/ReferencesList.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ServicePublicReference } from "@socialgouv/cdtn-types";
 import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
 import { fr } from "@codegouvfr/react-dsfr";
+import Link from "./Link";
 
 export const ReferenceList = ({
   references,
@@ -27,12 +28,12 @@ export const ReferenceList = ({
           );
         case SOURCES.EXTERNALS:
           return (
-            <a
+            <Link
               key={ref.url + ref.title}
               href={ref.url}
               target="_blank"
               rel="noreferer noopener"
-            >{`Convention collective: ${ref.title}`}</a>
+            >{`Convention collective: ${ref.title}`}</Link>
           );
       }
     })

diff --git a/packages/code-du-travail-frontend/src/modules/common/Share.tsx b/packages/code-du-travail-frontend/src/modules/common/Share.tsx
@@ -7,6 +7,7 @@ import { SITE_URL } from "../../config";
 import { fr } from "@codegouvfr/react-dsfr";
 import { css } from "@styled-system/css";
 import { useCommonTracking } from "./tracking";
+import Link from "./Link";
 
 type Props = {
   title: string;
@@ -29,7 +30,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
       </div>
       <ul className={fr.cx("fr-btns-group")}>
         <li>
-          <a
+          <Link
             className={`${fr.cx(
               "fr-btn",
               "fr-btn--tertiary",
@@ -46,10 +47,10 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
             }}
           >
             Facebook
-          </a>
+          </Link>
         </li>
         <li>
-          <a
+          <Link
             className={`${fr.cx(
               "fr-btn",
               "fr-btn--tertiary",
@@ -64,10 +65,10 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
             }}
           >
             X (anciennement Twitter)
-          </a>
+          </Link>
         </li>
         <li>
-          <a
+          <Link
             className={`${fr.cx(
               "fr-btn",
               "fr-btn--tertiary",
@@ -84,7 +85,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
             }}
           >
             Linkedin
-          </a>
+          </Link>
         </li>
         <li>
           <a
@@ -106,7 +107,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
           </a>
         </li>
         <li>
-          <a
+          <Link
             className={`${fr.cx(
               "fr-btn",
               "fr-btn--tertiary",
@@ -121,7 +122,7 @@ export const Share = ({ title, metaDescription }: Props): JSX.Element => {
             }}
           >
             Whatsapp
-          </a>
+          </Link>
         </li>
         <li>
           {isUrlCopied ? (

diff --git a/...u-travail-frontend/src/modules/common/__tests__/__snapshots__/ReferenceList.test.tsx.snap b/...u-travail-frontend/src/modules/common/__tests__/__snapshots__/ReferenceList.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`<ReferenceList /> should render 1`] = `
           href="https://article.jo/yyy"
           rel="noreferer noopener"
           target="_blank"
+          title="Convention collective: Article yyy du JO - nouvelle fenêtre"
         >
           Convention collective: Article yyy du JO
         </a>
@@ -35,6 +36,7 @@ exports[`<ReferenceList /> should render 1`] = `
           href="https://legifrance/ccn-metallurgie"
           rel="noreferer noopener"
           target="_blank"
+          title="Convention collective: CCN metallurgie - nouvelle fenêtre"
         >
           Convention collective: CCN metallurgie
         </a>

diff --git a/...s/code-du-travail-frontend/src/modules/common/__tests__/__snapshots__/Share.test.tsx.snap b/...s/code-du-travail-frontend/src/modules/common/__tests__/__snapshots__/Share.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<Share /> renders 1`] = `
           href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fapi.url%2Fmy-page&quote=HELLO"
           rel="noopener noreferrer"
           target="_blank"
-          title="Partager sur Facebook"
+          title="Partager sur Facebook - nouvelle fenêtre"
         >
           Facebook
         </a>
@@ -34,7 +34,7 @@ exports[`<Share /> renders 1`] = `
           href="https://x.com/intent/post?text=HELLO%20%3A%20http%3A%2F%2Fapi.url%2Fmy-page"
           rel="noopener noreferrer"
           target="_blank"
-          title="Partager sur X (anciennement Twitter)"
+          title="Partager sur X (anciennement Twitter) - nouvelle fenêtre"
         >
           X (anciennement Twitter)
         </a>
@@ -45,7 +45,7 @@ exports[`<Share /> renders 1`] = `
           href="https://www.linkedin.com/shareArticle?mini=true&title=HELLO&url=http%3A%2F%2Fapi.url%2Fmy-page"
           rel="noopener noreferrer"
           target="_blank"
-          title="Partager sur LinkedIn"
+          title="Partager sur LinkedIn - nouvelle fenêtre"
         >
           Linkedin
         </a>
@@ -66,7 +66,7 @@ exports[`<Share /> renders 1`] = `
           href="https://wa.me/?text=HELLO%20%3A%20http%3A%2F%2Fapi.url%2Fmy-page"
           rel="noopener noreferrer"
           target="_blank"
-          title="Envoyer par Whatsapp"
+          title="Envoyer par Whatsapp - nouvelle fenêtre"
         >
           Whatsapp
         </a>

diff --git a/packages/code-du-travail-frontend/src/modules/layout/SourceData.tsx b/packages/code-du-travail-frontend/src/modules/layout/SourceData.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { fr } from "@codegouvfr/react-dsfr";
+import Link from "../common/Link";
 
 type Props = {
   source: {
@@ -12,9 +13,9 @@ type Props = {
 export const SourceData = ({ source, updatedAt }: Props) => (
   <p>
     Source&nbsp;:{" "}
-    <a href={source.url} target="_blank" rel="noopener noreferrer">
+    <Link href={source.url} target="_blank" rel="noopener noreferrer">
       {source.name}
-    </a>
+    </Link>
     {/*
       On place un span dans un span car la class fr-unhidden-lg fait un display: inherit qui va récupérer le display du parent
       Si on retire le span, on va hériter du display du p qui n'est pas bon.

diff --git a/packages/code-du-travail-frontend/src/modules/layout/footer/FooterBottom.tsx b/packages/code-du-travail-frontend/src/modules/layout/footer/FooterBottom.tsx
@@ -1,6 +1,7 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import React from "react";
 import { PACKAGE_VERSION } from "../../../config";
+import Link from "../../common/Link";
 
 export const FooterBottom = () => (
   <div className={fr.cx("fr-footer__bottom")}>
@@ -24,14 +25,14 @@ export const FooterBottom = () => (
         </a>
       </li>
       <li className={fr.cx("fr-footer__bottom-item")}>
-        <a
+        <Link
           href={`https://github.com/SocialGouv/code-du-travail-numerique/tree/v${PACKAGE_VERSION}`}
           className={fr.cx("fr-footer__bottom-link")}
           target="_blank"
           rel="noopener noreferrer"
         >
           Contribuer sur Github
-        </a>
+        </Link>
       </li>
       <li className={fr.cx("fr-footer__bottom-item")}>
         <a href="/plan-du-site" className={fr.cx("fr-footer__bottom-link")}>
@@ -43,13 +44,13 @@ export const FooterBottom = () => (
       <p>
         Sauf mention explicite de propriété intellectuelle détenue par des
         tiers, les contenus de ce site sont proposés sous{" "}
-        <a
+        <Link
           href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
           target="_blank"
           rel="noopener noreferrer"
         >
           licence etalab-2.0
-        </a>
+        </Link>
       </p>
     </div>
   </div>

diff --git a/packages/code-du-travail-frontend/src/modules/layout/footer/FooterContent.tsx b/packages/code-du-travail-frontend/src/modules/layout/footer/FooterContent.tsx
@@ -1,5 +1,6 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import React from "react";
+import Link from "../../common/Link";
 
 const DOMAINS = [
   "travail-emploi.gouv.fr",
@@ -14,14 +15,14 @@ export const FooterContent = () => (
     <ul className={fr.cx("fr-footer__content-list")}>
       {DOMAINS.map((domain) => (
         <li key={domain} className={fr.cx("fr-footer__content-item" as any)}>
-          <a
+          <Link
             className={fr.cx("fr-footer__content-link")}
             href={`https://${domain}`}
             target="_blank"
             rel="noopener noreferrer"
           >
             {domain}
-          </a>
+          </Link>
         </li>
       ))}
     </ul>

diff --git a/...du-travail-frontend/src/modules/layout/footer/__tests__/__snapshots__/index.test.tsx.snap b/...du-travail-frontend/src/modules/layout/footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -292,6 +292,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                   href="https://travail-emploi.gouv.fr"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="travail-emploi.gouv.fr - nouvelle fenêtre"
                 >
                   travail-emploi.gouv.fr
                 </a>
@@ -304,6 +305,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                   href="https://info.gouv.fr"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="info.gouv.fr - nouvelle fenêtre"
                 >
                   info.gouv.fr
                 </a>
@@ -316,6 +318,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                   href="https://service-public.fr"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="service-public.fr - nouvelle fenêtre"
                 >
                   service-public.fr
                 </a>
@@ -328,6 +331,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                   href="https://legifrance.gouv.fr"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="legifrance.gouv.fr - nouvelle fenêtre"
                 >
                   legifrance.gouv.fr
                 </a>
@@ -340,6 +344,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                   href="https://data.gouv.fr"
                   rel="noopener noreferrer"
                   target="_blank"
+                  title="data.gouv.fr - nouvelle fenêtre"
                 >
                   data.gouv.fr
                 </a>
@@ -391,6 +396,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                 href="https://github.com/SocialGouv/code-du-travail-numerique/tree/vvX.Y.Z"
                 rel="noopener noreferrer"
                 target="_blank"
+                title="Contribuer sur Github - nouvelle fenêtre"
               >
                 Contribuer sur Github
               </a>
@@ -416,6 +422,7 @@ exports[`<Footer /> should match snapshot 1`] = `
                 href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
                 rel="noopener noreferrer"
                 target="_blank"
+                title="licence etalab-2.0 - nouvelle fenêtre"
               >
                 licence etalab-2.0
               </a>

diff --git a/packages/code-du-travail-frontend/src/modules/layout/footer/infos/PopupContent.tsx b/packages/code-du-travail-frontend/src/modules/layout/footer/infos/PopupContent.tsx
@@ -8,6 +8,7 @@ import servicesDeRenseignement from "../../../../data/services-de-renseignement.
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { fr } from "@codegouvfr/react-dsfr";
 import { css } from "@styled-system/css";
+import Link from "../../../common/Link";
 
 type ServiceRenseignement = {
   name: string;
@@ -71,9 +72,9 @@ export function PopupContent() {
         }}
       />
       {result && (
-        <a className={fr.cx("fr-link")} href={result.url} target="_blank">
+        <Link className={fr.cx("fr-link")} href={result.url} target="_blank">
           {result.url}
-        </a>
+        </Link>
       )}
       {hasSearched && !result && (
         <p className={fr.cx("fr-error-text", "fr-text--md")}>

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
@@ -108,6 +108,7 @@ exports[`<MentionsLegales /> should match snapshot 1`] = `
         <a
           href="https://accessibilite.numerique.gouv.fr/"
           target="_blank"
+          title="https://accessibilite.numerique.gouv.fr - nouvelle fenêtre"
         >
           https://accessibilite.numerique.gouv.fr
         </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
@@ -77,9 +77,9 @@ export const MentionsLegales = () => (
     <p>
       Pour en savoir plus sur la politique d’accessibilité numérique de
       l’État&nbsp;:{" "}
-      <a href="https://accessibilite.numerique.gouv.fr/" target="_blank">
+      <Link href="https://accessibilite.numerique.gouv.fr/" target="_blank">
         https://accessibilite.numerique.gouv.fr
-      </a>
+      </Link>
     </p>
 
     <h2>Sécurité</h2>