Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Nov 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
1 change: 1 addition & 0 deletions __tests__/pages/email.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
4 changes: 4 additions & 0 deletions __tests__/pages/expectations.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
1 change: 1 addition & 0 deletions __tests__/pages/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})
1 change: 1 addition & 0 deletions __tests__/pages/landing.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
1 change: 1 addition & 0 deletions __tests__/pages/status.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/error-pages/Error404Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/components/error-pages/ErrorPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/pages/email.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 3 additions & 1 deletion src/pages/expectations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/pages/landing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down