fix(accessibilite): restitution des messages d'erreur à l'utilisateur (règle 7.5) (#6790)

Author: maxgfr

packages/code-du-travail-frontend/src/modules/besoin-plus-informations/index.tsx

@@ -7,13 +7,13 @@ import { useNeedMoreInfoEvents } from "../layout/footer/infos/tracking";
 import Image from "next/image";
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import { Button } from "@codegouvfr/react-dsfr/Button";
-import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import {
   getServiceInfo,
   ServiceRenseignement,
 } from "./data/servicesDeRenseignement";
 import Link from "../common/Link";
 import { defaultInputStyle } from "../outils/common/styles/input";
+import { AccessibleAlert } from "../outils/common/components/AccessibleAlert";
 
 export const BesoinPlusInformations = () => {
   const [department, setDepartment] = useState<string>("");
@@ -123,7 +123,7 @@ export const BesoinPlusInformations = () => {
           </Link>
         )}
       </section>
-      <Alert
+      <AccessibleAlert
         severity={"info"}
         small
         description={
@@ -148,7 +148,7 @@ export const BesoinPlusInformations = () => {
             </ul>
           </>
         }
-      ></Alert>
+      />
     </Container>
   );
 };

packages/code-du-travail-frontend/src/modules/common/DisplayContent.tsx

@@ -5,7 +5,6 @@ import parse, {
   HTMLReactParserOptions,
   Text,
 } from "html-react-parser";
-import Alert from "@codegouvfr/react-dsfr/Alert";
 import React, { ElementType, JSX } from "react";
 import { AccordionWithAnchor } from "./AccordionWithAnchor";
 import { v4 as generateUUID } from "uuid";
@@ -16,6 +15,7 @@ import { slugify } from "@socialgouv/cdtn-utils";
 import { captureException } from "@sentry/nextjs";
 import { toUrl } from "../utils/url";
 import { xssWrapper } from "../utils/xss";
+import { AccessibleAlert } from "../outils/common/components/AccessibleAlert";
 
 export type numberLevel = 2 | 3 | 4 | 5 | 6;
 
