From dcbbd0d9781438cc8972948d06b38a266d9b9a0e Mon Sep 17 00:00:00 2001
From: Ken Blanchard <ken.blanchard@hrsdc-rhdcc.gc.ca>
Date: Fri, 15 Nov 2024 12:09:48 -0400
Subject: [PATCH] (A11y) fix skip-to-content to target h1

---
 .../CheckStatusFileBeingProcessed.test.tsx                 | 4 ++++
 .../check-status-responses/CheckStatusNoRecord.test.tsx    | 5 +++++
 .../CheckStatusNotAcceptable.test.tsx                      | 4 ++++
 .../check-status-responses/CheckStatusPrinting.test.tsx    | 5 +++++
 .../CheckStatusReadyForPickup.test.tsx                     | 5 +++++
 .../CheckStatusShippingCanadaPost.test.tsx                 | 5 +++++
 .../CheckStatusShippingFedex.test.tsx                      | 5 +++++
 __tests__/pages/email.test.tsx                             | 1 +
 __tests__/pages/expectations.test.tsx                      | 4 ++++
 __tests__/pages/index.test.tsx                             | 1 +
 __tests__/pages/landing.test.tsx                           | 1 +
 __tests__/pages/status.test.tsx                            | 1 +
 src/components/Header.tsx                                  | 2 +-
 .../CheckStatusFileBeingProcessed.tsx                      | 7 ++++++-
 .../check-status-responses/CheckStatusNoRecord.tsx         | 2 +-
 .../check-status-responses/CheckStatusNotAcceptable.tsx    | 7 ++++++-
 .../check-status-responses/CheckStatusPrinting.tsx         | 2 +-
 .../check-status-responses/CheckStatusReadyForPickup.tsx   | 7 ++++++-
 .../CheckStatusShippingCanadaPost.tsx                      | 7 ++++++-
 .../check-status-responses/CheckStatusShippingFedex.tsx    | 7 ++++++-
 src/components/error-pages/Error404Page.tsx                | 2 +-
 src/components/error-pages/ErrorPage.tsx                   | 2 +-
 src/pages/email.tsx                                        | 4 ++--
 src/pages/expectations.tsx                                 | 4 +++-
 src/pages/index.tsx                                        | 2 +-
 src/pages/landing.tsx                                      | 4 +++-
 src/pages/status.tsx                                       | 2 +-
 27 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/__tests__/components/check-status-responses/CheckStatusFileBeingProcessed.test.tsx b/__tests__/components/check-status-responses/CheckStatusFileBeingProcessed.test.tsx
