Add duo tone highlighting to Hero.Heading

[rezrah]

Summary

Adds duo tone semantics to the Hero.Heading in the same way as River and other components.

Notable difference is that highlighted text appears in the primary accent color instead of reducing contrast on adjacent text.

🔗 Preview

List of notable changes:

• Added support for <em> insertion into Hero.Heading
• Ported same VRT updates from the SubNav PR so we can run tests on individual stories

What should reviewers focus on?

• Does the API feel suitable despite the outpu being different to other duotone effects?

Steps to test:

1. Only added to Storybook here, as we don't want to advertise this everywhere.

Supporting resources (related issues, external links, etc):

• Slack thread where the feature was proposed

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

Before	After

[changeset-bot]

🦋 Changeset detected

Latest commit: 3262fd5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[Copilot]

Pull request overview

This PR adds duo tone highlighting support to Hero.Heading component by styling <em> tags with the primary accent color. Unlike other components like River and SectionIntro which use muted text with emphasis bringing it back to default color, Hero uses the accent color for emphasis on default-colored text. The PR also includes infrastructure improvements to the visual regression testing scripts.

Changes:

• Added CSS styling for <em> tags within Hero.Heading to display in accent-primary color with normalized font-style
• Updated visual regression test infrastructure to support running individual tests via command-line arguments
• Added flakey SubNav Anchor Nav Variant test to skip list and removed corresponding test spec

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/react/src/Hero/Hero.module.css	Adds styling for em tags within Hero-heading to use accent-primary color and normal font-style
packages/react/src/Hero/Hero.examples.stories.tsx	Demonstrates the new duo tone feature with <em> tags in the GridlineExpressiveWithImageCarousel story
packages/e2e/scripts/playwright/update-visual-snapshots	Enhances script to accept extra arguments for filtering tests, enabling running individual test files or grep patterns
packages/e2e/scripts/playwright/playwright.generate-tests.ts	Adds flakey Anchor Nav Variant test to skip list due to IntersectionObserver timing issues
packages/react/src/SubNav/SubNav.visual.spec.ts	Removes Anchor Nav Variant test that's now skipped in the generator
.changeset/sour-rockets-drum.md	Documents the new duo tone feature as a patch release with usage example

[github-actions]

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

[rfearing]

🎉

[danielguillan]

@rezrah we should be using the non-semantic <b> element instead of <em> for making the duotone treatment accessible. We moved from em to b by default here, although we kept em to avoid breaking changes.

[rezrah]

@danielguillan thanks, that's a great point. Updated to support <b> only. We still seem to support <em> in codebase, but for legacy backwards-compat reasons.

@rfearing please see note above. In the templates we want to enable passthrough for <b> not <em>