From 846a02cba8b361f3ebba713a217fc38061a052e7 Mon Sep 17 00:00:00 2001
From: victor <victor.zeinstra@gmail.com>
Date: Thu, 19 Dec 2024 12:05:32 +0100
Subject: [PATCH] fix: rgaa gestion des focus

---
 .../modules/layout/feedback/FeedbackContent.tsx   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackContent.tsx b/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackContent.tsx
index 7a553502f0..3c6b1b3e1d 100644
--- a/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackContent.tsx
+++ b/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackContent.tsx
@@ -3,7 +3,7 @@ import { Button } from "@codegouvfr/react-dsfr/Button";
 import { Checkbox } from "@codegouvfr/react-dsfr/Checkbox";
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import { FeedbackActionChoiceValue } from "./tracking";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const MAX_LENGTH_SUGGESTION = 500;
 
@@ -18,6 +18,9 @@ export type FeedbackDataSent = {
 };
 
 export const FeedbackContent = (props: Props) => {
+  const [firstCheckboxRef, setFirstCheckboxRef] =
+    useState<HTMLInputElement | null>();
+  const [textAreaRef, setTextAreaRef] = useState<HTMLTextAreaElement | null>();
   const [categories, setCategories] = useState<FeedbackActionChoiceValue[]>([]);
   const [suggestion, setSuggestion] = useState<string | undefined>(undefined);
   const [hasCheckBoxError, setHasCheckBoxError] = useState<boolean>(false);
@@ -77,6 +80,14 @@ export const FeedbackContent = (props: Props) => {
     400, 300, 200, 100, 50, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0,
   ];
 
+  useEffect(() => {
+    if (props.type === "negative") {
+      firstCheckboxRef?.focus();
+    } else {
+      textAreaRef?.focus();
+    }
+  });
+
   return (
     <>
       <h2 className={fr.cx("fr-h5")}>Merci pour votre réponse.</h2>
@@ -90,6 +101,7 @@ export const FeedbackContent = (props: Props) => {
                 name: "unclear",
                 value: "unclear" as FeedbackActionChoiceValue,
                 onChange: onChangeCategories,
+                ref: setFirstCheckboxRef,
               },
             },
             {
@@ -128,6 +140,7 @@ export const FeedbackContent = (props: Props) => {
         nativeTextAreaProps={{
           onChange: onInputSuggestion,
           value: suggestion,
+          ref: setTextAreaRef,
         }}
         state={hasSuggestionError ? "error" : "default"}
         stateRelatedMessage={errorMessageSuggestion}