chore: cleaning up content on translations page (#3210)

* change description to hint text to avoid confusion with form description which is a different block/element * texte explicatif in french to match design system and differentiate from other form description field * clean up fieldset legend to match what's expected * introduction and description * lint * update text in tests * aria label to match * test * fix swap * consistency * update tests * tests * Updates the cypress tests to get them passing --------- Co-authored-by: Peter Thiessen <[email protected]>
cds-snc · Feb 6, 2024 · faa1263 · faa1263
1 parent fd4bb97
commit faa1263
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 34 deletions.
diff --git a/components/form-builder/app/edit/ModalForm.tsx b/components/form-builder/app/edit/ModalForm.tsx
@@ -64,7 +64,7 @@ export const ModalForm = ({
         />
       </div>
       <div className="mb-2">
-        <ModalLabel>{t("description")}</ModalLabel>
+        <ModalLabel>{t("inputdescription")}</ModalLabel>
         <Hint>{t("descriptionDescription")}</Hint>
         <TextArea
           id={`description--modal--${item.index}`}

diff --git a/components/form-builder/app/translate/Translate.tsx b/components/form-builder/app/translate/Translate.tsx
@@ -126,12 +126,10 @@ export const Translate = () => {
         </div>
 
         <section>
-          <SectionTitle>{t("start")}</SectionTitle>
+          <SectionTitle>{t("formIntroduction")}</SectionTitle>
           {/* FORM TITLE */}
           <fieldset>
-            <FieldsetLegend>
-              {t("formIntroduction")}: {t("title")}
-            </FieldsetLegend>
+            <FieldsetLegend>{t("title")}</FieldsetLegend>
             <div className="flex gap-px border border-gray-300 mb-10 divide-x-2">
               <label htmlFor="form-title-en" className="sr-only">
                 {t(`${primaryLanguage}-text`)}
@@ -182,9 +180,7 @@ export const Translate = () => {
           {/* INTRO */}
           {(form.introduction?.descriptionEn || form.introduction?.descriptionFr) && (
             <fieldset>
-              <FieldsetLegend>
-                {t("formIntroduction")}: {t("description")}
-              </FieldsetLegend>
+              <FieldsetLegend>{t("description")}</FieldsetLegend>
               <div
                 className="flex gap-px border border-gray-300 mb-10 divide-x-2"
                 key={primaryLanguage}
@@ -204,7 +200,7 @@ export const Translate = () => {
                       ]
                     }
                     lang={primaryLanguage}
-                    ariaLabel={t("formIntroduction")}
+                    ariaLabel={t("description")}
                     ariaDescribedBy="form-introduction-english-language"
                   />
                 </div>
@@ -223,7 +219,7 @@ export const Translate = () => {
                       ]
                     }
                     lang={secondaryLanguage}
-                    ariaLabel={t("formIntroduction")}
+                    ariaLabel={t("description")}
                     ariaDescribedBy="form-introduction-french-language"
                   />
                 </div>
@@ -255,9 +251,7 @@ export const Translate = () => {
         <section>
           <SectionTitle>{t("privacyStatement")}</SectionTitle>
           <fieldset>
-            <FieldsetLegend>
-              {t("pageText")}: {t("description")}
-            </FieldsetLegend>
+            <FieldsetLegend>{t("pageText")}</FieldsetLegend>
 
             <div
               className="flex gap-px border border-gray-300 mb-10 divide-x-2"
@@ -316,9 +310,7 @@ export const Translate = () => {
         <section>
           <SectionTitle>{t("confirmationMessage")}</SectionTitle>
           <fieldset>
-            <FieldsetLegend>
-              {t("pageText")}: {t("description")}
-            </FieldsetLegend>
+            <FieldsetLegend>{t("pageText")}</FieldsetLegend>
             <div
               className="flex gap-px border border-gray-300 mb-10 divide-x-2"
               key={primaryLanguage}

diff --git a/cypress/e2e/form-builder/form-builder.cy.ts b/cypress/e2e/form-builder/form-builder.cy.ts
@@ -11,7 +11,7 @@ describe("Test FormBuilder", () => {
   it("Designs a form", () => {
     cy.visitPage("/form-builder/edit");
     cy.typeInField("#formTitle", "Cypress Test Form");
-    cy.typeInField(`[aria-label="Form introduction"]`, "form intro");
+    cy.typeInField(`[aria-label="Introduction"]`, "form description");
     cy.get("button").contains("Add").click();
 
     cy.get('[data-testid="radio"]').click();
@@ -42,7 +42,7 @@ describe("Test FormBuilder", () => {
     // preview form
     cy.get('[data-testid="preview"]').click();
     cy.get("#content h1").should("contain", "Cypress Test Form");
-    cy.get(".gc-richText p").should("contain", "form intro");
+    cy.get(".gc-richText p").should("contain", "form description");
     cy.get("#label-1").should("contain", "Question 1-1");
     cy.get("#desc-1").should("contain", "Question 1 description");
     cy.get(".gc-input-radio").first().should("contain", "option 1");

diff --git a/cypress/e2e/form-builder/language-switching.cy.ts b/cypress/e2e/form-builder/language-switching.cy.ts
@@ -4,7 +4,7 @@ describe("Test FormBuilder language switching", () => {
     cy.visitPage("/form-builder");
   });
 
-  it("Can enter English and French text in Introduction", () => {
+  it("Can enter English and French text in Description", () => {
     // Setup a form with one question
     cy.get("h2").first().click();
     // eslint-disable-next-line cypress/no-unnecessary-waiting
@@ -13,11 +13,11 @@ describe("Test FormBuilder language switching", () => {
     cy.get('[data-testid="richText"]').click();
     cy.get('[data-testid="element-description-add-element"]').click();
 
-    // Enter English Title and Introduction
+    // Enter English Title and Description
     cy.typeInField("#formTitle", "Cypress Test Form");
     cy.get("#formTitle").should("have.value", "Cypress Test Form");
-    cy.typeInField(`[aria-label="Form introduction"]`, "form intro in english");
-    cy.get(`[aria-label="Form introduction"]`).contains("form intro in english");
+    cy.typeInField(`[aria-label="Introduction"]`, "form description in english");
+    cy.get(`[aria-label="Introduction"]`).contains("form description in english");
 
     // Enter some English "page text"
     cy.typeInField('[aria-label="Page text 1"]', "page text in english");
@@ -34,11 +34,11 @@ describe("Test FormBuilder language switching", () => {
     // Switch to French
     cy.get('[data-testid="lang-switcher"]').click();
 
-    // Enter French Title and Introduction
+    // Enter French Title and Description
     cy.typeInField("#formTitle", "Formulaire de test Cypress");
     cy.get("#formTitle").should("have.value", "Formulaire de test Cypress");
-    cy.typeInField(`[aria-label="Form introduction"]`, "form intro in french");
-    cy.get(`[aria-label="Form introduction"]`).contains("form intro in french");
+    cy.typeInField(`[aria-label="Introduction"]`, "form description in french");
+    cy.get(`[aria-label="Introduction"]`).contains("form description in french");
 
     // Enter some French "page text"
     cy.typeInField('[aria-label="Page text 1"]', "page text in french");
@@ -55,15 +55,15 @@ describe("Test FormBuilder language switching", () => {
     // Switch back to English
     cy.get('[data-testid="lang-switcher"]').click();
     cy.get("#formTitle").should("have.value", "Cypress Test Form");
-    cy.get(`[aria-label="Form introduction"]`).contains("form intro in english");
+    cy.get(`[aria-label="Introduction"]`).contains("form description in english");
     cy.get('[aria-label="Page text 1"]').contains("page text in english");
     cy.get('[aria-label="Privacy statement"]').contains("privacy text in english");
     cy.get('[aria-label="Confirmation page and message"]').contains("confirmation text in english");
 
     // Switch back to French
     cy.get('[data-testid="lang-switcher"]').click();
     cy.get("#formTitle").should("have.value", "Formulaire de test Cypress");
-    cy.get(`[aria-label="Form introduction"]`).contains("form intro in french");
+    cy.get(`[aria-label="Introduction"]`).contains("form description in french");
     cy.get('[aria-label="Page text 1"]').contains("page text in french");
     cy.get('[aria-label="Privacy statement"]').contains("privacy text in french");
     cy.get('[aria-label="Confirmation page and message"]').contains("confirmation text in french");

diff --git a/public/static/locales/en/form-builder.json b/public/static/locales/en/form-builder.json
@@ -277,7 +277,7 @@
     "phone": "For example: 111-222-3333"
   },
   "description": "Description",
-  "descriptionDescription": "The description appears below the label and before the field. It’s used to add context and instructions for the field. It’s a great place to specify formatting requirements.",
+  "descriptionDescription": "The hint text appears below the label and before the field. It’s used to add context and instructions for the field. It’s a great place to specify formatting requirements or give an example.",
   "didYouFindThisToolHelpful": "Did you find GC Forms helpful? <a href=\"/en/form-builder/support/contactus\" target=\"_blank\">Provide feedback</a>",
   "downloadCSV": "Export as a spreadsheet",
   "downloadResponsesTable": {
@@ -398,7 +398,7 @@
   "gcFormsTranslate": "Translations",
   "ifYouAreExperiencingProblems": "If you are experiencing any problems with your published form, please <a href=\"/en/form-builder/support\" target=\"_blank\">contact support</a>.",
   "incomplete": "Incomplete",
-  "inputDescription": "Description",
+  "inputDescription": "Hint text",
   "insertLink": "Insert link",
   "lastSaved": "updated at",
   "linkUrl": "Link URL",
@@ -479,7 +479,7 @@
   "richText": "Page text",
   "richTextConfirmationTitle": "Confirmation page and message",
   "richTextEditor": "Rich text editor",
-  "richTextIntroTitle": "Form introduction",
+  "richTextIntroTitle": "Introduction",
   "richTextPrivacyTitle": "Privacy statement",
   "save": "Save",
   "saveAndRequest": "Request publishing ability",

diff --git a/public/static/locales/fr/form-builder.json b/public/static/locales/fr/form-builder.json
@@ -275,8 +275,8 @@
     "number": "Saisissez un chiffre",
     "phone": "Par exemple : 111-222-3333"
   },
-  "description": "Description ",
-  "descriptionDescription": "La description apparaît sous l'étiquette, et avant le champ. Elle est utilisée pour ajouter un contexte et des instructions pour le champ. C'est un endroit idéal pour préciser les exigences de mise en forme.",
+  "description": "Description",
+  "descriptionDescription": "Le texte explicatif apparaît sous l'étiquette et avant le champ. Il est utilisé pour ajouter un contexte et des instructions pour le champ. C'est un endroit idéal pour préciser les exigences de mise en forme ou donner un exemple.",
   "didYouFindThisToolHelpful": "Avez-vous trouvé Formulaires GC pertinent comme outil? <a href=\"/fr/form-builder/support/contactus\" target=\"_blank\">Donner votre avis</a>",
   "downloadCSV": "Exporter en fichier CSV",
   "downloadResponsesTable": {
@@ -397,7 +397,7 @@
   "gcFormsTranslate": "Traductions",
   "ifYouAreExperiencingProblems": "Si vous rencontrez des problèmes avec votre formulaire publié, <a href=\"/fr/form-builder/support\" target=\"_blank\">veuillez contacter l’équipe de soutien.</a>.",
   "incomplete": "Incomplet",
-  "inputDescription": "Description",
+  "inputDescription": "Texte explicatif",
   "insertLink": "Insérer un lien  ",
   "lastSaved": "mise à jour à",
   "linkUrl": "URL du lien",
@@ -478,7 +478,7 @@
   "richText": "Texte",
   "richTextConfirmationTitle": "Page et message de confirmation",
   "richTextEditor": "Éditeur de texte enrichi",
-  "richTextIntroTitle": "Introduction du formulaire ",
+  "richTextIntroTitle": "Description ",
   "richTextPrivacyTitle": "Déclaration de confidentialité",
   "save": "Enregistrer",
   "saveAndRequest": "Demander la capacité de publier",