diff --git a/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg b/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg index 400623cc59..a44c29f04c 100644 --- a/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg +++ b/packages/code-du-travail-frontend/public/static/assets/img/srdt.svg @@ -1,10 +1,10 @@ - + - + fill="#000091" /> + diff --git a/packages/code-du-travail-frontend/src/modules/besoin-plus-informations/__tests__/BesoinPlusInformations.test.tsx b/packages/code-du-travail-frontend/src/modules/besoin-plus-informations/__tests__/BesoinPlusInformations.test.tsx index 745eccb8fd..6ec16a44c6 100644 --- a/packages/code-du-travail-frontend/src/modules/besoin-plus-informations/__tests__/BesoinPlusInformations.test.tsx +++ b/packages/code-du-travail-frontend/src/modules/besoin-plus-informations/__tests__/BesoinPlusInformations.test.tsx @@ -34,7 +34,9 @@ describe("", () => { }); it("doit trouver indiquer si le code postal n'existe pas", () => { - const { getByTestId, getByLabelText } = render(); + const { getByTestId, getByLabelText, getByText } = render( + + ); const userAction = new UserAction(); userAction.setInput( getByLabelText("Saisissez le numéro de votre département"), @@ -42,8 +44,10 @@ describe("", () => { ); 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(); }); }); 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 index 68637e85cd..421226810c 100644 --- 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 @@ -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(""); const [hasSearched, setHasSearched] = useState(false); + const [hasError, setHasError] = useState(false); + const [inputRef, setInputRef] = useState(); + const [linkRef, setLinkRef] = useState(); const [result, setResult] = useState( undefined ); @@ -33,12 +36,21 @@ export const BesoinPlusInformations = () => { emitTrackNumber(); }; + useEffect(() => { + setHasError(hasSearched && !result); + if (hasError) { + inputRef?.focus(); + } + }, [hasSearched, result]); + + useEffect(() => { + linkRef?.focus(); + }, [linkRef]); return (

Besoin de plus d'informations

-

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 = () => { + {hasError && ( + + Aucun service de renseignement n'a été trouvé pour ce + département. + + )} + + } + 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={