Skip to content

Commit 2f14215

Browse files
jarvisraymond-uchicagojarvisraymond-uchicago
authored
fix(accessibilityFixes): Accessibility Fixes (#27)
* fix(accessibilityFixes): initial commit * fix(accessibilityFixes): removed unneeded import * fix(accessibilityFixes): reconfigured _document.tsx, header and pages to allow for skip to main button * fix(accessibilityFixes): fixed lint errors, removed unneeded div from _document.tsx * fix(accessibilityFixes): reconfigured _document.tsx so footer sticks to bottom, removed unneeded import * fix(accessibilityFixes): replaced react fragment with div so outline works * fix(accessibilityFixes): replaced closing tag with self closing element for Head in _document.tsx * fix(accessibilityFixes): Adds fallback background color to quote spotlight
1 parent 18fef96 commit 2f14215

File tree

8 files changed

+101
-47
lines changed

8 files changed

+101
-47
lines changed

‎src/lib/HealNav/HealHeader.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ export const Default: Story = {
1313
play: async ({ canvasElement }) => {
1414
const canvas = within(canvasElement);
1515
await expect(canvas.getByTestId('heal-header')).toBeInTheDocument();
16+
await expect(canvas.getByTestId('skip-to-main')).toBeInTheDocument();
1617
},
1718
};

‎src/lib/HealNav/HealHeader.tsx

+46-33
Original file line numberDiff line numberDiff line change
@@ -14,42 +14,55 @@ const generateLinkClassNames = (i: number) => {
1414

1515
const HealHeader: React.FC = () => {
1616
return (
17-
<header data-testid="heal-header">
18-
<div className="bg-carousel-gradient h-2"></div>
19-
<div className="container mx-auto px-1 md:px-1 lg:px-6 py-4 text-xs">
20-
<div className="lg:flex justify-between">
21-
<a
22-
href={navigation.logo.href}
23-
className="flex hover:underline justify-center mb-5 md:mb-0 lg:justify-normal"
24-
>
25-
<Image
26-
src={navigation.logo.src}
27-
alt={navigation.logo.alt}
28-
width={navigation.logo.width}
29-
height={navigation.logo.height}
30-
className="w-[60px] border-r-1 pr-3"
31-
/>
32-
<div className="text-heal-dark_gray font-semibold text-base pl-3 mt-1">
33-
{navigation.title}
17+
<div>
18+
<a
19+
href="#main-content"
20+
data-testid="skip-to-main"
21+
className="absolute -left-full focus:static text-heal-blue"
22+
>
23+
Skip to main content
24+
</a>
25+
<header data-testid="heal-header">
26+
<div className="bg-carousel-gradient h-2"></div>
27+
<div className="container mx-auto px-1 md:px-1 lg:px-6 py-4 text-xs">
28+
<div className="lg:flex justify-between">
29+
<a
30+
href={navigation.logo.href}
31+
className="flex hover:underline justify-center mb-5 md:mb-0 lg:justify-normal"
32+
>
33+
<Image
34+
src={navigation.logo.src}
35+
alt={navigation.logo.alt}
36+
width={navigation.logo.width}
37+
height={navigation.logo.height}
38+
className="w-[60px] border-r-1 pr-3"
39+
/>
40+
<div className="text-heal-dark_gray font-semibold text-base pl-3 mt-1">
41+
{navigation.title}
42+
</div>
43+
</a>
44+
<div className="flex flex-wrap justify-center lg:justify-normal mt-4 lg:mt-1">
45+
{navigation.items.map((item, i) => (
46+
<a
47+
key={i}
48+
href={item.href}
49+
className={generateLinkClassNames(i)}
50+
>
51+
<Image
52+
src={item.icon}
53+
alt=""
54+
width={16}
55+
height={16}
56+
className="mr-2 ml-1 mt-[-2px] h-[16px] lg:ml-4"
57+
/>
58+
{item.name}
59+
</a>
60+
))}
3461
</div>
35-
</a>
36-
<div className="flex flex-wrap justify-center lg:justify-normal mt-4 lg:mt-1">
37-
{navigation.items.map((item, i) => (
38-
<a key={i} href={item.href} className={generateLinkClassNames(i)}>
39-
<Image
40-
src={item.icon}
41-
alt=""
42-
width={16}
43-
height={16}
44-
className="mr-2 ml-1 mt-[-2px] h-[16px] lg:ml-4"
45-
/>
46-
{item.name}
47-
</a>
48-
))}
4962
</div>
5063
</div>
51-
</div>
52-
</header>
64+
</header>
65+
</div>
5366
);
5467
};
5568

‎src/lib/HealNav/PageTitle.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Head from 'next/head';
2+
3+
interface PageTitleProps {
4+
pageName: string;
5+
}
6+
7+
const PageTitle: React.FC<PageTitleProps> = ({ pageName }) => {
8+
return (
9+
<Head>
10+
<title>{`${pageName} | HEAL Data Platform`}</title>
11+
</Head>
12+
);
13+
};
14+
15+
export default PageTitle;

‎src/lib/Home/Components/QuoteSpotlight/QuoteSpotlight.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import Background from '../../Assets/Images/background.webp';
55
/** UI component for displaying a quote and attribution */
66
const QuoteSpotlight: React.FC = () => {
77
return (
8-
<div data-testid="quote-spotlight" className="text-center mt-6 text-white">
8+
<div
9+
data-testid="quote-spotlight"
10+
className="text-center mt-6 text-white bg-heal-background"
11+
>
912
<BackgroundImage
1013
className="m:h-[269px] md:h-[321px] lg:h-[272px] flex items-center justify-center"
1114
src={Background.src}

‎src/lib/NewlyAvailableDatasets/CardedPageContent.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const CardedPageContent = ({
3434
<div className="text-md pl-10 pb-4">
3535
<Text
3636
data-testid="carded-page-content-title"
37+
component="h1"
3738
className="not-prose font-bold text-4xl text-gen3-coal font-montserrat pb-8"
3839
>
3940
{title}

‎src/pages/Home.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,19 @@ import QuickLinks from '../lib/Home/Components/QuickLinks/QuickLinks';
55
import PhotoDivider from '../lib/Home/Components/PhotoDivider/PhotoDivider';
66
import ContentSpotlight from '../lib/Home/Components/ContentSpotlight/ContentSpotlight';
77
import QuoteSpotlight from '../lib/Home/Components/QuoteSpotlight/QuoteSpotlight';
8-
import HealHeader from '@/lib/HealNav/HealHeader';
9-
import HealFooter from '@/lib/HealNav/HealFooter';
8+
import PageTitle from '@/lib/HealNav/PageTitle';
109

1110
const HealLandingPage = () => {
1211
return (
13-
<div className="w-full">
14-
<HealHeader />
12+
<>
13+
<PageTitle pageName="Home" />
1514
<Hero />
1615
<CarouselBanner />
1716
<QuickLinks />
1817
<PhotoDivider />
1918
<ContentSpotlight />
2019
<QuoteSpotlight />
21-
<HealFooter />
22-
</div>
20+
</>
2321
);
2422
};
2523

‎src/pages/_document.tsx

+26-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
1+
import Document, {
2+
DocumentContext,
3+
DocumentInitialProps,
4+
Html,
5+
Head,
6+
Main,
7+
NextScript,
8+
} from 'next/document';
29
import { ColorSchemeScript } from '@mantine/core';
10+
import HealHeader from '@/lib/HealNav/HealHeader';
11+
import HealFooter from '@/lib/HealNav/HealFooter';
312

413
class Gen3Document extends Document {
514
static async getInitialProps(
@@ -16,6 +25,22 @@ class Gen3Document extends Document {
1625
),
1726
};
1827
}
28+
29+
render() {
30+
return (
31+
<Html lang="en">
32+
<Head />
33+
<body className="flex flex-col min-h-screen">
34+
<HealHeader />
35+
<main id="main-content" className="flex-grow">
36+
<Main />
37+
<NextScript />
38+
</main>
39+
<HealFooter />
40+
</body>
41+
</Html>
42+
);
43+
}
1944
}
2045

2146
export default Gen3Document;

‎src/pages/newly-available-datasets.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import React from 'react';
2-
import HealHeader from '@/lib/HealNav/HealHeader';
3-
import HealFooter from '@/lib/HealNav/HealFooter';
42
import CardedPageContent from '@/lib/NewlyAvailableDatasets/CardedPageContent';
53
import newDatasetsPageConfig from '../../config/heal/newDatasets.json';
4+
import PageTitle from '@/lib/HealNav/PageTitle';
65

76
const NewlyAvailableDatasetsPage = () => {
87
return (
9-
<div className="w-full">
10-
<HealHeader />
8+
<>
9+
<PageTitle pageName="Newly Available Datasets" />
1110
<div className="flex flex-row justify-items-center">
1211
<div className="sm:prose-base lg:prose-lg xl:prose-xl 2xl:prose-xl mx-20">
1312
<CardedPageContent {...newDatasetsPageConfig} />
1413
</div>
1514
</div>
16-
<HealFooter />
17-
</div>
15+
</>
1816
);
1917
};
2018

0 commit comments

Comments
 (0)