USWDS-Site - Banner: Fix component code ID’s

[mahoneycm]

Summary

Fixed a bug causing component code example ID’s and relevant aria attributes to display incorrectly. Now, example ID’s match what’s found in the USWDS repo and are more succinct.

Breaking change

This is potentially a breaking change

Related issue

Closes #2307

Preview link

Banner component page →

Problem statement

During the switch to Storybook, we changed the way Banner variant data is stored and provided their ID’s in their relevant JSON files. On site, the code capture for banner was not update to reflect this new structure.

During the code capture, it was set to replace gov-banner with the variant ID, gov-banner-default for example. Since we didn’t remove this replacement, it would replace gov-banner while leaving the existing suffix, resulting in results like gov-banner-default-default or gov-banner-mil-spanish-dot-mil-lang-es

Solution

Remove the now unnecessary string replacement form component code capture.

Major changes

Code preview IDs now match what we have in the USWDS repo.

Testing and review

1. Inspect component code preview
2. Compare the banner variants ID’s to those found in packages/usa-banner/src/content json files
3. Confirm that they match
4. Run pa11y tests and/or axe devtools accessibility scan on this page
5. Confirm no errors

Testing checklist

• Example banner ID’s match those found in USWDS repo
• Confirm they are displaying correctly on Site
• Confirm there are no accessibility errors as a result of this change (such as duplicate IDs)
• Approve new changelog entry

[mejiaj]

LGTM, thanks. Added note for updating two changelog fields.

Confirming

• IDs are accurate
• Banners work
• No new a11y issues (scanned via axe)

[mejiaj]

Todo

Update date and versionUswds fields.