index 8c666d7ed..f99111091 100644
--- a/__tests__/components/check-status-responses/CheckStatusFileBeingProcessed.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusFileBeingProcessed.test.tsx
@@ -21,7 +21,11 @@ describe('CheckStatusFileBeingProcessed', () => {
   //TODO: add test for when phone number is visible and when it isn't
   it('renders', () => {
     render(sut)
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('being-processed')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/components/check-status-responses/CheckStatusNoRecord.test.tsx b/__tests__/components/check-status-responses/CheckStatusNoRecord.test.tsx
index 931fe9105..5b9613b3a 100644
--- a/__tests__/components/check-status-responses/CheckStatusNoRecord.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusNoRecord.test.tsx
@@ -21,7 +21,12 @@ describe('CheckStatusNoRecord', () => {
   //TODO: add test for when phone number is visible and when it isn't
   it('renders', () => {
     render(sut)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('no-record')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/components/check-status-responses/CheckStatusNotAcceptable.test.tsx b/__tests__/components/check-status-responses/CheckStatusNotAcceptable.test.tsx
index 6b22e25f5..f9310de7e 100644
--- a/__tests__/components/check-status-responses/CheckStatusNotAcceptable.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusNotAcceptable.test.tsx
@@ -20,7 +20,11 @@ describe('CheckStatusNotAcceptable', () => {
 
   it('renders', () => {
     render(sut)
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('not-acceptable')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/components/check-status-responses/CheckStatusPrinting.test.tsx b/__tests__/components/check-status-responses/CheckStatusPrinting.test.tsx
index 9a3dd5fe5..3f6998a0b 100644
--- a/__tests__/components/check-status-responses/CheckStatusPrinting.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusPrinting.test.tsx
@@ -20,7 +20,12 @@ describe('CheckStatusPrinting', () => {
 
   it('renders', () => {
     render(sut)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('printing')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/components/check-status-responses/CheckStatusReadyForPickup.test.tsx b/__tests__/components/check-status-responses/CheckStatusReadyForPickup.test.tsx
index 5454fcfa0..b8d345d36 100644
--- a/__tests__/components/check-status-responses/CheckStatusReadyForPickup.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusReadyForPickup.test.tsx
@@ -20,7 +20,12 @@ describe('CheckStatusReadyForPickup', () => {
 
   it('renders', () => {
     render(sut)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('ready-for-pickup')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/components/check-status-responses/CheckStatusShippingCanadaPost.test.tsx b/__tests__/components/check-status-responses/CheckStatusShippingCanadaPost.test.tsx
index d5b1f58d5..8bd7296b6 100644
--- a/__tests__/components/check-status-responses/CheckStatusShippingCanadaPost.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusShippingCanadaPost.test.tsx
@@ -21,7 +21,12 @@ describe('CheckStatusShippingFedex', () => {
   //TODO: add test for when phone number is visible and when it isn't
   it('renders', () => {
     render(sut)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('shipped-fedex')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/components/check-status-responses/CheckStatusShippingFedex.test.tsx b/__tests__/components/check-status-responses/CheckStatusShippingFedex.test.tsx
index 8c666d7ed..fc72cdf6f 100644
--- a/__tests__/components/check-status-responses/CheckStatusShippingFedex.test.tsx
+++ b/__tests__/components/check-status-responses/CheckStatusShippingFedex.test.tsx
@@ -21,7 +21,12 @@ describe('CheckStatusFileBeingProcessed', () => {
   //TODO: add test for when phone number is visible and when it isn't
   it('renders', () => {
     render(sut)
+
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(screen.getByTestId('being-processed')).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('meets a11y', async () => {
diff --git a/__tests__/pages/email.test.tsx b/__tests__/pages/email.test.tsx
index b342b0954..48977c6ae 100644
--- a/__tests__/pages/email.test.tsx
+++ b/__tests__/pages/email.test.tsx
@@ -41,6 +41,7 @@ describe('Check email page', () => {
     render(<Email />)
     const heading = screen.getByRole('heading', { level: 1 })
     expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('should be accessable', async () => {
diff --git a/__tests__/pages/expectations.test.tsx b/__tests__/pages/expectations.test.tsx
index 4c83f3abf..90eb44454 100644
--- a/__tests__/pages/expectations.test.tsx
+++ b/__tests__/pages/expectations.test.tsx
@@ -24,7 +24,11 @@ describe('expectations page', () => {
   it('should render the page', () => {
     render(<Expectations />)
     const button = screen.getByRole('button')
+    const heading = screen.getByRole('heading', { level: 1 })
+
     expect(button).toBeInTheDocument()
+    expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('should be accessable', async () => {
diff --git a/__tests__/pages/index.test.tsx b/__tests__/pages/index.test.tsx
index 044ec4ced..7856a2a7d 100644
--- a/__tests__/pages/index.test.tsx
+++ b/__tests__/pages/index.test.tsx
@@ -19,5 +19,6 @@ describe('index page', () => {
     render(<Index />)
     const heading = screen.getByRole('heading', { level: 1 })
     expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 })
diff --git a/__tests__/pages/landing.test.tsx b/__tests__/pages/landing.test.tsx
index 509d8b713..1dce1492c 100644
--- a/__tests__/pages/landing.test.tsx
+++ b/__tests__/pages/landing.test.tsx
@@ -26,6 +26,7 @@ describe('landing page', () => {
     render(<Landing />)
     const heading = screen.getByRole('heading', { level: 1 })
     expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('should be accessable', async () => {
diff --git a/__tests__/pages/status.test.tsx b/__tests__/pages/status.test.tsx
index c9d358a45..6b44b4a62 100644
--- a/__tests__/pages/status.test.tsx
+++ b/__tests__/pages/status.test.tsx
@@ -54,6 +54,7 @@ describe('Check status page', () => {
     render(<Status />, { wrapper: createWrapper() })
     const heading = screen.getByRole('heading', { level: 1 })
     expect(heading).toBeInTheDocument()
+    expect(heading).toHaveAttribute('id', 'main-header')
   })
 
   it('should be accessable', async () => {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8b8bf0129..c464d4db0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -32,7 +32,7 @@ const Header = ({ gocLink, skipToMainText }: HeaderProps) => {
         <a
           id="skipToMainContent"
           className="border border-blue-dark bg-blue-dark px-2 font-body font-bold text-white hover:bg-basic-darkgray focus:text-white focus:ring-2 focus:ring-inset focus:ring-orange-dark focus:ring-offset-2 "
-          href="#mainContent"
+          href="#main-header"
           draggable="false"
         >
           {skipToMainText}
diff --git a/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx b/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
index 87fabc5c8..eccc10647 100644
--- a/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
+++ b/src/components/check-status-responses/CheckStatusFileBeingProcessed.tsx
@@ -8,7 +8,12 @@ export const CheckStatusFileBeingProcessed = () => {
   return (
     <>
       <AlertBlock page="status-processing" />
-      <h1 data-testid="being-processed" className="h1" tabIndex={-1}>
+      <h1
+        id="main-header"
+        data-testid="being-processed"
+        className="h1"
+        tabIndex={-1}
+      >
         {t('being-processed.received')}
       </h1>
       <p>
diff --git a/src/components/check-status-responses/CheckStatusNoRecord.tsx b/src/components/check-status-responses/CheckStatusNoRecord.tsx
index d8b10c782..48d6446ad 100644
--- a/src/components/check-status-responses/CheckStatusNoRecord.tsx
+++ b/src/components/check-status-responses/CheckStatusNoRecord.tsx
@@ -8,7 +8,7 @@ export const CheckStatusNoRecord = () => {
   return (
     <>
       <AlertBlock page="status-not-found" />
-      <h1 data-testid="no-record" className="h1" tabIndex={-1}>
+      <h1 id="main-header" data-testid="no-record" className="h1" tabIndex={-1}>
         {t('no-record.cannot-give-status.description')}
       </h1>
       <p>{t('no-record.cannot-give-status.because')}</p>
diff --git a/src/components/check-status-responses/CheckStatusNotAcceptable.tsx b/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
index 9576f644b..9337d8360 100644
--- a/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
+++ b/src/components/check-status-responses/CheckStatusNotAcceptable.tsx
@@ -8,7 +8,12 @@ export const CheckStatusNotAcceptable = () => {
   return (
     <>
       <AlertBlock page="status-invalid" />
-      <h1 data-testid="not-acceptable" className="h1" tabIndex={-1}>
+      <h1
+        id="main-header"
+        data-testid="not-acceptable"
+        className="h1"
+        tabIndex={-1}
+      >
         {t('not-acceptable.cannot-process')}
       </h1>
       <p>{t('not-acceptable.explanation')}</p>
diff --git a/src/components/check-status-responses/CheckStatusPrinting.tsx b/src/components/check-status-responses/CheckStatusPrinting.tsx
index 7190c431f..a79f1f4bc 100644
--- a/src/components/check-status-responses/CheckStatusPrinting.tsx
+++ b/src/components/check-status-responses/CheckStatusPrinting.tsx
@@ -7,7 +7,7 @@ export const CheckStatusPrinting = () => {
   return (
     <>
       <AlertBlock page="status-ready-pickup" />
-      <h1 data-testid="printing" className="h1" tabIndex={-1}>
+      <h1 id="main-header" data-testid="printing" className="h1" tabIndex={-1}>
         {t('printing.in-printing')}
       </h1>
       <p>{t('printing.reviewed-printing')}</p>
diff --git a/src/components/check-status-responses/CheckStatusReadyForPickup.tsx b/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
index c33e43f49..89905dcff 100644
--- a/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
+++ b/src/components/check-status-responses/CheckStatusReadyForPickup.tsx
@@ -8,7 +8,12 @@ export const CheckStatusReadyForPickup = () => {
   return (
     <>
       <AlertBlock page="status-ready-pickup" />
-      <h1 data-testid="ready-for-pickup" className="h1" tabIndex={-1}>
+      <h1
+        id="main-header"
+        data-testid="ready-for-pickup"
+        className="h1"
+        tabIndex={-1}
+      >
         {t('ready-for-pickup.has-been-printed')}
       </h1>
       <p>{t('ready-for-pickup.has-been-printed')}</p>
diff --git a/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx b/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
index 955fc5266..5f90cdcc2 100644
--- a/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
+++ b/src/components/check-status-responses/CheckStatusShippingCanadaPost.tsx
@@ -16,7 +16,12 @@ export const CheckStatusShippingCanadaPost = ({
   return (
     <>
       <AlertBlock page="status-shipped-canada" />
-      <h1 data-testid="printed-and-mailed" className="h1" tabIndex={-1}>
+      <h1
+        id="main-header"
+        data-testid="printed-and-mailed"
+        className="h1"
+        tabIndex={-1}
+      >
         {t('shipped-canada-post.header')}
       </h1>
       <p>{t('shipped-canada-post.header')}.</p>
diff --git a/src/components/check-status-responses/CheckStatusShippingFedex.tsx b/src/components/check-status-responses/CheckStatusShippingFedex.tsx
index 168cded54..48eb08425 100644
--- a/src/components/check-status-responses/CheckStatusShippingFedex.tsx
+++ b/src/components/check-status-responses/CheckStatusShippingFedex.tsx
@@ -15,7 +15,12 @@ export const CheckStatusShippingFedex = ({
   return (
     <>
       <AlertBlock page="status-shipped-fedex" />
-      <h1 data-testid="shipped-fedex" className="h1" tabIndex={-1}>
+      <h1
+        id="main-header"
+        data-testid="shipped-fedex"
+        className="h1"
+        tabIndex={-1}
+      >
         {t('shipped-fedex.header')}
       </h1>
       <p>{t('shipped-fedex.header')}.</p>
diff --git a/src/components/error-pages/Error404Page.tsx b/src/components/error-pages/Error404Page.tsx
index 65f229e50..9df0977d2 100644
--- a/src/components/error-pages/Error404Page.tsx
+++ b/src/components/error-pages/Error404Page.tsx
@@ -11,7 +11,7 @@ const Error404Page = () => {
         title="Not Found | Pas trouvé"
         titleTemplate="%s - Canada.ca"
       />
-      <h1 className="sr-only" lang="en">
+      <h1 id="main-header" className="sr-only" lang="en" tabIndex={-1}>
         Not Found
       </h1>
       <span className="sr-only">
diff --git a/src/components/error-pages/ErrorPage.tsx b/src/components/error-pages/ErrorPage.tsx
index 32cc742a3..a840bdfe7 100644
--- a/src/components/error-pages/ErrorPage.tsx
+++ b/src/components/error-pages/ErrorPage.tsx
@@ -19,7 +19,7 @@ const ErrorPage = ({ statusCode }: ErrorPageProps) => {
         }
         titleTemplate="%s - Canada.ca"
       />
-      <h1 className="sr-only" lang="en">
+      <h1 id="main-header" className="sr-only" lang="en" tabIndex={-1}>
         {statusCode === 500 ? 'Internal Server Error' : 'Service Unavailable'}
       </h1>
       <span className="sr-only">
diff --git a/src/pages/email.tsx b/src/pages/email.tsx
index 8ca4f7c77..3745e8c0a 100644
--- a/src/pages/email.tsx
+++ b/src/pages/email.tsx
@@ -149,7 +149,7 @@ const Email = () => {
       {isEmailEsrfSuccess ? (
         <div id="response-result">
           <AlertBlock page="email" />
-          <h1 className="h1" tabIndex={-1}>
+          <h1 id="main-header" className="h1" tabIndex={-1}>
             {t('email-confirmation-msg.request-received.header')}
           </h1>
           <div className="max-w-prose">
@@ -212,7 +212,7 @@ const Email = () => {
       ) : (
         <div>
           <AlertBlock page="email" />
-          <h1 className="h1" tabIndex={-1}>
+          <h1 id="main-header" className="h1" tabIndex={-1}>
             {t('header')}
           </h1>
           <form onSubmit={handleFormikSubmit} id="form-email-esrf">
diff --git a/src/pages/expectations.tsx b/src/pages/expectations.tsx
index 64b2a0c5f..65614d55e 100644
--- a/src/pages/expectations.tsx
+++ b/src/pages/expectations.tsx
@@ -35,7 +35,9 @@ const Expectations = () => {
       />
       <Layout>
         <AlertBlock page="expectations" />
-        <h1 className="h1">{t('header')}</h1>
+        <h1 id="main-header" className="h1" tabIndex={-1}>
+          {t('header')}
+        </h1>
         <div className="max-w-prose">
           <p>
             <Trans i18nKey="thank-you" ns="expectations" />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ca284555e..121eb45ab 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -23,7 +23,7 @@ const Index = () => {
       >
         <div className="m-auto w-[300px] bg-gray-lighter md:w-[400px] lg:w-[500px]">
           <div className="p-8">
-            <h1 className="sr-only">
+            <h1 id="main-header" className="sr-only" tabIndex={-1}>
               Passport Application Status Checker | Vérificateur de l&#39;état
               d&#39;une demande de passeport
             </h1>
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index 7a7690b94..47b9eeda2 100644
--- a/src/pages/landing.tsx
+++ b/src/pages/landing.tsx
@@ -21,7 +21,9 @@ const Landing = () => {
         additionalMetaTags={[getDCTermsTitle(t('header'))]}
       />
       <AlertBlock page="landing" />
-      <h1 className="h1">{t('header')}</h1>
+      <h1 id="main-header" className="h1" tabIndex={-1}>
+        {t('header')}
+      </h1>
       <div className="max-w-prose">
         <p>
           <strong>{t('do-you-have.question')}</strong>
diff --git a/src/pages/status.tsx b/src/pages/status.tsx
index 2b27f2143..fbde96d0f 100644
--- a/src/pages/status.tsx
+++ b/src/pages/status.tsx
@@ -189,7 +189,7 @@ const Status = () => {
       ) : (
         <>
           <AlertBlock page="status" />
-          <h1 className="h1" tabIndex={-1}>
+          <h1 id="main-header" className="h1" tabIndex={-1}>
             {t('header')}
           </h1>
           <form onSubmit={handleFormikSubmit} id="form-get-status">