fix(accessibilite): utilisation de fieldset dans le formulaire "Votre avis nous intéresse" (règle 11.6) (#6798)

Author: maxgfr

packages/code-du-travail-frontend/lint-staged.config.js

@@ -5,6 +5,5 @@ module.exports = {
   "**/*.ts?(x)": () => "tsc -p tsconfig.json --noEmit",
   "*.{js,ts,tsx,jsx}": ["jest --bail --findRelatedTests"],
   "*.{js,ts,tsx,jsx}": [buildEslintCommand],
-  "{pages,src}/**/*.{js,ts,tsx,jsx}": ["yarn lint:css"],
   "*.{js,ts,tsx,jsx,json,md}": ["yarn format"],
 };

packages/code-du-travail-frontend/src/modules/outils/indemnite-depart/feedback/Questionnaire.tsx

@@ -45,27 +45,25 @@ export const Questionnaire = forwardRef<HTMLHeadingElement, QuestionnaireProps>(
     }, [displayError]);
 
     return (
-      <form
-        onSubmit={(e) => {
-          if (!status) {
-            setDisplayError(true);
-            e.preventDefault();
-          } else {
-            trackFeedback(EVENT_ACTION.GLOBAL, status, category);
-            onClick();
-          }
-        }}
-      >
-        <fieldset>
-          <legend>
-            <h2
-              ref={ref}
-              tabIndex={-1}
-              className={fr.cx("fr-text--lg", "fr-mb-2w", "fr-text--bold")}
-            >
-              Comment s&apos;est passée cette simulation pour vous ?
-            </h2>
-          </legend>
+      <div>
+        <h2
+          ref={ref}
+          tabIndex={-1}
+          className={fr.cx("fr-text--lg", "fr-mb-2w", "fr-text--bold")}
+        >
+          Comment s&apos;est passée cette simulation pour vous ?
+        </h2>
+        <form
+          onSubmit={(e) => {
+            if (!status) {
+              setDisplayError(true);
+              e.preventDefault();
+            } else {
+              trackFeedback(EVENT_ACTION.GLOBAL, status, category);
+              onClick();
+            }
+          }}
+        >
           <SmileyQuestionnaireItem
             badEventValue={FEEDBACK_RESULT.NOT_GOOD}
             averageEventValue={FEEDBACK_RESULT.AVERAGE}
@@ -76,23 +74,23 @@ export const Questionnaire = forwardRef<HTMLHeadingElement, QuestionnaireProps>(
             }}
             displayError={displayError}
           />
-        </fieldset>
-        <div
-          className={fr.cx(
-            "fr-btns-group",
-            "fr-btns-group--inline",
-            "fr-mt-2w"
-          )}
-        >
-          <Button
-            priority="secondary"
-            type="submit"
-            nativeButtonProps={{ "aria-disabled": displayError }}
+          <div
+            className={fr.cx(
+              "fr-btns-group",
+              "fr-btns-group--inline",
+              "fr-mt-2w"
+            )}
           >
-            Envoyer
-          </Button>
-        </div>
-      </form>
+            <Button
+              priority="secondary"
+              type="submit"
+              nativeButtonProps={{ "aria-disabled": displayError }}
+            >
+              Envoyer
+            </Button>
+          </div>
+        </form>
+      </div>
     );
   }
 );

packages/code-du-travail-frontend/src/modules/outils/indemnite-depart/feedback/QuestionnaireAdvanced.tsx

@@ -106,7 +106,7 @@ export const QuestionnaireAdvanced = forwardRef<
   };
 
   return (
-    <form ref={formRef} onSubmit={handleSubmit}>
+    <div>
       <h2
         ref={ref}
         tabIndex={-1}
@@ -117,7 +117,7 @@ export const QuestionnaireAdvanced = forwardRef<
       <p className={fr.cx("fr-text--sm", "fr-mb-3w")}>
         Veuillez répondre à au moins une des questions ci-dessous.
       </p>
-      <div>
+      <form ref={formRef} onSubmit={handleSubmit}>
         <NumberedScaleQuestionnaireItem
           title="Que pensez-vous de l'utilisation du simulateur ?"
           values={[
@@ -181,13 +181,17 @@ export const QuestionnaireAdvanced = forwardRef<
           onChange={setFeedbackText}
           id="more-input"
         />
-      </div>
-      <div
-        className={fr.cx("fr-btns-group", "fr-btns-group--inline", "fr-mt-2w")}
-      >
-        <Button type="submit">Envoyer</Button>
-      </div>
-    </form>
+        <div
+          className={fr.cx(
+            "fr-btns-group",
+            "fr-btns-group--inline",
+            "fr-mt-2w"
+          )}
+        >
+          <Button type="submit">Envoyer</Button>
+        </div>
+      </form>
+    </div>
   );
 });
 

