LG-8681: Replace h4 with h1 in emails

[NavaTim]

🎫 Ticket

• LG-8686

🛠 Summary of changes

• Improve access to main heading text by using <h1> tags instead of <h4> tags
  • VPAT findings suggested <h2>, but guidance from design and content indicated this should be <h1>
• Update email headings to match desktop heading design guidelines (see story comments for details)

📜 Testing Plan

This can be tested using the built-in mailer tester on a local dev stack (links below).

• You’re ready to verify your identity with Login.gov in person (unique template)
• You successfully verified your identity with Login.gov (unique template)
• Any other email (link to list of emails)

You can view without a local dev stack at the following link.

• Review app - Mailer Previews

This is a review app setup in a functionally identical branch that has mailer previews enabled.

👀 Screenshots

Please use the Review app - Mailer Previews link to get a live preview. You can compare this with the Mailer Previews in dev.

[aduth]

This makes sense, though I'm curious if there are related resources on the specific point of choosing H2 over H1 for the main heading in the email. I see it's mentioned in the ticket that this is "reserved for the email subject line", but I couldn't find any resources which explain this. In fact, the only thing related to headings in emails I could find explicitly mentioned to use an H1 🤷

[NavaTim]

This makes sense, though I'm curious if there are related resources on the specific point of choosing H2 over H1 for the main heading in the email. I see it's mentioned in the ticket that this is "reserved for the email subject line", but I couldn't find any resources which explain this. In fact, the only thing related to headings in emails I could find explicitly mentioned to use an H1 🤷

I didn't find a specific resource on using H2 over H1, but I infer that here using H2 would at least raise these to the same heading level as other headings that appear in common browser email clients. It may be that H1 is more appropriate for some of these cases.

[NavaTim]

@aduth Update - I did find a resource that lists email clients that add H1 tags to the page content when displaying an email. They don't look like particularly common clients, but using H2 instead should help accommodate these clients.

[zachmargolis]

what if we cleaned up the formatting while we're here?

Suggested change

	<h2><%= @header || message.subject %>
	</h2>
	<h2><%= @header || message.subject %></h2>

[NavaTim]

Updated formatting.

[NavaTim]

I received some guidance suggesting these should use H1, but this will need more design/content review before moving forward. Once I have clearer feedback on what direction to take, I'll update this PR and post screenshots of style changes where applicable.

[NavaTim]

This PR is ready to review after incorporating feedback from @allis-green. Since there would be a lot of screenshots, I opted to provide a review app version instead.

The app may need to be restarted if it reaches the deadline or if the CI system undergoes maintenance. Let me know if you need the app restarted.

[aduth]

LGTM 👍

[aduth]

Noting that this moves us to consistency with the design system and not the IdP's current typography, since in the IdP we currently use 1.35 for H1 and H2, and 1.5 for every other heading level.

I don't feel too strongly about this and I think we'll want to eventually converge on a standard specification, but my understanding from the discussion yesterday was that we were going to be aligning to the IdP's current typography for now.

[NavaTim]

Reviewing the conversation, I never saw a reference to current desktop headings/typography from Nick nor Allison. Therefore I went with the design system. I expect this will also help reduce rework when the changes are finalized.

[allis-green]

@NavaTim, header styles look good to me. Thanks for making these changes.