@@ -279,12 +279,12 @@ const options = (titleLevel: numberLevel): HTMLReactParserOptions => {
         }
         if (domNode.name === "div" && domNode.attribs.class === "alert") {
           return (
-            <Alert
+            <AccessibleAlert
               severity="info"
               small
               description={renderChildren(domNode, true, options(titleLevel))}
-              className={fr.cx("fr-mt-2w", "fr-pb-2w")}
-            ></Alert>
+              className={["fr-mt-2w", "fr-pb-2w"]}
+            />
           );
         }
         if (domNode.name === "div" && domNode.attribs.class === "infographic") {

packages/code-du-travail-frontend/src/modules/common/__tests__/__snapshots__/DisplayContent.test.tsx.snap

@@ -532,19 +532,18 @@ exports[`DisplayContent Alerts should replace div with alert class in li compone
       </p>
       <br />
       <div
-        class="fr-alert fr-alert--info fr-alert--sm fr-mt-2w fr-pb-2w"
-        id="fr-alert-:rh:"
+        aria-atomic="true"
+        aria-live="off"
+        class="fr-alert fr-alert--info fr-mt-2w fr-pb-2w fr-alert--sm"
       >
-        <div>
-          <p
-            class="fr-mt-2w"
-          >
-            <strong>
-              Attention : 
-            </strong>
-            En l’absence d’écrit, l’employeur peut être condamné à une amende de 3.750 € ou 7.500 € en cas de récidive.
-          </p>
-        </div>
+        <p
+          class="fr-mt-2w"
+        >
+          <strong>
+            Attention : 
+          </strong>
+          En l’absence d’écrit, l’employeur peut être condamné à une amende de 3.750 € ou 7.500 € en cas de récidive.
+        </p>
       </div>
     </li>
   </ul>
@@ -553,19 +552,18 @@ exports[`DisplayContent Alerts should replace div with alert class in li compone
 
 exports[`DisplayContent Alerts should replace div with alert class to Alert component 1`] = `
 <div
-  class="fr-alert fr-alert--info fr-alert--sm fr-mt-2w fr-pb-2w"
-  id="fr-alert-:rg:"
+  aria-atomic="true"
+  aria-live="off"
+  class="fr-alert fr-alert--info fr-mt-2w fr-pb-2w fr-alert--sm"
 >
-  <div>
-    <p
-      class="fr-mt-2w"
-    >
-      <strong>
-        Attention : 
-      </strong>
-      En l’absence d’écrit, l’employeur peut être condamné à une amende de 3.750 € ou 7.500 € en cas de récidive.
-    </p>
-  </div>
+  <p
+    class="fr-mt-2w"
+  >
+    <strong>
+      Attention : 
+    </strong>
+    En l’absence d’écrit, l’employeur peut être condamné à une amende de 3.750 € ou 7.500 € en cas de récidive.
+  </p>
 </div>
 `;
 
@@ -612,7 +610,7 @@ exports[`DisplayContent Infographic should replace div with infographic class to
   </div>
   <div
     class="fr-tile fr-enlarge-link fr-tile--vertical fr-tile--download"
-    id="fr-tile-:ri:"
+    id="fr-tile-:rg:"
   >
     <div
       class="fr-tile__body"

packages/code-du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { fr } from "@codegouvfr/react-dsfr";
-import Alert from "@codegouvfr/react-dsfr/Alert";
 import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
 import { createElement, ReactNode, useState } from "react";
 
 import { Autocomplete } from "../../common/Autocomplete";
 import { searchAgreement } from "../search";
 import { useAgreementSearchTracking } from "../tracking";
 import { Agreement } from "src/modules/outils/indemnite-depart/types";
+import { AccessibleAlert } from "src/modules/outils/common/components/AccessibleAlert";
 
 type Props = {
   onSearch?: (query: string, value?: Agreement[]) => void;
@@ -129,9 +129,9 @@ export const AgreementSearchInput = ({
           />
         </div>
         {searchState === "notFoundSearch" && (
-          <Alert
-            className={fr.cx("fr-mt-2w")}
-            as={`h${(level ?? 2) + 1}` as "h3" | "h4"}
+          <AccessibleAlert
+            className={["fr-mt-2w"]}
+            titleAs={`h${(level ?? 2) + 1}` as "h3" | "h4"}
             title="Vous ne trouvez pas votre convention collective&nbsp;?"
             description={
               <>
@@ -158,8 +158,8 @@ export const AgreementSearchInput = ({
           />
         )}
         {selectedAgreement && selectedAgreementAlert?.(selectedAgreement) && (
-          <Alert
-            className={fr.cx("fr-mt-2w")}
+          <AccessibleAlert
+            className={["fr-mt-2w"]}
             title="Nous n’avons pas de réponse pour cette convention collective"
             description={selectedAgreementAlert(selectedAgreement)}
             severity="warning"

packages/code-du-travail-frontend/src/modules/convention-collective/LegiFranceSearch.tsx

@@ -3,8 +3,8 @@ import { fr } from "@codegouvfr/react-dsfr";
 import Input from "@codegouvfr/react-dsfr/Input";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { push as matopush } from "@socialgouv/matomo-next";
-import Alert from "@codegouvfr/react-dsfr/Alert";
 import { css } from "@styled-system/css";
+import { AccessibleAlert } from "../outils/common/components/AccessibleAlert";
 
 type Props = {
   idcc: string;
@@ -131,10 +131,10 @@ export function LegiFranceSearch({ idcc, shortTitle }: Props) {
         </div>
       </form>
 
-      <Alert
+      <AccessibleAlert
         severity="info"
         small
-        className={fr.cx("fr-mb-0")}
+        className={["fr-mb-0"]}
         description="Selon le thème, un accord collectif d'entreprise peut prévoir des règles différentes par rapport à la convention collective."
         data-testid="agreement-search-alert"
       />

packages/code-du-travail-frontend/src/modules/documents/type.ts

@@ -23,7 +23,6 @@ export type RelatedItem = Pick<DocumentElastic, "title"> & {
   url: string;
 };
 
-// @TODO : utiliser LinkedContent dans cdtn-types une fois le package publié
 export type LinkedContent = Pick<DocumentElastic, "title"> & {
   source: Source;
   slug: string;

packages/code-du-travail-frontend/src/modules/droit-du-travail/Introduction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { fr } from "@codegouvfr/react-dsfr";
-import Alert from "@codegouvfr/react-dsfr/Alert";
+import { AccessibleAlert } from "../outils/common/components/AccessibleAlert";
 
 const Introduction = () => (
   <div className={fr.cx("fr-grid-row", "fr-grid-row--center")}>
@@ -28,9 +28,9 @@ const Introduction = () => (
         Le droit du travail est un droit en constante évolution car il comprend
         des enjeux sociaux, économiques et politiques forts.
       </p>
-      <Alert
+      <AccessibleAlert
         severity="info"
-        className={fr.cx("fr-mt-4w")}
+        className={["fr-mt-4w"]}
         title="Le droit du travail, ce n'est pas..."
         description="Le droit du travail ne concerne pas les travailleurs qui sont soumis au droit public (par exemple, les fonctionnaires), les travailleurs indépendants (artisan, commerçant, professions libérales…), les bénévoles et les dirigeants d’entreprise."
       />

packages/code-du-travail-frontend/src/modules/droit-du-travail/__tests__/__snapshots__/DroitDuTravailWrapper.test.tsx.snap

@@ -87,8 +87,9 @@ exports[`<DroitDuTravailWrapper /> renders correctly 1`] = `
               Le droit du travail est un droit en constante évolution car il comprend des enjeux sociaux, économiques et politiques forts.
             </p>
             <div
+              aria-atomic="true"
+              aria-live="off"
               class="fr-alert fr-alert--info fr-mt-4w"
-              id="fr-alert-:r2:"
             >
               <h3
                 class="fr-alert__title"

packages/code-du-travail-frontend/src/modules/droit-du-travail/__tests__/__snapshots__/Introduction.test.tsx.snap

@@ -35,8 +35,9 @@ exports[`<Introduction /> renders correctly 1`] = `
         Le droit du travail est un droit en constante évolution car il comprend des enjeux sociaux, économiques et politiques forts.
       </p>
       <div
+        aria-atomic="true"
+        aria-live="off"
         class="fr-alert fr-alert--info fr-mt-4w"
-        id="fr-alert-:r0:"
       >
         <h3
           class="fr-alert__title"

packages/code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx

@@ -4,7 +4,6 @@ import Image from "next/image";
 import Button from "@codegouvfr/react-dsfr/Button";
 import Input from "@codegouvfr/react-dsfr/Input";
 import Badge from "@codegouvfr/react-dsfr/Badge";
-import Alert from "@codegouvfr/react-dsfr/Alert";
 import { EnterpriseCard } from "./EnterpriseCard";
 import { createElement, ReactNode, useEffect, useRef, useState } from "react";
 import { css } from "@styled-system/css";
@@ -21,6 +20,7 @@ import { useEnterpriseAgreementSearchTracking } from "./tracking";
 import { Agreement } from "src/modules/outils/indemnite-depart/types";
 import { scrollToTop } from "src/modules/outils/common/utils";
 import { ApiGeoResult } from "./searchCities";
+import { AccessibleAlert } from "src/modules/outils/common/components/AccessibleAlert";
 
 type Props = {
   widgetMode?: boolean;
@@ -256,8 +256,8 @@ export const EnterpriseAgreementSearchInput = ({
         </div>
 
         {selectedAgreement && selectedAgreementAlert?.(selectedAgreement) && (
-          <Alert
-            className={fr.cx("fr-mt-2w")}
+          <AccessibleAlert
+            className={["fr-mt-2w"]}
             title="Nous n’avons pas de réponse pour cette convention collective"
             description={selectedAgreementAlert(selectedAgreement)}
             severity="warning"
@@ -415,9 +415,9 @@ export const EnterpriseAgreementSearchInput = ({
             </div>
           )}
           {searchState === "notFoundSearch" && (
-            <Alert
+            <AccessibleAlert
               title="Vous ne trouvez pas votre entreprise&nbsp;?"
-              as={`h${(level ?? 2) + 1}` as "h3" | "h4"}
+              titleAs={`h${(level ?? 2) + 1}` as "h3" | "h4"}
               description={
                 <>
                   <p>Il peut y avoir plusieurs explications à cela&nbsp;:</p>