[MCR-3625] MCCRS Record Number page a11y fixes #2053
Conversation
| @@ -15,7 +15,7 @@ const Crumb = (crumb: BreadcrumbItem) => { | |||
| if (link) { | |||
| return ( | |||
| <Breadcrumb> | |||
| <Link asCustom={NavLink} to={link}> | |||
| <Link asCustom={NavLink} to={link} end> | |||
There was a problem hiding this comment.
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
| { text: 'MC-CRS record number' }, | ||
| { | ||
| text: 'MC-CRS record number', | ||
| link: `/submissions/${id}/mccrs-record-number`, |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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
| @@ -179,6 +180,11 @@ export const SubmissionSummary = (): React.ReactElement => { | |||
| className={ | |||
| pkg.mccrsID ? styles.editLink : '' | |||
| } | |||
| aria-label={ | |||
| pkg.mccrsID | |||
There was a problem hiding this comment.
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
Summary
This PR resolves 2 A11y issues in the MCCRS record number flow
Bug 1
Bug 2
Related issues
https://qmacbis.atlassian.net/browse/MCR-3625
Screenshots
Bug 1
Screen.Recording.2023-11-13.at.2.36.46.PM.mov
Bug 2
Screen.Recording.2023-11-14.at.10.43.26.AM.mov