packages/code-du-travail-frontend/src/modules/outils/indemnite-depart/feedback/QuestionnaireText.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { fr } from "@codegouvfr/react-dsfr";
-import { Input } from "@codegouvfr/react-dsfr/Input";
 import { useState } from "react";
 
 type QuestionnaireItemProps = {
@@ -21,6 +20,8 @@ export const QuestionnaireText = ({
   const maxCharacters = 200;
   const [remainingChars, setRemainingChars] = useState(maxCharacters);
 
+  const charactersCountThresholds = [100, 50, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const currentLength = e.target.value.length;
     setRemainingChars(maxCharacters - currentLength);
@@ -29,26 +30,28 @@ export const QuestionnaireText = ({
 
   return (
     <div>
-      <Input
-        label={title}
-        textArea
-        nativeTextAreaProps={
-          {
-            id: id,
-            onChange: handleChange,
-            maxLength: maxCharacters,
-            "aria-describedby": `${id}-hint ${id}-remaining`,
-            "data-testid": `${id}`,
-          } as any
-        }
-        hintText={placeholder}
+      <label htmlFor={id} className={fr.cx("fr-label")}>
+        {title}
+        {placeholder && <span className="fr-hint-text">{placeholder}</span>}
+      </label>
+      <textarea
+        id={id}
+        className={fr.cx("fr-input")}
+        maxLength={maxCharacters}
+        aria-describedby={`${id}-remaining`}
+        data-testid={id}
+        onChange={handleChange}
       />
       <p
         id={`${id}-remaining`}
-        className={fr.cx("fr-sr-only")}
-        aria-live="polite"
+        aria-live={
+          charactersCountThresholds.indexOf(remainingChars) !== -1
+            ? "polite"
+            : "off"
+        }
         aria-atomic="true"
         role="status"
+        className="fr-info-text"
       >
         {`${remainingChars} caractère${
           remainingChars > 1 ? "s" : ""

packages/code-du-travail-frontend/src/modules/outils/indemnite-depart/feedback/SmileyQuestionnaireItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, ReactNode } from "react";
 import { FEEDBACK_RESULT } from "./tracking";
 import { fr } from "@codegouvfr/react-dsfr";
 import { BadIcon } from "./icons/BadIcon";
@@ -50,7 +50,9 @@ export const SmileyQuestionnaireItem = ({
       aria-invalid={displayError ? "true" : undefined}
       aria-describedby={displayError ? errorId : undefined}
     >
-      <legend className={srOnlyStyle}>Évaluation de satisfaction</legend>
+      <legend className={fr.cx("fr-sr-only")}>
+        Évaluation de satisfaction
+      </legend>
       <div
         className={fr.cx("fr-btns-group", "fr-btns-group--inline")}
         style={{ justifyContent: "center", gap: "1rem" }}
@@ -132,7 +134,6 @@ export const SmileyQuestionnaireItem = ({
           </label>
         </div>
       </div>
-
       {displayError && (
         <p
           id={errorId}
@@ -198,16 +199,3 @@ const radioTextStyle = css({
     fontSize: "0.875rem",
   },
 });
-
-// Visually hidden but accessible to screen readers
-const srOnlyStyle = css({
-  position: "absolute !important",
-  width: "1px !important",
-  height: "1px !important",
-  padding: "0 !important",
-  margin: "-1px !important",
-  overflow: "hidden !important",
-  clip: "rect(0, 0, 0, 0) !important",
-  whiteSpace: "nowrap !important",
-  border: "0 !important",
-});