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

Jump to bottom

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

Merged
merged 4 commits into from
Nov 16, 2023
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eef3377
add labels for mccrs links
pearl-truss Nov 13, 2023
d49b1af
fix issue with JAWS announcing current page on wrong breadcrumb
pearl-truss Nov 14, 2023
0a1f9cc
cypress re-run
pearl-truss Nov 14, 2023
073aedf
make link required for breadcrumbs, use shared const for text and ari…
pearl-truss Nov 14, 2023
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
2 changes: 1 addition & 1 deletion services/app-web/src/components/Breadcrumbs/Breadcrumbs.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
6 changes: 6 additions & 0 deletions services/app-web/src/pages/SubmissionSummary/SubmissionSummary.tsx
View file
Open in desktop
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 •
edited
Loading

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