Skip to content

feat(DBLABS-158): Heroes keep the authored heading level - #118

Merged
amazingrando merged 3 commits into
mainfrom
feat/hero-heading
Oct 2, 2026
Merged

amazingrando merged 3 commits into
mainfrom
feat/hero-heading

Conversation

@amazingrando

@amazingrando amazingrando commented Oct 1, 2026 •

Copy link
Copy Markdown
Collaborator

Summary of changes

  • Render the hero headline as the element the author set (h1–h6, or a paragraph for default text) instead of always forcing an h2.
  • Keep the hero type styles on .hero__headline so Heading 1, Heading 2, and a paragraph look the same.
  • Note in the README that editors must set the heading level. The hero block in the library (/docs/library/blocks/hero) is Document Authoring content and still needs the same note published separately.

Relevant Links

Test URLs:

Checklist

  • This PR has visual changes, and has been reviewed by a designer.
  • This PR has code changes, and our linters still pass.
  • This PR has new code, so new tests were added or updated, and they pass.
  • This PR affects production code, so it was browser tested (see below).
  • This PR has copy changes, so copy was proofread and approved.
  • The content of this PR requires documentation, so we added a detailed description of the component's purpose, requirements, quirks, and instructions for use by designers and developers. This includes accessibility information if pertinent.

Validation

  1. Make sure all PR checks have passed.
  2. Pull down the branch and run locally or view on the PR testing link.
  3. Verify the implementation against the design and story requirements.

Validation steps

  • Homepage hero (/): category stays in the eyebrow, the date stays at the top right, the headline is the article title, and Read stays at the bottom right. The headline element is a p because that page authors a link with no heading style.
  • Article hero (/research/how-creatives-are-thinking-about-ai): the headline is an h1.hero__headline with the article title, and it is the only h1 on the page.
  • Author a hero headline as Heading 2 and confirm the rendered element is h2.hero__headline.
  • Author a hero headline as the default paragraph (no link) and confirm the rendered element is p.hero__headline.
  • Heading 1, Heading 2, and paragraph headlines use the same font, size, line height, and weight.
  • A linked headline still wraps the card in one link. A javascript: URL does not become a link.
  • Keyboard: tab to the homepage hero. Focus lands once on the card link, the focus ring is visible, and Enter follows the article URL.
  • Screen reader: on the article, the hero title is announced as heading level 1. On the homepage, the hero title is not a heading. The card link name includes the title and “Read”. Category, date, and the image stay hidden.

Browser Testing

We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.

Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.

Blocks and pages should undergo comprehensive testing to ensure they work as expected in real-use scenarios. Standard testing during pre-production should include at least these browsers.

  • Firefox
  • Chrome
  • Safari

Dark mode and light mode

Most pages support both dark and light mode, based on prefers-color-scheme.
Changes that affect the frontend should support both color schemes.

  • Frontend changes have been tested in both light mode and dark mode.

@aem-code-sync

aem-code-sync Bot commented Oct 1, 2026 •

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@aem-code-sync

aem-code-sync Bot commented Oct 1, 2026 •

Copy link
Copy Markdown
Page Scores Audits Google
📱 / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ / PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
📱 /research/how-creatives-are-thinking-about-ai PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /research/how-creatives-are-thinking-about-ai PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@amazingrando
amazingrando marked this pull request as ready for review October 1, 2026 13:48
@amazingrando amazingrando changed the title feat(hero): keep the authored heading level feat(DBLABS-158): Heroes keep the authored heading level Oct 1, 2026

@marissahuysentruyt marissahuysentruyt left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

All of the validation instructions check out! I had a very minor note on the README.

Comment thread README.md Outdated

In Document Authoring, insert a section break after the hero table. Paste the hero image as a normal picture — you do not need to set `loading` or `fetchpriority`. Adding `fetchpriority="high"` or a preload usually makes Lighthouse scores worse on Edge Delivery; see Adobe’s [keeping-it-100](https://www.aem.live/developer/keeping-it-100) guidance.

Set the headline's heading level in Document Authoring. The hero keeps that element: Heading 1, Heading 2, or the default paragraph. Articles that need a single page title use Heading 1. A page with more than one hero, such as Sneaks, should not use Heading 1 for each one. The same note belongs on the hero block in the library (`/docs/library/blocks/hero`). That page is Document Authoring content and publishes separately from this repo.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Do we need the last couple of sentences in this paragraph, about "The same note belongs on the hero block in the library..."?

to me, it sort of reads like an internal note, but I could be wrong.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Good edit. I've updated it.

@amazingrando
amazingrando merged commit c24c299 into main Oct 2, 2026
4 of 5 checks passed

This branch was successfully deployed

1 active deployment
feat/hero-heading — 71f5ff5f Deployed Oct 2, 2026 by aem-code-sync[bot]
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