fix(outils trouver sa CC): prise en compte des retours RGAA (#6413)

* fix(test e2e): modification de la date pour ête dans 18 mois * fix(outils trouver sa CC): prise en compte des retours RGAA * lint * focus result * fix test * fix alt image * fix h2 entreprise --------- Co-authored-by: Martial Maillot <[email protected]>
SocialGouv · Jan 14, 2025 · 8fb2849 · 8fb2849
1 parent 9f266a9
commit 8fb2849
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 38 deletions.
diff --git a/packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx b/packages/code-du-travail-frontend/src/modules/common/Autocomplete/Autocomplete.tsx
@@ -47,6 +47,8 @@ export const Autocomplete = <K,>({
   const [selectedResult, setSelectedResult] = useState<K | undefined>(
     defaultValue
   );
+  const [inputRef, setInputRef] = useState<HTMLInputElement | null>();
+
   const [suggestions, setSuggestions] = useState<K[]>([]);
   const {
     isOpen,
@@ -86,11 +88,14 @@ export const Autocomplete = <K,>({
                       if (onSearch) onSearch("", []);
                       setValue("");
                       setSuggestions([]);
+                      inputRef?.focus();
                     }}
                     priority="tertiary no outline"
                     title="Effacer la sélection"
                     type="button"
-                  />
+                  >
+                    <span className={"fr-sr-only"}>Effacer la sélection</span>
+                  </Button>
                 )}
                 {(loading || (lineAsLink && selectedResult)) && (
                   <Image
@@ -131,6 +136,7 @@ export const Autocomplete = <K,>({
             },
             // @ts-ignore
             "data-testid": dataTestId,
+            ref: setInputRef,
           }}
           className={`${fr.cx("fr-mb-0")}`}
           hintText={hintText}

diff --git a/...du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearch.tsx b/...du-travail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearch.tsx
@@ -3,7 +3,6 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { useState } from "react";
 
 import Button from "@codegouvfr/react-dsfr/Button";
-import { ButtonStyle } from "../style";
 import { AgreementSearchInput } from "./AgreementSearchInput";
 import { useAgreementSearchTracking } from "../tracking";
 
@@ -17,22 +16,22 @@ export const AgreementSearch = () => {
           setNoResult(query.length > 2 && !result?.length);
         }}
       />
-      <div className={fr.cx("fr-mt-2w")}>
+      <div className={fr.cx("fr-mt-2w", "fr-grid-row")}>
         <Button
           linkProps={{
             href: "/outils/convention-collective",
             onClick: emitPreviousEvent,
           }}
           priority="secondary"
-          className={ButtonStyle}
+          iconId="fr-icon-arrow-left-line"
         >
           Précédent
         </Button>
         {noResult && (
           <Button
             linkProps={{ href: `/outils/convention-collective/entreprise` }}
             priority="secondary"
-            className={`${fr.cx("fr-ml-md-2w", "fr-mt-2w", "fr-mt-md-0")} ${ButtonStyle}`}
+            className={fr.cx("fr-ml-2w")}
           >
             Rechercher par entreprise
           </Button>

diff --git a/...avail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx b/...avail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchInput.tsx
@@ -52,9 +52,9 @@ export const AgreementSearchInput = ({ onSearch }: Props) => {
   };
   return (
     <>
-      <p className={fr.cx("fr-h4", "fr-mt-2w", "fr-mb-0")}>
+      <h2 className={fr.cx("fr-h4", "fr-mt-2w", "fr-mb-0")}>
         Précisez et sélectionnez votre convention collective
-      </p>
+      </h2>
       <div className={fr.cx("fr-mt-2w")}>
         <Autocomplete<Agreement>
           dataTestId="AgreementSearchAutocomplete"
@@ -103,6 +103,7 @@ export const AgreementSearchInput = ({ onSearch }: Props) => {
         {searchState === "notFoundSearch" && (
           <Alert
             className={fr.cx("fr-mt-2w")}
+            as="h2"
             title="Vous ne trouvez pas votre convention collective&nbsp;?"
             description={
               <>

diff --git a/...code-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsIntro.tsx b/...code-du-travail-frontend/src/modules/convention-collective/Agreements/AgreementsIntro.tsx
@@ -14,7 +14,7 @@ export const AgreementsIntro = () => {
           <Image
             priority
             src={AgreementSearch}
-            alt="Trouver sa convention collective"
+            alt=""
             className={`${fr.cx("fr-unhidden-md", "fr-hidden")} ${ImageContainer}`}
           />
           <h2 className={fr.cx("fr-mt-md-2v")}>

diff --git a/packages/code-du-travail-frontend/src/modules/convention-collective/style.ts b/packages/code-du-travail-frontend/src/modules/convention-collective/style.ts
@@ -7,11 +7,3 @@ export const CardTitleStyle = css({
     },
   },
 });
-
-export const ButtonStyle = css({
-  maxH: "40px!",
-  width: "100%!",
-  md: {
-    w: "auto!",
-  },
-});
diff --git a/...l-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearch.tsx b/...l-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearch.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { fr } from "@codegouvfr/react-dsfr";
 import Button from "@codegouvfr/react-dsfr/Button";
-
-import { ButtonStyle } from "../../convention-collective/style";
 import { EnterpriseAgreementSearchInput } from "./EnterpriseAgreementSearchInput";
 import { useSearchParams } from "next/navigation";
 import { useEnterpriseAgreementSearchTracking } from "./tracking";
@@ -32,7 +30,7 @@ export const EnterpriseAgreementSearch = ({ widgetMode = false }: Props) => {
               onClick: emitPreviousEvent,
             }}
             priority="secondary"
-            className={ButtonStyle}
+            iconId="fr-icon-arrow-left-line"
           >
             Précédent
           </Button>

diff --git a/...ntend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx b/...ntend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSearchInput.tsx
@@ -6,15 +6,15 @@ import Input from "@codegouvfr/react-dsfr/Input";
 import Badge from "@codegouvfr/react-dsfr/Badge";
 import Alert from "@codegouvfr/react-dsfr/Alert";
 import { Card } from "@codegouvfr/react-dsfr/Card";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { css } from "@styled-system/css";
 
 import Spinner from "../../common/Spinner.svg";
 import { LocationSearchInput } from "../../Location/LocationSearchInput";
 import { searchEnterprises } from "../queries";
 import { Enterprise } from "../types";
 import { ApiGeoResult } from "../../Location/searchCities";
-import { CardTitleStyle, ButtonStyle } from "../../convention-collective/style";
+import { CardTitleStyle } from "../../convention-collective/style";
 import { useEnterpriseAgreementSearchTracking } from "./tracking";
 
 type Props = {
@@ -44,6 +44,8 @@ export const EnterpriseAgreementSearchInput = ({
   );
   const [enterprises, setEnterprises] = useState<Enterprise[]>();
   const [error, setError] = useState("");
+  const resultRef = useRef<HTMLDivElement>(null);
+
   const getStateMessage = () => {
     switch (searchState) {
       case "notFoundSearch":
@@ -104,6 +106,7 @@ export const EnterpriseAgreementSearchInput = ({
         search.length > 0 && !result.length ? "notFoundSearch" : "noSearch"
       );
       setEnterprises(result);
+      resultRef.current?.focus();
     } catch (e) {
       setSearchState("errorSearch");
       setEnterprises(undefined);
@@ -119,16 +122,12 @@ export const EnterpriseAgreementSearchInput = ({
   }, [defaultSearch]);
   return (
     <>
-      <h2 className={fr.cx("fr-h4", "fr-mt-2w", "fr-mb-0")}>
-        Précisez votre entreprise
-      </h2>
+      <h2 className={fr.cx("fr-h4", "fr-my-2w")}>Précisez votre entreprise</h2>
       <form
         className={fr.cx(
           "fr-grid-row",
-          "fr-grid-row--top",
           "fr-grid-row--gutters",
           "fr-grid-row--bottom",
-          "fr-mt-2w",
           "fr-mb-0"
         )}
         onSubmit={async (event) => {
@@ -175,7 +174,6 @@ export const EnterpriseAgreementSearchInput = ({
           defaultValue={location}
           className={fr.cx(
             "fr-col-12",
-            "fr-col-xl",
             "fr-col-md",
             getStateMargin(),
             "fr-mt-2w",
@@ -189,7 +187,6 @@ export const EnterpriseAgreementSearchInput = ({
             type="submit"
             iconPosition="right"
             iconId="fr-icon-search-line"
-            className={`${ButtonStyle}`}
           >
             Rechercher
           </Button>
@@ -199,12 +196,12 @@ export const EnterpriseAgreementSearchInput = ({
       <div>
         <div className={fr.cx("fr-mt-2w")}>
           {!!enterprises?.length && !loading && (
-            <p className={fr.cx("fr-h5")}>
+            <h2 className={fr.cx("fr-h5")} tabIndex={-1} ref={resultRef}>
               {enterprises.length}
               {enterprises.length > 1
                 ? " entreprises trouvées"
                 : " entreprise trouvée"}
-            </p>
+            </h2>
           )}
           {loading && (
             <div className={fr.cx("fr-grid-row")}>
@@ -218,7 +215,8 @@ export const EnterpriseAgreementSearchInput = ({
           )}
           {searchState === "notFoundSearch" && (
             <Alert
-              title={<>Vous ne trouvez pas votre entreprise&nbsp;?</>}
+              title="Vous ne trouvez pas votre entreprise&nbsp;?"
+              as="h2"
               description={
                 <>
                   <p>Il peut y avoir plusieurs explications à cela&nbsp;:</p>
@@ -276,7 +274,9 @@ export const EnterpriseAgreementSearchInput = ({
           ))}
       </div>
       <div>
-        <p
+        <div
+          role="heading"
+          aria-level={2}
           className={fr.cx(
             "fr-text--bold",
             !loading ? "fr-mt-5w" : "fr-mt-2w",
@@ -285,7 +285,7 @@ export const EnterpriseAgreementSearchInput = ({
         >
           Votre recherche concerne les assistants maternels, employés de
           maison&nbsp;?
-        </p>
+        </div>
         <Card
           border
           enlargeLink

diff --git a/...rontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSelection.tsx b/...rontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSelection.tsx
@@ -3,10 +3,11 @@ import { fr } from "@codegouvfr/react-dsfr";
 import Card from "@codegouvfr/react-dsfr/Card";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { Enterprise } from "../types";
-import { ButtonStyle, CardTitleStyle } from "../../convention-collective/style";
+import { CardTitleStyle } from "../../convention-collective/style";
 import { css } from "@styled-system/css";
 import { useSearchParams } from "next/navigation";
 import { useEnterpriseAgreementSearchTracking } from "./tracking";
+import { useEffect, useRef } from "react";
 
 type Props = {
   enterprise: Omit<Enterprise, "complements">;
@@ -20,11 +21,23 @@ export const EnterpriseAgreementSelection = ({
   const searchParams = useSearchParams();
   const { emitSelectEnterpriseAgreementEvent } =
     useEnterpriseAgreementSearchTracking();
+
+  const resultRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    resultRef.current?.focus();
+  }, []);
   return (
     <>
-      <h2 className={fr.cx("fr-h4", "fr-mt-2w", "fr-mb-0")}>
+      <h2
+        className={fr.cx("fr-h4", "fr-mt-2w", "fr-mb-0")}
+        tabIndex={-1}
+        ref={resultRef}
+      >
         {enterprise.conventions.length === 0 ? (
-          `Aucune convention collective n'a été déclarée pour l'entreprise`
+          <>
+            Aucune convention collective n&apos;a été déclarée pour
+            l&apos;entreprise
+          </>
         ) : enterprise.conventions.length === 1 ? (
           <>1 convention collective trouvée pour&nbsp;:</>
         ) : (
@@ -121,7 +134,7 @@ export const EnterpriseAgreementSelection = ({
               : `/outils/convention-collective/entreprise?${searchParams?.toString()}`,
           }}
           priority="secondary"
-          className={`${fr.cx("fr-col-12", "fr-col-md-2")} ${ButtonStyle}`}
+          iconId="fr-icon-arrow-left-line"
         >
           Précédent
         </Button>

diff --git a/.../code-du-travail-frontend/src/modules/outils/convention-collective/FindAgreementBlock.tsx b/.../code-du-travail-frontend/src/modules/outils/convention-collective/FindAgreementBlock.tsx
@@ -25,7 +25,7 @@ export const FindAgreementBlock = ({
         <Image
           priority
           src={AgreementSearch}
-          alt={title}
+          alt=""
           className={fr.cx("fr-unhidden-md", "fr-hidden")}
         />
         <h1 className={fr.cx("fr-h3", "fr-mt-1w", "fr-mb-1w")}>{title}</h1>