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.

Sign up for GitHub

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

[Issue #1397] process roadmap accessibility #2392

Merged
merged 6 commits into from
Oct 15, 2024
Merged

[Issue #1397] process roadmap accessibility #2392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
692cdce
readability refactors
doug-s-nava Oct 7, 2024
b1440d1
fix list layout
doug-s-nava Oct 7, 2024
0c4dcbf
fix aria label
doug-s-nava Oct 7, 2024
dce57f5
fix tests
doug-s-nava Oct 7, 2024
f5c00ea
remove need for useMessages
doug-s-nava Oct 10, 2024
02bb96e
fix linter
doug-s-nava Oct 15, 2024
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
127 changes: 66 additions & 61 deletions frontend/src/app/[locale]/process/ProcessMilestones.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ExternalRoutes } from "src/constants/routes";

import { useMessages, useTranslations } from "next-intl";
import { useTranslations } from "next-intl";
import Link from "next/link";
import React from "react";
import {
Expand All @@ -10,17 +10,15 @@ import {
IconListContent,
IconListIcon,
IconListItem,
IconListTitle,
} from "@trussworks/react-uswds";

import ContentLayout from "src/components/ContentLayout";
import { USWDSIcon } from "src/components/USWDSIcon";

const ProcessMilestones = () => {
const t = useTranslations("Process");
const highLevelRoadmapItems = ["find", "advanced_reporting", "apply"] as const;

const messages = useMessages() as unknown as IntlMessages;
const keys = Object.keys(messages.Process.milestones.icon_list);
const ProcessMilestones = () => {
const t = useTranslations("Process.milestones");

const getIcon = (iconIndex: number) => {
switch (iconIndex) {
Expand All @@ -38,90 +36,97 @@ const ProcessMilestones = () => {
return (
<>
<ContentLayout
title={t("milestones.tag")}
title={t("tag")}
data-test-id="process-high-level-content"
titleSize="m"
bottomBorder="dark"
gridGap={6}
>
{keys.map((key, index) => {
const title = t(`milestones.icon_list.${key}.title`);
const content = t.rich(`milestones.icon_list.${key}.content`, {
p: (chunks) => (
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{chunks}
</p>
),
italics: (chunks) => <em>{chunks}</em>,
});
<IconList className="usa-icon-list--size-lg grid-row">
{highLevelRoadmapItems.map((itemKey, index) => {
const title = t(`high_level_roadmap_items.${itemKey}.title`);
const content = t.rich(
`high_level_roadmap_items.${itemKey}.content`,
{
p: (chunks) => (
<p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{chunks}
</p>
),
italics: (chunks) => <em>{chunks}</em>,
},
);

return (
<Grid key={title + "-key"} tabletLg={{ col: 4 }}>
<IconList className="usa-icon-list--size-lg">
<IconListItem className="margin-top-4">
<IconListIcon>{getIcon(index)}</IconListIcon>
<IconListContent className="tablet-lg:padding-right-3 desktop-lg:padding-right-105">
<IconListTitle className="margin-bottom-2" type="h3">
{title}
</IconListTitle>
<div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{content}
</div>
{
// Don't show the chevron in the last row item.
index < keys.length - 1 ? (
<USWDSIcon
className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0 margin-right-neg-5"
name="navigate_next"
/>
) : (
""
)
}
</IconListContent>
</IconListItem>
</IconList>
</Grid>
);
})}
return (
<IconListItem
key={title + "-key"}
className="margin-top-4 tablet-lg:grid-col-4"
>
<IconListIcon>{getIcon(index)}</IconListIcon>
<IconListContent className="tablet:padding-right-7">
<h3
aria-label={`Step ${index + 1}: ${title}`}
className="margin-bottom-2 usa-icon-list__title"
doug-s-nava marked this conversation as resolved.
Show resolved Hide resolved
>
{title}
</h3>
<div className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{content}
</div>
{
// Don't show the chevron in the last row item.
index < highLevelRoadmapItems.length - 1 ? (
<USWDSIcon
className="usa-icon usa-icon--size-9 display-none tablet-lg:display-block text-base-lighter position-absolute right-0 top-0"
name="navigate_next"
/>
) : (
""
)
}
</IconListContent>
</IconListItem>
);
})}
</IconList>
</ContentLayout>
<ContentLayout
title={
<>
<small className="display-block font-sans-lg margin-bottom-105">
{t("milestones.roadmap_1")}
{t("roadmap_1")}
<USWDSIcon
className="usa-icon usa-icon--size-4 text-middle text-base-light"
name="navigate_next"
/>
{t("milestones.title_1")}
{t("title_1")}
</small>
{t("milestones.name_1")}
{t("name_1")}
</>
}
data-testid="process-methodology-content"
titleSize="m"
bottomBorder="none"
>
<Grid tabletLg={{ col: 6 }}>
<p className="usa-intro">{t("milestones.paragraph_1")}</p>
<p className="usa-intro">{t("paragraph_1")}</p>
</Grid>
<Grid tabletLg={{ col: 6 }}>
<h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
{t("milestones.sub_title_1")}
{t("sub_title_1")}
</h3>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{t("milestones.sub_paragraph_1")}
{t("sub_paragraph_1")}
</p>
<h3 className="tablet-lg:font-sans-lg margin-top-4 margin-bottom-2">
{t("milestones.sub_title_2")}
{t("sub_title_2")}
</h3>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
{t("milestones.sub_paragraph_2")}
{t("sub_paragraph_2")}
</p>
<Link href={ExternalRoutes.MILESTONE_GET_OPPORTUNITIES} passHref>
<Button className="margin-bottom-4" type="button" size="big">
<span className="margin-right-5">{t("milestones.cta_1")}</span>
<span className="margin-right-5">{t("cta_1")}</span>
<USWDSIcon
name="launch"
className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
Expand All @@ -134,14 +139,14 @@ const ProcessMilestones = () => {
title={
<>
<small className="display-block font-sans-lg margin-bottom-105">
{t("milestones.roadmap_2")}
{t("roadmap_2")}
<USWDSIcon
className="usa-icon usa-icon--size-4 text-middle text-base-light"
name="navigate_next"
/>
{t("milestones.title_2")}
{t("title_2")}
</small>
{t("milestones.name_2")}
{t("name_2")}
</>
}
data-testid="process-methodology-content"
Expand All @@ -150,17 +155,17 @@ const ProcessMilestones = () => {
bottomBorder="none"
>
<Grid tabletLg={{ col: 6 }}>
<p className="usa-intro">{t("milestones.paragraph_2")}</p>
<p className="usa-intro">{t("paragraph_2")}</p>
</Grid>
<Grid tabletLg={{ col: 6 }}>
<h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
{t("milestones.sub_title_3")}
{t("sub_title_3")}
</h3>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
<p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6"></p>
<Link href={ExternalRoutes.MILESTONE_SEARCH_MVP} passHref>
<Button className="margin-bottom-4" type="button" size="big">
<span className="margin-right-5">{t("milestones.cta_2")}</span>
<span className="margin-right-5">{t("cta_2")}</span>
<USWDSIcon
name="launch"
className="usa-icon usa-icon--size-4 text-middle margin-left-neg-4"
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/i18n/messages/en/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,23 +271,23 @@ export const messages = {
},
milestones: {
tag: "The high-level roadmap",
icon_list: [
{
high_level_roadmap_items: {
find: {
title: "Find",
content:
"<p>Improve how applicants discover funding opportunities that they’re qualified for and that meet their needs.</p>",
},
{
advanced_reporting: {
title: "Advanced reporting",
content:
"<p>Improve stakeholders’ capacity to understand, analyze, and assess grants from application to acceptance.</p><p>Make non-confidential Grants.gov data open for public analysis.</p>",
},
{
apply: {
title: "Apply",
content:
"<p>Streamline the application process to make it easier for all applicants to apply for funding opportunities.</p>",
},
],
},
roadmap_1: "Find",
title_1: "Milestone 1",
name_1:
Expand Down
2 changes: 1 addition & 1 deletion frontend/tests/utils/intlMocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const mockMessages = {
boxes: ["firstKey"],
},
milestones: {
icon_list: ["firstIcon"],
high_level_roadmap_items: ["firstIcon"],
},
},
Research: {
Expand Down
Loading