GCTC-NTGC · yonikid15 · Feb 13, 2023 · Feb 3, 2023 · Feb 3, 2023 · Feb 3, 2023
diff --git a/apps/web/src/components/ApplicationPageWrapper/ApplicationPageWrapper.tsx b/apps/web/src/components/ApplicationPageWrapper/ApplicationPageWrapper.tsx
@@ -17,7 +17,7 @@ import ApplicationNavigation, {
 
 export interface ApplicationPageWrapperProps {
   title: string;
-  subtitle?: string;
+  subtitle?: React.ReactNode;
   crumbs?: BreadcrumbsProps["crumbs"];
   navigation?: ApplicationNavigationProps;
   closingDate: PoolAdvertisement["closingDate"];

diff --git a/apps/web/src/components/ProfileFormWrapper/ProfileFormWrapper.tsx b/apps/web/src/components/ProfileFormWrapper/ProfileFormWrapper.tsx
@@ -14,7 +14,7 @@ import SaveButton from "./SaveButton";
 
 export interface ProfileFormWrapperProps {
   crumbs: BreadcrumbsProps["crumbs"];
-  description?: string;
+  description?: React.ReactNode;
   title: string;
   metaTitle?: string; // Used to override <head><title /></head>
   children?: React.ReactNode;

diff --git a/apps/web/src/components/SearchRequestTable/SearchRequestTable.tsx b/apps/web/src/components/SearchRequestTable/SearchRequestTable.tsx
@@ -6,7 +6,7 @@ import { getLocalizedName } from "@common/helpers/localize";
 import { getPoolCandidateSearchStatus } from "@common/constants/localizedConstants";
 import { PoolCandidateSearchStatus } from "@common/api/generated";
 import Pending from "@common/components/Pending";
-import { getFullPoolAdvertisementTitle } from "@common/helpers/poolUtils";
+import { getFullPoolAdvertisementTitleHtml } from "@common/helpers/poolUtils";
 import { formatDate, parseDateTimeUtc } from "@common/helpers/dateUtils";
 
 import {
@@ -58,6 +58,7 @@ function poolsAccessor(
   const pools =
     row.original?.applicantFilter?.pools ??
     row.original?.poolCandidateFilter?.pools;
+
   const filteredPools = pools?.filter(notEmpty);
   return filteredPools?.length ? (
     <span>
@@ -66,7 +67,7 @@ function poolsAccessor(
           pool && (
             <React.Fragment key={pool.id}>
               <a href={paths.poolCandidateTable(pool.id)}>
-                {getFullPoolAdvertisementTitle(intl, pool)}
+                {getFullPoolAdvertisementTitleHtml(intl, pool)}
               </a>
               {index > 0 && ", "}
             </React.Fragment>
@@ -87,8 +88,8 @@ export const SearchRequestTable = ({
   const paths = useRoutes();
 
   const localizedTransformPoolToPosterTitle = useCallback(
-    (pool: Parameters<typeof getFullPoolAdvertisementTitle>[1]) =>
-      getFullPoolAdvertisementTitle(intl, pool),
+    (pool: Parameters<typeof getFullPoolAdvertisementTitleHtml>[1]) =>
+      getFullPoolAdvertisementTitleHtml(intl, pool),
     [intl],
   );
 

diff --git a/apps/web/src/components/SelfDeclaration/HelpLink.tsx b/apps/web/src/components/SelfDeclaration/HelpLink.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useIntl } from "react-intl";
+import { wrapAbbr } from "~/../../../frontend/common/src/helpers/nameUtils";
 
 const contactLink = (chunks: React.ReactNode) => (
   <a
@@ -16,14 +17,15 @@ const HelpLink = () => {
     <p>
       {intl.formatMessage(
         {
-          id: "YZ/ZhG",
+          id: "pIiisf",
           defaultMessage:
-            "If you are unsure about providing your information, or if you have any questions regarding the IT Apprenticeship Program for Indigenous Peoples, please <link>contact us</link> and we would be happy to meet with you.",
+            "If you are unsure about providing your information, or if you have any questions regarding the <abbreviation>IT</abbreviation> Apprenticeship Program for Indigenous Peoples, please <link>contact us</link> and we would be happy to meet with you.",
           description:
             "Text describing where to get help with the self-declaration form",
         },
         {
           link: contactLink,
+          abbreviation: (text: React.ReactNode) => wrapAbbr(text, intl),
         },
       )}
     </p>

diff --git a/apps/web/src/components/SelfDeclaration/SignAndContinue.tsx b/apps/web/src/components/SelfDeclaration/SignAndContinue.tsx
@@ -5,6 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { Input, Submit } from "@common/components/form";
 import { FieldLabels } from "@common/components/form/BasicForm";
 import errorMessages from "@common/messages/errorMessages";
+import { wrapAbbr } from "~/../../../frontend/common/src/helpers/nameUtils";
 
 interface SignAndContinueProps {
   labels: FieldLabels;
@@ -89,13 +90,18 @@ const SignAndContinue = ({ labels }: SignAndContinueProps) => {
             <Submit
               color="ia-primary"
               mode="solid"
-              text={intl.formatMessage({
-                defaultMessage:
-                  "Explore IT opportunities within the federal government",
-                id: "32qwlv",
-                description:
-                  "Button text to submit the Indigenous self-declaration form when not Indigenous.",
-              })}
+              text={intl.formatMessage(
+                {
+                  defaultMessage:
+                    "Explore <abbreviation>IT</abbreviation> opportunities within the federal government",
+                  id: "j3WBqJ",
+                  description:
+                    "Button text to submit the Indigenous self-declaration form when not Indigenous.",
+                },
+                {
+                  abbreviation: (text: React.ReactNode) => wrapAbbr(text, intl),
+                },
+              )}
             />
           </p>
         </>

diff --git a/apps/web/src/components/Table/ApiManagedTable/useFilterOptions.tsx b/apps/web/src/components/Table/ApiManagedTable/useFilterOptions.tsx
@@ -19,7 +19,7 @@ import { enumToOptions } from "@common/helpers/formUtils";
 import { notEmpty } from "@common/helpers/util";
 import useLocale from "@common/hooks/useLocale";
 import { commonMessages } from "@common/messages";
-import { getFullPoolAdvertisementTitle } from "@common/helpers/poolUtils";
+import { getFullPoolAdvertisementTitleLabel } from "@common/helpers/poolUtils";
 
 import {
   WorkRegion,
@@ -62,7 +62,7 @@ export default function useFilterOptions(enableEducationType = false) {
   const optionsData = {
     pools: filterRes.data?.pools.filter(notEmpty).map((pool) => ({
       value: pool.id,
-      label: getFullPoolAdvertisementTitle(intl, pool),
+      label: getFullPoolAdvertisementTitleLabel(intl, pool),
     })),
     languageAbility: enumToOptions(LanguageAbility).map(({ value }) => ({
       value,

diff --git a/apps/web/src/hooks/useQuote.tsx b/apps/web/src/hooks/useQuote.tsx
@@ -1,21 +1,28 @@
 import React from "react";
 import { useIntl } from "react-intl";
+import { wrapAbbr } from "~/../../../frontend/common/src/helpers/nameUtils";
 
 export interface Quote {
   content: React.ReactNode | string;
-  author: string;
+  author: string | React.ReactNode;
 }
 
 const useQuote = (): Quote => {
   const intl = useIntl();
 
   const quotes: Quote[] = [
     {
-      author: intl.formatMessage({
-        defaultMessage: "Government of Canada IT Apprentice",
-        id: "49UIne",
-        description: "author of testimonial number one",
-      }),
+      author: intl.formatMessage(
+        {
+          defaultMessage:
+            "Government of Canada <abbreviation>IT</abbreviation> Apprentice",
+          id: "pRGDLn",
+          description: "author of testimonial number one",
+        },
+        {
+          abbreviation: (text: React.ReactNode) => wrapAbbr(text, intl),
+        },
+      ),
       content: intl.formatMessage(
         {
           defaultMessage: