fix(modèle de courriers): prise en compte des retours RGAA (#6453)

* fix(modèle de courriers): prise en compte des retours RGAA

* fix snap

* fusion des 2 tests pour enlever la flakyness

* fix tests !

packages/code-du-travail-frontend/cypress/integration/light/themes.spec.ts

@@ -8,19 +8,15 @@ describe("Navigation par thème", () => {
     cy.get("p").should("contain", "Besoin de plus d’informations");
   });
 
-  it('redirige vers la page "/themes/embauche-et-contrat-de-travail" lorsque je clique sur "Embauche et contrat de travail"', () => {
+  it('redirige vers la page "/themes/embauche-et-contrat-de-travail" lorsque je clique sur "Embauche et contrat de travail" puis sur "/themes/embauche" lorsque je clique sur "Embauche"', () => {
     cy.get("a").contains("Embauche et contrat de travail").click();
     cy.urlEqual("/themes/embauche-et-contrat-de-travail");
     cy.get("h1").should("contain", "Embauche et contrat de travail");
     cy.get("a").should("contain", "Embauche");
     cy.get("a").should("contain", "Contrat de travail");
     cy.get("a").should("not.contain", "Méthodes de recrutement");
     cy.get("span").should("contain", "Contenu correspondant");
-  });
 
-  it('redirige vers la page "/themes/embauche" lorsque je clique sur "Embauche"', () => {
-    cy.get("a").contains("Embauche").click();
-    cy.urlEqual("/themes/embauche-et-contrat-de-travail");
     cy.get("a").contains("Embauche").click();
     cy.urlEqual("/themes/embauche");
     cy.get("h1").should("contain", "Embauche");

packages/code-du-travail-frontend/src/modules/contributions/DisplayContentContribution.tsx

@@ -12,6 +12,7 @@ import { AccordionWithAnchor } from "../common/AccordionWithAnchor";
 import { v4 as generateUUID } from "uuid";
 import { fr } from "@codegouvfr/react-dsfr";
 import { FicheServicePublic } from "../fiche-service-public/builder";
+import Link from "../common/Link";
 
 const DEFAULT_HEADING_LEVEL = 3;
 export type numberLevel = 2 | 3 | 4 | 5 | 6;
@@ -289,6 +290,15 @@ const options = (titleLevel: numberLevel): HTMLReactParserOptions => {
             </p>
           );
         }
+        if (domNode.name === "a") {
+          return (
+            <Link href={domNode.attribs.href} {...domNode.attribs}>
+              {domToReact(domNode.children as DOMNode[], {
+                trim: true,
+              })}
+            </Link>
+          );
+        }
       }
     },
     trim: true,

packages/code-du-travail-frontend/src/modules/contributions/__tests__/DisplayContentContribution.test.tsx

@@ -496,4 +496,35 @@ describe("DisplayContentContribution", () => {
       expect(asFragment().firstChild).toMatchSnapshot();
     });
   });
+  describe("Links", () => {
+    it(`should replace anchor tag with the same tag`, () => {
+      const { getByTitle } = render(
+        <DisplayContentContribution
+          content={`
+        <a class="alert" href="hello.com" title="link"><span>Mon Lien</span></a>`}
+          titleLevel={3}
+        ></DisplayContentContribution>
+      );
+
+      const anchor = getByTitle("link");
+      expect(anchor.getAttribute("href")).toEqual("hello.com");
+      expect(anchor.getAttribute("class")).toEqual("alert");
+      expect(anchor.getElementsByTagName("span").item(0)?.textContent).toEqual(
+        "Mon Lien"
+      );
+    });
+    it(`should add "Nouvelle fenêtre" if ancher had target="_blank" attribute`, () => {
+      const { getByText } = render(
+        <DisplayContentContribution
+          content={`
+        <a target="_blank" href="hello.com">Mon Lien</a>`}
+          titleLevel={3}
+        ></DisplayContentContribution>
+      );
+
+      expect(getByText("Mon Lien").getAttribute("title")).toEqual(
+        "Mon Lien - nouvelle fenêtre"
+      );
+    });
+  });
 });

packages/code-du-travail-frontend/src/modules/modeles-de-courriers/__tests__/__snapshots__/modeles.test.tsx.snap

@@ -122,6 +122,7 @@ exports[`<LetterModel /> affiche un modèle de document 1`] = `
           Copier le modèle
         </button>
         <div
+          aria-live="polite"
           class="fr-py-2v h_48px"
         />
       </div>
@@ -154,6 +155,7 @@ exports[`<LetterModel /> affiche un modèle de document 1`] = `
           Copier le modèle
         </button>
         <div
+          aria-live="polite"
           class="fr-py-2v h_48px"
         />
       </div>
@@ -300,6 +302,7 @@ exports[`<LetterModel /> affiche un modèle de document 1`] = `
           Copier le modèle
         </button>
         <div
+          aria-live="polite"
           class="fr-py-2v h_48px"
         />
       </div>

packages/code-du-travail-frontend/src/modules/modeles-de-courriers/components/CopyButton.tsx

@@ -30,7 +30,7 @@ export const CopyButton = ({ slug }: { slug: string }) => {
       >
         Copier le modèle
       </Button>
-      <div className={`${fr.cx("fr-py-2v")} ${fixHeight}`}>
+      <div className={`${fr.cx("fr-py-2v")} ${fixHeight}`} aria-live="polite">
         {isCopied && (
           <div>
             <p>

packages/code-du-travail-frontend/src/modules/modeles-de-courriers/components/LetterModelContent.tsx

@@ -7,6 +7,7 @@ import { DownloadTile } from "./DownloadTile";
 import { CopyButton } from "./CopyButton";
 import "../../../../public/static/modeles.css";
 import { MailElasticDocument } from "@socialgouv/cdtn-types";
+import DisplayContentContribution from "../../contributions/DisplayContentContribution";
 
 export type LetterModelContentProps = Pick<
   MailElasticDocument,
@@ -30,7 +31,7 @@ export const LetterModelContent = ({
       <p className={fr.cx("fr-mb-6w")}>Mis à jour le&nbsp;: {date}</p>
       {intro && (
         <div className={`${fr.cx("fr-highlight", "fr-mb-6w")}`}>
-          <Html>{intro}</Html>
+          <DisplayContentContribution content={intro} titleLevel={2} />
         </div>
       )}
       <div className={fr.cx("fr-hidden-md")}>