cfpb / design-system-react

A React/Storybook implementation of CFPB's Design System
https://cfpb.github.io/design-system-react/
MIT License
6 stars 4 forks source link

[Hero] Allow hero headings to be <h1>, <h2>, etc. instead of unstyled headings wrapped in <p> tags #328

Closed billhimmelsbach closed 7 months ago

billhimmelsbach commented 7 months ago

A little bit of a nuanced issue here that affects accessibility. Right now, if I wanted the heading of a hero to be a <h1> instead of a <p> tag, I could pass in the full node instead of the text:

Instead of this: heading={My super cool heading!} Do this: heading={<h1>My super cool heading!</h1>}

The problem with that is that then the heading still renders inside of a <p> tag, which isn't great, but also the stylings of the heading wouldn't get applied to the heading but instead get applied to the enclosing <p> tag.

So this PR instead allows the headingLevel to create a heading with the heading content directly, instead of being wrapped in a <p> tag. This lets you set the heading to be an <h1> or other heading level a little easier, which we'll want for accessibility and also matches the markdown of the DS a little better by removing the enclosing <p> tag. I've also done something similar for the subheading but also it defaults to being a <p> tag.

I used createElement to do this because it's the easiest to implement with Typescript.

Current behavior

Expected behavior