Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Dec 19, 2024
Merged

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

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
55ad4ee
fix: rgaa fix sur l'input contact page besoin plus info
Dec 12, 2024
ef12110
chore: clean
Dec 12, 2024
354564e
chore: fix tu
Dec 12, 2024
3ec16ff
chore: clean test e2e
Dec 12, 2024
bd7cc47
chore: clean test e2e
Dec 12, 2024
1f07706
chore: clean test e2e
Dec 12, 2024
0ed3934
chore: mise à jour de la couleur du svg
Dec 12, 2024
46b72b9
refactor
Dec 12, 2024
1c5def0
chore: clean test e2e
Dec 18, 2024
aa993e7
Merge branch 'dev' into 6295-modale-service-près-de-moi-formulaire-de…
Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 26 additions & 11 deletions packages/code-du-travail-frontend/src/modules/besoin-plus-informations/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -17,6 +17,8 @@ import {
export const BesoinPlusInformations = () => {
const [department, setDepartment] = useState<string>("");
const [hasSearched, setHasSearched] = useState<boolean>(false);
const [inputRef, setInputRef] = useState<HTMLInputElement | null>();
const [linkRef, setLinkRef] = useState<HTMLAnchorElement | null>();
const [result, setResult] = useState<undefined | ServiceRenseignement>(
undefined
);
Expand All @@ -33,12 +35,20 @@ export const BesoinPlusInformations = () => {
emitTrackNumber();
};

useEffect(() => {
if (hasSearched && !result) {
Viczei marked this conversation as resolved.
Show resolved Hide resolved
inputRef?.focus();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ca c'est pour focus l'input lorsqu'il y a une erreur

}
}, [hasSearched, result]);

useEffect(() => {
linkRef?.focus();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

celui ci pour focus le lien

}, [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
Expand All @@ -64,6 +74,17 @@ export const BesoinPlusInformations = () => {
<Input
id="search-service"
label="Saisissez le numéro de votre département"
stateRelatedMessage={
<>
{hasSearched && !result && (
<span>
Aucun service de renseignement n&apos;a été trouvé pour ce
département.
</span>
)}
</>
}
state={hasSearched && !result ? "error" : undefined}
nativeInputProps={{
maxLength: 3,
onChange: (e) => setDepartment(e.target.value),
Expand All @@ -72,6 +93,8 @@ export const BesoinPlusInformations = () => {
onSearchInput();
}
},
"aria-invalid": hasSearched && !result ? true : undefined,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Il pourrait être intéressant de proposer à react dsfr d'intégrer ca nativement

ref: setInputRef,
}}
addon={
<Button
Expand All @@ -91,19 +114,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"}
Expand Down
Loading