feat: use smaller description text for page header without byline #216

jawinn · 2025-11-25T20:25:57Z

Summary of changes

Use smaller description text for the Page Header component without a byline

Use smaller text size for the page header component's description, as used on the Careers page. Applies to usage of the Page Header without an author byline. The previous larger and heavier weight font still applies to the description when it's followed by the author byline, as used on the homepage.

Two small accessibility tree improvements

Use more semantic paragraph element for page header description, instead of a div.
Use aside element for ideas feature sections on the ideas page. This helps keep the headings scoped to these areas that are complementary and separate from the list of articles.

The pattern library documentation for Page Header has also been updated to include a 3rd example that represents the version of the page header that does not have a byline, like the one used on the Careers page, to help with comparison.

Relevant Links

Story: ADB-297

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.

Validation

Make sure all PR checks have passed.
View testing link.
Page header description paragraph should have smaller 20px text on the Careers page with a regular weight, which looks like the paragraph text at the top of the Who We Are page.
Page header description paragraph text size and weight should remain as before on the homepage (when there is a byline).
Page header description is using a paragraph instead of a div.
The two Ideas page "features" sections are appearing within an aside, and look and function the same as both.

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.

Windows

Firefox
Chrome
Edge

MacOS

Firefox
Chrome
Safari
Edge

Android

Firefox
Chrome
Edge

iOS

Safari

Use design requested smaller text size for the page header component's description, as used on the Careers page. Applies to usage of page header without an author byline; the larger heavier weight font still applies to the description when it's followed by the author byline, as used on the homepage.

Use a paragraph element instead of a div, which is a better semantic choice for a subtitle. This is a small improvement to the accessibility tree for important text elements at the top of the page.

Wrap ideas feature sections within an aside, to improve accessibility tree and scope its headings so they do not apply to the same tier as the articles.

aem-code-sync · 2025-11-25T20:26:00Z

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 PSI checks
Re-sync branch

Commits

e563b2a ✅ (latest)
7daedd8 ✅
482597c ✅

aem-code-sync · 2025-11-25T20:32:29Z

	Page	Scores	Audits	Google
📱	/
🖥️	/

jawinn added 3 commits November 25, 2025 14:29

fix: use more semantic element for page header description

7daedd8

Use a paragraph element instead of a div, which is a better semantic choice for a subtitle. This is a small improvement to the accessibility tree for important text elements at the top of the page.

fix: use aside element for ideas features on ideas page

e563b2a

Wrap ideas feature sections within an aside, to improve accessibility tree and scope its headings so they do not apply to the same tier as the articles.