ITAO fixes

components/Forms/Button.tsx

@@ -20,12 +20,15 @@ interface ButtonProps {
 type ButtonType = 'submit' | 'reset' | 'button'
 
 const BUTTON_STYLES = {
-  primary: 'text-white bg-[#26374A] hover:bg-[#1C578A] focus:bg-[#0E62C9]',
+  primary:
+    'text-white bg-[#26374A] hover:bg-[#1C578A] focus:bg-[#0E62C9] visited:text-white',
   secondary:
-    'text-[#335075] bg-[#EAEBED] hover:bg-[#CFD1D5] focus:bg-[#CFD1D5]',
-  supertask: 'text-white bg-[#318000] hover:bg-[#1D4D00] focus:bg-[#1D4D00]',
-  danger: 'text-white bg-[#BC3331] hover:bg-[#942826] focus:bg-[#942826]',
-  link: 'text-[#2B4380] hover:text-[#0535D2] focus:text-[#0535D2]n hover:underline focus:underline',
+    'text-[#335075] visited:text-[#335075] bg-[#EAEBED] hover:bg-[#CFD1D5] focus:bg-[#CFD1D5]',
+  supertask:
+    'text-white visited:text-white bg-[#318000] hover:bg-[#1D4D00] focus:bg-[#1D4D00]',
+  danger:
+    'text-white  visited:text-white bg-[#BC3331] hover:bg-[#942826] focus:bg-[#942826]',
+  link: 'text-[#2B4380] visited:text-[#2B4380] hover:text-[#0535D2] focus:text-[#0535D2]n hover:underline focus:underline',
 }
 
 export const Button: React.FC<ButtonProps> = ({

components/ResultsPage/EstimatedTotalItem.tsx

@@ -6,6 +6,7 @@ import { BenefitResult } from '../../utils/api/definitions/types'
 import { useTranslation } from '../Hooks'
 import { Modal } from './Modal'
 import Image from 'next/image'
+import { Button } from '../Forms/Button'
 
 export const EstimatedTotalItem: React.VFC<{
   heading: string
@@ -60,15 +61,27 @@ export const EstimatedTotalItem: React.VFC<{
       {displayBenefitName(heading, result.entitlement.result, displayAmount)}
       {result.entitlement.result == 0 && (
         <>
-          <span className="align-middle ml-2">
+          <span  className="align-middle ml-2">
+          <button
+            onClick={openModal}
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+            }}
+            aria-label={tsln.resultsPage.moreInformation + ' ' + heading}
+          >
             <Image
               className="cursor-pointer"
               src="/moreInfo.png"
-              alt="info"
+              alt={tsln.resultsPage.moreInformation + ' ' + heading}
               width="25"
               height="25"
               onClick={openModal}
             />
+    </button>
+
             <Modal
               isOpen={modalOpen}
               onClose={closeModal}

components/ResultsPage/Intro.tsx

@@ -11,7 +11,7 @@ export const Intro: React.VFC<{
   return (
     <>
       <p dangerouslySetInnerHTML={{ __html: tsln.resultsPage.general }} />
-      <div className="h2 my-8">{tsln.resultsPage.yourMonEstimateHeading}</div>
+      <h2 className="h2 my-8">{tsln.resultsPage.yourMonEstimateHeading}</h2>
       {estimateLength == 1 && (
         <p className="my-5">{tsln.resultsPage.changeInSituation}</p>
       )}

components/ResultsPage/Modal.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@dts-stn/service-canada-design-system'
+import { useEffect, useRef } from 'react'
 import { getTranslations } from '../../i18n/api'
 import { WebTranslations } from '../../i18n/web'
 import { MaritalStatus } from '../../utils/api/definitions/enums'
@@ -12,9 +13,46 @@ export const Modal: React.VFC<{
 }> = ({ isOpen, onClose, partner, maritalStatus }) => {
   const tsln = useTranslation<WebTranslations>()
   const apiTrans = getTranslations(tsln._language)
+  const modalRef = useRef(null);
+  const firstFocusableRef = useRef(null);
+  const closeButtonRef = useRef(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Focus the first focusable element when the modal opens
+      firstFocusableRef.current?.focus();
+
+      // Event listener for trapping focus
+      const handleKeyDown = (event) => {
+        if (event.key === 'Tab') {
+          const focusableElements = modalRef.current.querySelectorAll(
+            'button, a, input, textarea, select, [tabindex]:not([tabindex="-1"])'
+          );
+          const firstElement = focusableElements[0];
+          const lastElement =
+            focusableElements[focusableElements.length - 1];
+
+          if (event.shiftKey && document.activeElement === firstElement) {
+            // Shift + Tab pressed on first element: move focus to the last element
+            event.preventDefault();
+            lastElement.focus();
+          } else if (!event.shiftKey && document.activeElement === lastElement) {
+            // Tab pressed on the last element: move focus to the first element
+            event.preventDefault();
+            firstElement.focus();
+          }
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown);
+      return () => document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isOpen])
 
   if (!isOpen) return null
 
+
+
   const getModalString = () => {
     let text = ''
 
@@ -37,9 +75,12 @@ export const Modal: React.VFC<{
     <div
       className="modal-overlay fixed inset-0 flex items-center justify-center z-50"
       onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      ref={modalRef}
     >
       <div className="absolute inset-0 bg-black opacity-50"></div>
-      <div className="modal-content w-6/12 bg-white p-6  shadow-lg z-50">
+      <div  role={'status'} className="modal-content md:w-6/12 sm:w-9/12 bg-white p-6  shadow-lg z-50">
         <h2 className="h2">
           {!partner
             ? apiTrans.modal.userHeading
@@ -48,6 +89,7 @@ export const Modal: React.VFC<{
         <p>{getModalString()}</p>
         <div className="mt-4 flex justify-start">
           <Button
+            ref={closeButtonRef}
             text={apiTrans.modal.close}
             id={apiTrans.modal.close}
             style="primary"

components/ResultsPage/index.tsx

@@ -218,7 +218,7 @@ const ResultsPage: React.VFC<{
           <YourAnswers title={tsln.resultsPage.whatYouToldUs} inputs={inputs} />
         </div>
         <div className="col-span-2 row-span-1">
-          <div className="h2"> {apiTsln.nextStepTitle}</div>
+          <h2 className="h2"> {apiTsln.nextStepTitle}</h2>
           <BenefitCards
             inputAge={Math.floor(
               Number(inputs.find((input) => input.key === 'age').value)

i18n/web/en.ts

@@ -301,6 +301,7 @@ const en: WebTranslations = {
       'EC Economics and Industry;Allowances;Benefits;Survivor benefits;Finance;Personal finance;Income;Pensions;Public pensions,PE Persons;Adults;Seniors,So Society and Culture;Old age',
   },
   resultsPage: {
+    moreInformation: "Plus d'information ",
     yourMonEstimateHeading: 'Your monthly estimate',
     changeInSituation: 'Changes in your situation may impact your results.',
     youEstimateMayChange: 'Your estimate may change over time based on',

i18n/web/fr.ts

@@ -303,6 +303,7 @@ const fr: WebTranslations = {
     homeSubject: `EC Économie et industrie;Allocation;Avantages sociaux;Prestation au survivant;Finances;Finances personnelles;Revenu;Pension;Pension publique,PE Personnes;Adulte;Aîné,SO Société et culture;Vieillesse`,
   },
   resultsPage: {
+    moreInformation: 'More information on',
     yourMonEstimateHeading: 'Votre estimation mensuelle',
     changeInSituation:
       'Si votre situation change, vos résultats pourraient changer.',

i18n/web/index.ts

@@ -209,6 +209,7 @@ export type WebTranslations = {
   }
   //results page
   resultsPage: {
+    moreInformation: string
     yourMonEstimateHeading: string
     changeInSituation: string
     youEstimateMayChange: string