adds abbr tags and definition lists to improve a11y (#242)

Author: remy-mazerolle-esdc

frontend/app/.server/locales/common-en.json

@@ -1,4 +1,5 @@
 {
+  "colon": ":",
   "meta": {
     "author": "Employment and Social Development Canada",
     "description": "The Canada Disability Benefit Estimator is a tool to find out how much money you could get from the Canada Disability Benefit. This is not an application for benefits.",

frontend/app/.server/locales/common-fr.json

@@ -1,4 +1,5 @@
 {
+  "colon": "\u00a0:",
   "meta": {
     "author": "Emploi et Développement social Canada",
     "description": "L'Estimateur de la prestation canadienne pour les personnes handicapées est un outil pour déterminer le montant que vous pourriez recevoir de la Prestations canadiennes des personnes handicapées. Il ne s'agit pas d'une demande de prestations.",

frontend/app/.server/locales/estimator-en.json

@@ -5,17 +5,17 @@
     "fields": {
       "claimed-income": {
         "error": {
-          "invalid": "Your UCCB and RDSP income is invalid"
+          "invalid": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is invalid"
         },
         "info-label": "Information",
-        "label": "Your UCCB and RDSP income"
+        "label": "Your <abbrUCCB>UCCB</abbrUCCB> and <abbrRDSP>RDSP</abbrRDSP> income"
       },
       "claimed-repayment": {
         "error": {
-          "invalid": "Your UCCB and RDSP repayment is invalid"
+          "invalid": "Your <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is invalid"
         },
         "info-label": "Information",
-        "label": "Your UCCB and RDSP repayment"
+        "label": "Your <abbrUCCB>UCCB</abbrUCCB> and <abbrRDSP>RDSP</abbrRDSP> repayment"
       },
       "net-income": {
         "error": {
@@ -28,17 +28,17 @@
       "partner": {
         "claimed-income": {
           "error": {
-            "invalid": "Your partner's UCCB and RDSP income is invalid"
+            "invalid": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> income is invalid"
           },
           "info-label": "Information",
-          "label": "Your partner's UCCB and RDSP income"
+          "label": "Your partner's <abbrUCCB>UCCB</abbrUCCB> and <abbrRDSP>RDSP</abbrRDSP> income"
         },
         "claimed-repayment": {
           "error": {
-            "invalid": "Your partner's UCCB and RDSP repayment is invalid"
+            "invalid": "Your partner's <abbr>UCCB</abbr> and <abbr>RDSP</abbr> repayment is invalid"
           },
           "info-label": "Information",
-          "label": "Your partner's UCCB and RDSP repayment"
+          "label": "Your partner's <abbrUCCB>UCCB</abbrUCCB> and <abbrRDSP>RDSP</abbrRDSP> repayment"
         },
         "net-income": {
           "error": {
@@ -70,16 +70,17 @@
       "married": "To estimate your benefits, we will need the following information from your {{year}} tax return and your partner's {{year}} tax return.",
       "single": "To estimate your benefits, we will need the following information from your {{year}} tax return:"
     },
+
     "info": {
-      "CDB": "<dt>CDB:</dt><dd>Canada Disability Benefit</dd>",
+      "CDB": { "term": "CDB", "text": "Canada Disability Benefit" },
       "claimed-income": "Income claimed by you (line 11700 and line 12500 of your tax return). If field is left blank, we will assume it is zero.",
       "claimed-repayment": "Repayment claimed by you (line 21300 and line 23200 of your tax return). If field is left blank, we will assume it is zero.",
       "net-income": "Line 23600 on your tax return. If your net income is negative, enter '0'",
       "partner-claimed-income": "Income claimed by your spouse/partner (line 11700 and line 12500 of their tax return). If field is left blank, we will assume it is zero.",
       "partner-claimed-repayment": "Repayment claimed by your spouse/partner (line 21300 and line 23200 of their tax return). If field is left blank, we will assume it is zero.",
       "partner-net-income": "Line 23600 on your spouse/partners tax return. If your the net income is negative, enter '0'",
-      "RDSP": "<dt>RDSP:</dt><dd>Registered Disability Savings Plan</dd>",
-      "UCCB": "<dt>UCCB:</dt><dd>Universal Child Care Benefit</dd>",
+      "RDSP": { "term": "RDSP", "text": "Registered Disability Savings Plan" },
+      "UCCB": { "term": "UCCB", "text": "Universal Child Care Benefit" },
       "working-income": {
         "items": [
           "Employment income (line 10100)",
@@ -98,7 +99,6 @@
     "page-title": "Step 2 of 2: Income"
   },
   "index": {
-    "about": "The CDB Estimator is a tool to help users estimate their potential Canada Disability Benefit amount",
     "breadcrumb": "Estimator",
     "content": {
       "completion-time": "It will take about 5 to 10 minutes to complete.",
@@ -126,20 +126,22 @@
   "marital-status": {
     "additional-info": {
       "common-law": {
+        "text": "you are living in a conjugal relationship with someone to whom you are not married and to whom at least one of the following situations applies. They:",
         "item1": "have been living with you for at least 12 continuous months. This includes any period you were separated for less than 90 days because of a breakdown in your relationship",
         "item2": "are the parent of your child by birth or adoption",
         "item3": "have custody and control of your child (or had custody and control immediately before the child turned 19 years of age) and your child is wholly dependent on that person for support",
-        "text": "<strong>Common-law:</strong> you are living in a conjugal relationship with someone to whom you are not married and to whom at least one of the following situations applies. They:"
+        "term": "Common-law:"
       },
-      "divorced": "<strong>Divorced:</strong> you were married and are now legally divorced",
-      "married": "<strong>Married:</strong> you are legally married to someone.",
+      "divorced": { "term": "Divorced:", "text": "you were married and are now legally divorced" },
+      "married": { "term": "Married:", "text": "you are legally married to someone." },
       "separated": {
-        "p1": "<strong>Separated:</strong> you have been living apart from your spouse or common-law partner because of a breakdown in the relationship for a period of at least 90 days and you have not reconciled.",
-        "p2": "Once you have been separated for 90 days, the effective day of your separation is the date you started living apart. You would still be considered to have a spouse or common-law partner if there is no breakdown in the relationship and you were living apart for reasons such as work, studies, or health problems.",
-        "p3": "Note: Generally, you are not considered separated if your spouse or common-law partner is incarcerated or does not live in Canada, as long as there is no breakdown in your relationship"
+        "term": "Separated:",
+        "text": "you have been living apart from your spouse or common-law partner because of a breakdown in the relationship for a period of at least 90 days and you have not reconciled.",
+        "p1": "Once you have been separated for 90 days, the effective day of your separation is the date you started living apart. You would still be considered to have a spouse or common-law partner if there is no breakdown in the relationship and you were living apart for reasons such as work, studies, or health problems.",
+        "p2": "Note: Generally, you are not considered separated if your spouse or common-law partner is incarcerated or does not live in Canada, as long as there is no breakdown in your relationship"
       },
-      "single": "<strong>Single:</strong> you are single and another status does not apply",
-      "widowed": "<strong>Widowed:</strong> your spouse or common-law partner is deceased."
+      "single": { "term": "Single:", "text": "you are single and another status does not apply" },
+      "widowed": { "term": "Widowed:", "text": "your spouse or common-law partner is deceased." }
     },
     "breadcrumb": "Marital Status",
     "fields": {

frontend/app/.server/locales/estimator-fr.json

@@ -5,17 +5,17 @@
     "fields": {
       "claimed-income": {
         "error": {
-          "invalid": "Votre revenu de PUGE et REEI est invalide"
+          "invalid": "Votre revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est invalide"
         },
         "info-label": "Information",
-        "label": "Votre revenu de PUGE et REEI"
+        "label": "Votre revenu de <abbrUCCB>PUGE</abbrUCCB> et <abbrRDSP>REEI</abbrRDSP>"
       },
       "claimed-repayment": {
         "error": {
-          "invalid": "Votre remboursement de PUGE et REEI est invalide"
+          "invalid": "Votre remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> est invalide"
         },
         "info-label": "Information",
-        "label": "Votre remboursement de PUGE et REEI"
+        "label": "Votre remboursement de <abbrUCCB>PUGE</abbrUCCB> et <abbrRDSP>REEI</abbrRDSP>"
       },
       "net-income": {
         "error": {
@@ -28,17 +28,17 @@
       "partner": {
         "claimed-income": {
           "error": {
-            "invalid": "Le revenu de PUGE et REEI de votre partenaire est invalide"
+            "invalid": "Le revenu de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est invalide"
           },
           "info-label": "Information",
-          "label": "Le revenu de PUGE et REEI de votre partenaire"
+          "label": "Le revenu de <abbrUCCB>PUGE</abbrUCCB> et <abbrRDSP>REEI</abbrRDSP> de votre partenaire"
         },
         "claimed-repayment": {
           "error": {
-            "invalid": "Le remboursement de PUGE et REEI de votre partenaire est invalid"
+            "invalid": "Le remboursement de <abbr>PUGE</abbr> et <abbr>REEI</abbr> de votre partenaire est invalid"
           },
           "info-label": "Information",
-          "label": "Le remboursement de PUGE et REEI de votre partenaire"
+          "label": "Le remboursement de <abbrUCCB>PUGE</abbrUCCB> et <abbrRDSP>REEI</abbrRDSP> de votre partenaire"
         },
         "net-income": {
           "error": {
@@ -70,16 +70,17 @@
       "married": "Pour estimer vos prestations, nous aurons besoin des renseignements suivants de votre déclaration de revenus de {{year}} et de la déclaration de revenus de {{year}} de votre partenaire.",
       "single": "Pour estimer vos prestations, nous aurons besoin des renseignements suivants de votre déclaration de revenus de {{year}}. "
     },
+
     "info": {
-      "CDB": "<dt>PCPH\u00A0:</dt><dd>Prestation canadienne des personnes handicapées</dd>",
+      "CDB": { "term": "PCPH", "text": "Prestation canadienne des personnes handicapées" },
       "claimed-income": "Revenu que vous avez demandé (ligne 11700 et ligne 12500 de votre déclaration de revenus). Si le champ est laisse vide, nous supposerons qu'il est égal à zéro.",
       "claimed-repayment": "Remboursement que vous avez demandé (ligne 21300 et ligne 23200 de votre déclaration de revenus). Si le champ est laisse vide, nous supposerons qu'il est égal à zéro.",
       "net-income": "Ligne 23600 de votre déclaration. Si votre revenu net est négatif, entrez '0'",
       "partner-claimed-income": "Revenu que votre conjoint a demandé (ligne 11700 et ligne 12500 de leur déclaration de revenus). Si le champ est laisse vide, nous supposerons qu'il est égal à zéro.",
       "partner-claimed-repayment": "Remboursement que votre conjoint a demandé (ligne 21300 et ligne 23200 de leur déclaration de revenus). Si le champ est laisse vide, nous supposerons qu'il est égal à zéro.",
       "partner-net-income": "Ligne 23600 de la déclaration de votre conjoint.",
-      "RDSP": "<dt>REEI\u00A0:</dt><dd>Revenus d'un régime enregistré d'épargne-invalidité</dd>",
-      "UCCB": "<dt>PUGE\u00A0:</dt><dd>Prestation universelle pour la garde d'enfants</dd>",
+      "RDSP": { "term": "REEI", "text": "Revenus d'un régime enregistré d'épargne-invalidité" },
+      "UCCB": { "term": "PUGE", "text": "Prestation universelle pour la garde d'enfants" },
       "working-income": {
         "items": [
           "Revenus d'emploi (linge 10100)",
@@ -98,7 +99,6 @@
     "page-title": "Étape 2 de 2\u00A0: Revenu"
   },
   "index": {
-    "about": "L'estimateur de la PCPH est un outil pour aider les utilisateurs à estimer le montant potentiel de leur Prestation canadienne pour les personnes handicapées",
     "breadcrumb": "Estimateur",
     "content": {
       "completion-time": "Il vous faudra environ 5 à 10 minutes pour obtenir une estimation.",
@@ -126,20 +126,25 @@
   "marital-status": {
     "additional-info": {
       "common-law": {
+        "term": "Conjoint de fait\u00a0:",
         "item1": "elle vit avec vous depuis au moins 12 mois sans interruption. Cela comprend les périodes de moins de 90 jours où vous avez vécu séparément en raison de la rupture de votre union;",
         "item2": "elle est le parent de votre enfant, par la naissance ou l'adoption;",
         "item3": "elle a la garde, la surveillance et la charge entière de votre enfant (ou elle en avait la garde et la surveillance juste avant que l'enfant atteigne l'âge de 19 ans).",
-        "text": "<strong>Conjoint de fait\u00a0:</strong> vous vivez en relation conjugale avec une personne avec qui vous n'êtes pas marié et à qui au moins l'une des situations suivantes s'applique\u00a0:"
+        "text": "vous vivez en relation conjugale avec une personne avec qui vous n'êtes pas marié et à qui au moins l'une des situations suivantes s'applique\u00a0:"
       },
-      "divorced": "<strong>Divorcé\u00a0:</strong> vous étiez marié et êtes maintenant divorcé légalement",
-      "married": "<strong>Marié\u00a0:</strong> vous êtes légalement marié à quelqu'un.",
+      "divorced": { "term": "Divorcé\u00a0:", "text": "vous étiez marié et êtes maintenant divorcé légalement" },
+      "married": { "term": "Marié\u00a0:", "text": "vous êtes légalement marié à quelqu'un." },
       "separated": {
-        "p1": "<strong>Séparé\u00a0:</strong> vous vivez séparément de votre époux ou conjoint de fait depuis 90 jours ou plus en raison de la rupture de votre union, et il n'y a pas de réconciliation.",
-        "p2": "Lorsque vous êtes séparé depuis 90 jours, la date d'entrée en vigueur de votre séparation est le jour où vous et votre époux ou conjoint de fait avez commencé à vivre séparément. Vous êtes toujours considéré comme ayant un époux ou un conjoint de fait s'il n'y a pas de rupture de votre union et que vous vivez séparément pour des raisons telles que le travail, les études ou des problèmes de santé.",
-        "p3": "Remarque\u00a0: Généralement, vous n'êtes pas considéré séparé si votre époux ou conjoint de fait est détenu dans une prison ou ne vit pas au Canada, tant qu'il n'y a pas de rupture de votre union."
+        "term": "Séparé\u00a0:",
+        "text": "vous vivez séparément de votre époux ou conjoint de fait depuis 90 jours ou plus en raison de la rupture de votre union, et il n'y a pas de réconciliation.",
+        "p1": "Lorsque vous êtes séparé depuis 90 jours, la date d'entrée en vigueur de votre séparation est le jour où vous et votre époux ou conjoint de fait avez commencé à vivre séparément. Vous êtes toujours considéré comme ayant un époux ou un conjoint de fait s'il n'y a pas de rupture de votre union et que vous vivez séparément pour des raisons telles que le travail, les études ou des problèmes de santé.",
+        "p2": "Remarque\u00a0: Généralement, vous n'êtes pas considéré séparé si votre époux ou conjoint de fait est détenu dans une prison ou ne vit pas au Canada, tant qu'il n'y a pas de rupture de votre union."
       },
-      "single": "<strong>Célibataire\u00a0:</strong> vous êtes célibataire et aucune des situations ci-dessus ne s'applique à vous",
-      "widowed": "<strong>Veuf\u00a0:</strong> votre époux ou conjoint de fait est décédé."
+      "single": {
+        "term": "Célibataire\u00a0:",
+        "text": "vous êtes célibataire et aucune des situations ci-dessus ne s'applique à vous"
+      },
+      "widowed": { "term": "Veuf\u00a0:", "text": "votre époux ou conjoint de fait est décédé." }
     },
     "breadcrumb": "État matrimonial",
     "fields": {

frontend/app/components/input-field.tsx

@@ -9,12 +9,12 @@ import { cn } from '~/utils/tailwind-utils';
 export interface InputFieldProps extends ComponentProps<'input'> {
   beforeInput?: React.ReactNode;
   afterInput?: React.ReactNode;
-  errorMessage?: string;
+  errorMessage?: string | React.ReactNode;
   helpMessagePrimary?: React.ReactNode;
   helpMessagePrimaryClassName?: string;
   helpMessageSecondary?: React.ReactNode;
   helpMessageSecondaryClassName?: string;
-  label: string;
+  label: string | React.ReactNode;
   name: string;
   type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
 }

frontend/app/i18n-config.client.ts

@@ -34,7 +34,7 @@ export async function initI18next(namespace: Namespace): Promise<i18n> {
       backend: { loadPath: `/api/translations?ns={{ns}}&lng={{lng}}&v=${BUILD_REVISION}` },
       interpolation: { escapeValue: false },
       react: {
-        transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'b', 'em', 'dl', 'dt', 'dd'],
+        transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'b', 'em', 'dl', 'dt', 'dd', 'abbr'],
       },
     });
 

frontend/app/i18n-config.server.ts

@@ -83,7 +83,7 @@ export async function initI18next(language?: Language): Promise<i18n> {
       throw new AppError(`Missing translation key: ${key}`, ErrorCodes.MISSING_TRANSLATION_KEY);
     },
     react: {
-      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'b', 'em', 'dl', 'dt', 'dd'],
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'b', 'em', 'dl', 'dt', 'dd', 'abbr'],
     },
   });