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

fix ID and aria control string issue #3014

Merged
merged 6 commits into from
Dec 10, 2024
Merged

Conversation

gordonfarrell
Copy link
Collaborator

PULL REQUEST

Summary

For lab accordions we were setting the ID to whatever the title was, and the associated aria-controls value to whatever the id was. Because the title was any old string it could contain characters like spaces, commas, ampersand, whatever, that are not valid values for an ID and thus also invalid for aria-controls. Changed how we set the value of the ids to replace any invalid characters with a -

Related Issue

Fixes #2965

Acceptance Criteria

Axe accessibility scans return 0 critical or high severity issues with lab report accordions opened or closed.

Additional Information

Anything else the review team should know?

Checklist

  • If this code affects the other scrum team, have they been notified? (In Slack, as reviewers, etc.)

@@ -49,7 +49,7 @@ export const AccordionLabResults: React.FC<AccordionLabResultsProps> = ({
),
content: content,
expanded: collapsedByDefault,
id: title,
id: title.replaceAll(/[^a-zA-Z0-9-_:.]/g, "-"),
Copy link
Collaborator

Choose a reason for hiding this comment

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

we have a helper function for this called toKebabCase - could you use that instead?

@@ -41,7 +41,7 @@ const EcrSummary: React.FC<EcrSummaryProps> = ({
conditionSummary.map((condition) => {
return {
title: condition.title,
id: condition.title.replaceAll(" ", "-"),
id: condition.title.replaceAll(/[^a-zA-Z0-9-_:.]/g, "-"),
Copy link
Collaborator

Choose a reason for hiding this comment

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

same here

Copy link
Collaborator

@mcmcgrath13 mcmcgrath13 left a comment

Choose a reason for hiding this comment

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

thanks!

@mcmcgrath13
Copy link
Collaborator

@gordonfarrell were you able to re-run the axe test on this to make sure it's appeased?

@gordonfarrell
Copy link
Collaborator Author

Yep!

@gordonfarrell gordonfarrell added this pull request to the merge queue Dec 10, 2024
Merged via the queue into main with commit d6b5283 Dec 10, 2024
14 checks passed
@gordonfarrell gordonfarrell deleted the gordon/aria-controls-2965 branch December 10, 2024 17:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix critical accessibility issue with lab result accordion buttons
2 participants