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 broken heading order on heroes page #1328

Merged
merged 3 commits into from
Nov 8, 2021
Merged

Conversation

chosak
Copy link
Member

@chosak chosak commented Nov 3, 2021

#1299 modified the content of the heroes page and added several examples with <h1> tags. This breaks Lighthouse accessibility checking, with then fails with "Heading elements are not in a sequentially-descending order". To fix this, this commit changes those <h1> tags to be <p class="h1">.

This was also how the previous hero content was configured in f3085f2.

Edit: preview altered page at https://deploy-preview-1328--cfpb-design-system.netlify.app/design-system/patterns/heroes; this now scores 100 on Lighthouse.

PR 1299 modified the content of the heroes page and added several
examples with <h1> tags. This breaks Lighthouse accessibility checking,
with then fails with "Heading elements are not in a
sequentially-descending order". To fix this, this commit changes those
<h1> tags to be <p class="h1">.

This was also how the previous hero content was configured in
f3085f2.
@netlify
Copy link

netlify bot commented Nov 3, 2021

✔️ Thanks for the improvements! Browse a preview of your changes using the link below.

🔨 Explore the source changes: 9e507e8

🔍 Inspect the deploy log: https://app.netlify.com/sites/cfpb-design-system/deploys/61893cd22913e8000785cf6a

😎 Browse the preview: https://deploy-preview-1328--cfpb-design-system.netlify.app

We use paragraph elements with an h1 class on the DS website to prevent
lighthouse from reporting heading order errors. But we  want developers to
use h1 elements when adding heroes to cf.gov so we only use the p elements
in the rendered code snippet section.
Copy link
Member

@contolini contolini left a comment

Choose a reason for hiding this comment

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

@chosak Thanks for catching this. I pushed up a commit that changes them back to <p> for only the rendered snippets and not the code shown to developers (we want devs to copy/paste the <h1> snippets).

@chosak chosak force-pushed the fix/heroes-heading-order branch from a17a715 to 9e507e8 Compare November 8, 2021 15:05
@chosak
Copy link
Member Author

chosak commented Nov 8, 2021

Thanks @contolini. Your commit missed a few of the examples so I've gone through and added variation_code_snippet_rendered for each variation. Now all of the variations consistently use <h1> for variation_code_snippet and <p class="h1"> for variation_code_snippet_rendered.

@chosak chosak merged commit 36fad49 into main Nov 8, 2021
@chosak chosak deleted the fix/heroes-heading-order branch November 8, 2021 15:26
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.

2 participants