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

[MCR-3625] MCCRS Record Number page a11y fixes #2053

Merged
merged 4 commits into from
Nov 16, 2023
Merged
Show file tree
Hide file tree
Changes from 2 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 @@ -15,7 +15,7 @@ const Crumb = (crumb: BreadcrumbItem) => {
if (link) {
return (
<Breadcrumb>
<Link asCustom={NavLink} to={link}>
<Link asCustom={NavLink} to={link} end>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This resolves an issue with react router dom where the submission page was being read out as the current page due to the url on that page being contained in the submissions/:submissionID/mccrs-record-number url which resulted in "current page" being read out for both breadcrumbs

<span>{text}</span>
</Link>
</Breadcrumb>
Expand Down
7 changes: 7 additions & 0 deletions services/app-web/src/pages/MccrsId/MccrsId.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@
min-width: 40rem;
max-width: 20rem;
margin: 0 auto;

li:last-child a {
text-decoration: none;
color: $theme-color-base-ink;
}
}


}

.formContainer.tableContainer {
Expand Down
5 changes: 4 additions & 1 deletion services/app-web/src/pages/MccrsId/MccrsId.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,10 @@ export const MccrsId = (): React.ReactElement => {
link: `/submissions/${id}`,
text: pkgName || '',
},
{ text: 'MC-CRS record number' },
{
text: 'MC-CRS record number',
link: `/submissions/${id}/mccrs-record-number`,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ticket called out that "I need the breadcrumb title to clearly call out the page I am on, for example “MC-CRS record number - Current Page”, so I easily understand where I am on the page.", so in order for this to be tab-able and read out by JAWS I turned it into a link. If there's a better solution please let me know

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. Let's go ahead and make link required then on the Breadcrumbs props itself. Sounds like there is an a11y impact when we don't ensure every item as a link. That way this doesn't reoccur

},
]}
/>
<UswdsForm
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ export const SubmissionSummary = (): React.ReactElement => {
MC-CRS record number:
<Link
href={`https://mccrs.abtsites.com/Home/Index/${pkg.mccrsID}`}
aria-label="MC-CRS system login"
>
{pkg.mccrsID}
</Link>
Expand All @@ -179,6 +180,11 @@ export const SubmissionSummary = (): React.ReactElement => {
className={
pkg.mccrsID ? styles.editLink : ''
}
aria-label={
pkg.mccrsID
Copy link
Contributor

@haworku haworku Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I try to use a shared variable when I'm trying to align display text with aria-label text so that these cannot accidentally diverge

? 'Edit MC-CRS number'
: 'Add MC-CRS record number'
}
>
{pkg.mccrsID
? 'Edit MC-CRS number'
Expand Down
Loading