feat: ajout de aria-live sur compteur caractères suggestion (#6379)

* feat: ajout de aria-live sur compteur caractères suggestion * chore: clean * feat: rgaa liaison entre bouton oui-non et titre * fix: rgaa gestion des focus * chore: snap --------- Co-authored-by: victor <[email protected]>
SocialGouv · Dec 19, 2024 · 70a216b · 70a216b
1 parent dc52e7e
commit 70a216b
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 3 deletions.
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
@@ -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);
@@ -73,6 +76,17 @@ export const FeedbackContent = (props: Props) => {
       });
     }
   };
+  const charactersCountThresholds = [
+    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 (
     <>
@@ -87,6 +101,7 @@ export const FeedbackContent = (props: Props) => {
                 name: "unclear",
                 value: "unclear" as FeedbackActionChoiceValue,
                 onChange: onChangeCategories,
+                ref: setFirstCheckboxRef,
               },
             },
             {
@@ -125,6 +140,7 @@ export const FeedbackContent = (props: Props) => {
         nativeTextAreaProps={{
           onChange: onInputSuggestion,
           value: suggestion,
+          ref: setTextAreaRef,
         }}
         state={hasSuggestionError ? "error" : "default"}
         stateRelatedMessage={errorMessageSuggestion}
@@ -135,6 +151,13 @@ export const FeedbackContent = (props: Props) => {
           "fr-mt-0",
           "fr-mb-3w"
         )}
+        aria-live={
+          charactersCountThresholds.indexOf(remainingCharacters) !== -1
+            ? "polite"
+            : "off"
+        }
+        aria-atomic
+        data-testid="characterInfo"
       >
         {`${remainingCharacters} caractère${
           remainingCharacters > 1 ? "s" : ""

diff --git a/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackDefault.tsx b/packages/code-du-travail-frontend/src/modules/layout/feedback/FeedbackDefault.tsx
@@ -10,7 +10,7 @@ export const FeedbackDefault = (props: Props) => {
   return (
     <div className="fr-grid-row">
       <div className="fr-col-12 fr-col-md">
-        <h2 className={fr.cx("fr-h5", "fr-mb-md-0")}>
+        <h2 className={fr.cx("fr-h5", "fr-mb-md-0")} id="feedback-title">
           Avez-vous trouvé la réponse à votre question ?
         </h2>
       </div>
@@ -20,10 +20,16 @@ export const FeedbackDefault = (props: Props) => {
           priority="secondary"
           className={fr.cx("fr-mr-2w")}
           onClick={props.onClickNo}
+          aria-describedby="feedback-title"
         >
           Non
         </Button>
-        <Button type="button" priority="secondary" onClick={props.onClickYes}>
+        <Button
+          type="button"
+          priority="secondary"
+          onClick={props.onClickYes}
+          aria-describedby="feedback-title"
+        >
           Oui
         </Button>
       </div>

diff --git a/...s/code-du-travail-frontend/src/modules/layout/feedback/__tests__/FeedbackContent.test.tsx b/...s/code-du-travail-frontend/src/modules/layout/feedback/__tests__/FeedbackContent.test.tsx
@@ -2,6 +2,8 @@ import { render } from "@testing-library/react";
 import React from "react";
 
 import { FeedbackContent } from "../FeedbackContent";
+import { UserAction } from "src/common";
+import { ui } from "./ui";
 
 describe("<FeedbackContent />", () => {
   it("should match snapshot for positive", () => {
@@ -17,4 +19,16 @@ describe("<FeedbackContent />", () => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it("should warn politely on certain threshold", () => {
+    render(<FeedbackContent onSubmit={jest.fn} type="positive" />);
+    const userAction = new UserAction();
+    expect(ui.characterInfo.get()).toHaveAttribute("aria-atomic");
+    userAction.setInput(ui.input.get(), "a".repeat(99));
+    expect(ui.characterInfo.get()).toHaveAttribute("aria-live", "off");
+    userAction.setInput(ui.input.get(), "a".repeat(100));
+    expect(ui.characterInfo.get()).toHaveAttribute("aria-live", "polite");
+    userAction.setInput(ui.input.get(), "a".repeat(101));
+    expect(ui.characterInfo.get()).toHaveAttribute("aria-live", "off");
+  });
 });
diff --git a/...rontend/src/modules/layout/feedback/__tests__/__snapshots__/FeedbackContent.test.tsx.snap b/...rontend/src/modules/layout/feedback/__tests__/__snapshots__/FeedbackContent.test.tsx.snap
@@ -116,7 +116,10 @@ exports[`<FeedbackContent /> should match snapshot for negative 1`] = `
     />
   </div>
   <p
+    aria-atomic="true"
+    aria-live="off"
     class="fr-info-text fr-mt-0 fr-mb-3w"
+    data-testid="characterInfo"
   >
     500 caractères restants
   </p>
@@ -157,7 +160,10 @@ exports[`<FeedbackContent /> should match snapshot for positive 1`] = `
     />
   </div>
   <p
+    aria-atomic="true"
+    aria-live="off"
     class="fr-info-text fr-mt-0 fr-mb-3w"
+    data-testid="characterInfo"
   >
     500 caractères restants
   </p>

diff --git a/...rontend/src/modules/layout/feedback/__tests__/__snapshots__/FeedbackDefault.test.tsx.snap b/...rontend/src/modules/layout/feedback/__tests__/__snapshots__/FeedbackDefault.test.tsx.snap
@@ -10,19 +10,22 @@ exports[`<FeedbackDefault /> should match snapshot 1`] = `
     >
       <h2
         class="fr-h5 fr-mb-md-0"
+        id="feedback-title"
       >
         Avez-vous trouvé la réponse à votre question ?
       </h2>
     </div>
     <div>
       <button
+        aria-describedby="feedback-title"
         class="fr-btn fr-btn--secondary fr-mr-2w"
         id="fr-button-:r0:"
         type="button"
       >
         Non
       </button>
       <button
+        aria-describedby="feedback-title"
         class="fr-btn fr-btn--secondary"
         id="fr-button-:r1:"
         type="button"

diff --git a/packages/code-du-travail-frontend/src/modules/layout/feedback/__tests__/ui.ts b/packages/code-du-travail-frontend/src/modules/layout/feedback/__tests__/ui.ts
@@ -0,0 +1,6 @@
+import { byLabelText, byTestId } from "testing-library-selector";
+
+export const ui = {
+  input: byLabelText(/Faire une suggestion pour améliorer cette page/),
+  characterInfo: byTestId("characterInfo"),
+};
diff --git a/...l-frontend/src/modules/modeles-de-courriers/__tests__/__snapshots__/modeles.test.tsx.snap b/...l-frontend/src/modules/modeles-de-courriers/__tests__/__snapshots__/modeles.test.tsx.snap
@@ -214,19 +214,22 @@ exports[`<LetterModel /> affiche un modèle de document 1`] = `
           >
             <h2
               class="fr-h5 fr-mb-md-0"
+              id="feedback-title"
             >
               Avez-vous trouvé la réponse à votre question ?
             </h2>
           </div>
           <div>
             <button
+              aria-describedby="feedback-title"
               class="fr-btn fr-btn--secondary fr-mr-2w"
               id="fr-button-:r7:"
               type="button"
             >
               Non
             </button>
             <button
+              aria-describedby="feedback-title"
               class="fr-btn fr-btn--secondary"
               id="fr-button-:r8:"
               type="button"