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

fix: [Eyebrow] display as <div> with ".h5" class instead of <h5> #204

Merged
merged 4 commits into from
Oct 20, 2023
Merged

fix: [Eyebrow] display as <div> with ".h5" class instead of <h5> #204

merged 4 commits into from
Oct 20, 2023

Conversation

meissadia
Copy link
Contributor

Closes #203

Changes

No visual change, just a structural change in how the heading is implemented to improve accessibility (no longer displaying an h5 ahead of an h1)

Screenshots

Before After
eyebrow-before eyebrow-after

@meissadia meissadia requested a review from shindigira as a code owner October 12, 2023 22:31
@netlify
Copy link

netlify bot commented Oct 12, 2023 •
edited
Loading

✅ Deploy Preview for cfpb-design-system-react ready!

Name Link
🔨 Latest commit e290941
🔍 Latest deploy log https://app.netlify.com/sites/cfpb-design-system-react/deploys/6532cdc708148400083c6bb6
😎 Deploy Preview https://deploy-preview-204--cfpb-design-system-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

billhimmelsbach
billhimmelsbach reviewed Oct 19, 2023
View reviewed changes
Copy link
Contributor

@billhimmelsbach billhimmelsbach left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Heyo! Nice fix @meissadia! I'm going to be using this component in the Institutional Details page, so thanks for working on it!

One small thing though, is that I think even the main "h1 header" should also only be styled as an h1 in your Eyebrow story and just be a div in the markup also? I think that's how the design system does it...

Screenshot 2023-10-19 at 8 45 08 AM

That'll probably be the most flexible?

@meissadia
Copy link
Contributor Author

One small thing though, is that I think even the main "h1 header" should also only be styled as an h1 in your Eyebrow story and just be a div in the markup also? I think that's how the design system does it...

@billhimmelsbach Thanks for catching that, updated 👍🏾

@meissadia meissadia enabled auto-merge (squash) October 19, 2023 19:40
billhimmelsbach
billhimmelsbach approved these changes Oct 20, 2023
View reviewed changes
Copy link
Contributor

@billhimmelsbach billhimmelsbach left a comment

Choose a reason for hiding this comment

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

Looks good!

@meissadia meissadia merged commit ed4b167 into main Oct 20, 2023
5 checks passed
@meissadia meissadia deleted the 203-make-eyebrow-not-h5 branch October 20, 2023 20:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@billhimmelsbach billhimmelsbach billhimmelsbach approved these changes

@shindigira shindigira Awaiting requested review from shindigira

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Accessibility] Eyebrow header - display as <div> with ".h5" class instead of <h5>
2 participants
@meissadia @billhimmelsbach