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 all 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
4 changes: 2 additions & 2 deletions services/app-web/src/components/Breadcrumbs/Breadcrumb.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ describe('Breadcrumbs', () => {
const items = [
{ text: 'First link', link: '/firstlink' },
{ text: 'Second link', link: '/secondlink' },
{ text: 'Active link, no href needed' },
{ text: 'Active link', link: '/thirdlink' },
]
renderWithProviders(<Breadcrumbs items={items} />)
expect(screen.getAllByRole('listitem')).toHaveLength(items.length)
expect(screen.getAllByRole('link')).toHaveLength(items.length - 1)
expect(screen.getAllByRole('link')).toHaveLength(items.length)
})

it('renders nothing if no items passed in', () => {
Expand Down
9 changes: 9 additions & 0 deletions services/app-web/src/components/Breadcrumbs/Breadcrumbs.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
@import '../../styles/uswdsImports.scss';

.crumbContainer {
margin-top: 1em;
margin-bottom: 1em;
background: none;

[class^='usa-breadcrumb'] {
li:last-child a {
text-decoration: none;
color: $theme-color-base-ink;
}
}
}
2 changes: 1 addition & 1 deletion services/app-web/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@ Default.args = {
items: [
{ text: 'First link', link: '/firstlink' },
{ text: 'Second link', link: '/secondlink' },
{ text: 'Active link, no href needed' },
{ text: 'Active link', link: '/thirdlink' },
],
}
22 changes: 7 additions & 15 deletions 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 @@ -4,29 +4,21 @@ import styles from './Breadcrumbs.module.scss'

type BreadcrumbItem = {
text: string
link?: string
link: string
}
export type BreadcrumbsProps = {
items: BreadcrumbItem[]
}

const Crumb = (crumb: BreadcrumbItem) => {
const { link, text } = crumb
if (link) {
return (
<Breadcrumb>
<Link asCustom={NavLink} to={link}>
<span>{text}</span>
</Link>
</Breadcrumb>
)
} else {
return (
<Breadcrumb>
return (
<Breadcrumb>
<Link asCustom={NavLink} to={link} end>
<span>{text}</span>
</Breadcrumb>
)
}
</Link>
</Breadcrumb>
)
}

const Breadcrumbs = ({ items }: BreadcrumbsProps) => {
Expand Down
2 changes: 2 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 @@ -11,6 +11,8 @@
max-width: 20rem;
margin: 0 auto;
}


}

.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
5 changes: 4 additions & 1 deletion services/app-web/src/pages/QuestionResponse/UploadQuestions/UploadQuestions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,10 @@ export const UploadQuestions = () => {
text: 'Dashboard',
},
{ link: `/submissions/${id}`, text: packageName },
{ text: 'Add questions' },
{
text: 'Add questions',
link: RoutesRecord.SUBMISSIONS_UPLOAD_QUESTION,
},
]}
/>

Expand Down
5 changes: 4 additions & 1 deletion services/app-web/src/pages/QuestionResponse/UploadResponse/UploadResponse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,10 @@ export const UploadResponse = () => {
text: 'Dashboard',
},
{ link: `/submissions/${id}`, text: packageName },
{ text: 'Add response' },
{
text: 'Add response',
link: RoutesRecord.SUBMISSIONS_UPLOAD_RESPONSE,
},
]}
/>

Expand Down
10 changes: 7 additions & 3 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 @@ -104,6 +104,10 @@ export const SubmissionSummary = (): React.ReactElement => {
const handleDocumentDownloadError = (error: boolean) =>
setDocumentError(error)

const editOrAddMCCRSID = pkg.mccrsID
? 'Edit MC-CRS number'
: 'Add MC-CRS record number'

return (
<div className={styles.background}>
<GridContainer
Expand Down Expand Up @@ -169,6 +173,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,10 +184,9 @@ export const SubmissionSummary = (): React.ReactElement => {
className={
pkg.mccrsID ? styles.editLink : ''
}
aria-label={editOrAddMCCRSID}
>
{pkg.mccrsID
? 'Edit MC-CRS number'
: 'Add MC-CRS record number'}
{editOrAddMCCRSID}
</Link>
</div>
) : undefined
Expand Down
Loading