fix: rgaa fix sur l'input contact page besoin plus info

packages/code-du-travail-frontend/src/modules/besoin-plus-informations/__tests__/BesoinPlusInformations.test.tsx

@@ -34,16 +34,20 @@ describe("<BesoinPlusInformations />", () => {
   });
 
   it("doit trouver indiquer si le code postal n'existe pas", () => {
-    const { getByTestId, getByLabelText } = render(<BesoinPlusInformations />);
+    const { getByTestId, getByLabelText, getByText } = render(
+      <BesoinPlusInformations />
+    );
     const userAction = new UserAction();
     userAction.setInput(
       getByLabelText("Saisissez le numéro de votre département"),
       "999"
     );
     userAction.click(getByTestId("button-search-service"));
 
-    expect(getByTestId("result-search-service-failed").textContent).toBe(
-      "Aucun service de renseignement n'a été trouvé pour ce département."
-    );
+    expect(
+      getByText(
+        "Aucun service de renseignement n'a été trouvé pour ce département."
+      )
+    ).toBeInTheDocument();
   });
 });

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

@@ -2,7 +2,7 @@
 
 import { fr } from "@codegouvfr/react-dsfr";
 import { Container } from "../layout/Container";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNeedMoreInfoEvents } from "../layout/infos/tracking";
 import Image from "next/image";
 import { Input } from "@codegouvfr/react-dsfr/Input";
@@ -17,6 +17,9 @@ import {
 export const BesoinPlusInformations = () => {
   const [department, setDepartment] = useState<string>("");
   const [hasSearched, setHasSearched] = useState<boolean>(false);
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [inputRef, setInputRef] = useState<HTMLInputElement | null>();
+  const [linkRef, setLinkRef] = useState<HTMLAnchorElement | null>();
   const [result, setResult] = useState<undefined | ServiceRenseignement>(
     undefined
   );
@@ -33,12 +36,21 @@ export const BesoinPlusInformations = () => {
     emitTrackNumber();
   };
 
+  useEffect(() => {
+    setHasError(hasSearched && !result);
+    if (hasError) {
+      inputRef?.focus();
+    }
+  }, [hasSearched, result]);
+
+  useEffect(() => {
+    linkRef?.focus();
+  }, [linkRef]);
   return (
     <Container>
       <h1 id="mentions-legales" className={fr.cx("fr-mt-0")}>
         Besoin de plus d&apos;informations
       </h1>
-
       <p className={fr.cx("fr-mt-6w", "fr-mb-6w", "fr-text--lg")}>
         Les services du ministère du Travail en région informent, conseillent et
         orientent les salariés et les employeurs du secteur privé sur leurs
@@ -64,6 +76,17 @@ export const BesoinPlusInformations = () => {
         <Input
           id="search-service"
           label="Saisissez le numéro de votre département"
+          stateRelatedMessage={
+            <>
+              {hasError && (
+                <span>
+                  Aucun service de renseignement n&apos;a été trouvé pour ce
+                  département.
+                </span>
+              )}
+            </>
+          }
+          state={hasError ? "error" : undefined}
           nativeInputProps={{
             maxLength: 3,
             onChange: (e) => setDepartment(e.target.value),
@@ -72,6 +95,8 @@ export const BesoinPlusInformations = () => {
                 onSearchInput();
               }
             },
+            "aria-invalid": hasError ? true : undefined,
+            ref: setInputRef,
           }}
           addon={
             <Button
@@ -91,19 +116,11 @@ export const BesoinPlusInformations = () => {
             href={result.url}
             target="_blank"
             data-testid="result-search-service"
+            ref={setLinkRef}
           >
             {result.url}
           </a>
         )}
-        {hasSearched && !result && (
-          <p
-            className={fr.cx("fr-error-text", "fr-text--md")}
-            data-testid="result-search-service-failed"
-          >
-            Aucun service de renseignement n&apos;a été trouvé pour ce
-            département.
-          </p>
-        )}
       </section>
       <Alert
         severity={"info"}