(A11y) fix skip-to-content to target h1

DTS-STN · Nov 15, 2024 · dcbbd0d · dcbbd0d
1 parent da72a7a
commit dcbbd0d
Show file tree

Hide file tree

Showing 27 changed files with 86 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">