chore(components, accessibility): improve post-header semantics

[alionazherdetska]

📋 Summary

This PR improves the semantic structure and accessibility of the post-header and post-mainnavigation components.

---

Key Question

Original Question from [#6687]

"Is it correct for the <nav> element from the post-mainnavigation to be placed inside a <header> element?"

Decision:

Yes, placing <nav> inside <header> is correct and follows W3C best practices.

Why this is valid:

Both W3C and MDN provide examples showing navigation elements nested within the header. According to MDN:

"Even if it's not mandatory, it's common practice to put the main navigation menu within the main header."

Source: [MDN - WAI-ARIA Basics](https://developer.mozilla.org/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics?utm_source=chatgpt.com#wegweiserlandmarken)

Trusted Source Examples:

1. [MDN - WAI-ARIA Basics: Landmark Navigation](https://developer.mozilla.org/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics?utm_source=chatgpt.com#wegweiserlandmarken)
2. [W3C Design System - Header with Navigation](https://design-system.w3.org/code/header-nav.html)

---

Changes Made

1. Added Semantic <header> Element with role="banner"

Accessibility Tree Comparison:

BEFORE:

AFTER:

Why role="banner" is needed:

---

2. Added Required caption Prop to post-mainnavigation

---

3. Moved Event Listener to Shadow Root

Problem with host listener:

When the event listener is attached to the host element, screen readers detect the entire component as interactive and announce it as "clickable banner landmark", which is incorrect and confusing for users with assistive technology.

Solution:

Changed from this.host.addEventListener() to this.host.shadowRoot.addEventListener().

[changeset-bot]

🦋 Changeset detected

Latest commit: 1711a9f

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

This PR includes changesets to release 14 packages

Name	Type
@swisspost/design-system-components	Major
@swisspost/design-system-documentation	Patch
@swisspost/design-system-components-angular-workspace	Major
@swisspost/design-system-components-react	Major
@swisspost/design-system-nextjs-integration	Major
@swisspost/design-system-components-angular	Major
@swisspost/design-system-changelog-github	Major
@swisspost/design-system-eslint	Major
@swisspost/design-system-icons	Major
@swisspost/internet-header	Major
@swisspost/design-system-styles	Major
@swisspost/design-system-styles-primeng-workspace	Major
@swisspost/design-system-styles-primeng	Major
@swisspost/design-system-tokens	Major

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

[swisspost-bot]

Related Previews

• https://preview-6841--swisspost-design-system-next.netlify.app?devModeEnabled=true

[Copilot]

Pull request overview

This PR improves the accessibility semantics of the post-header component by wrapping the header content in a semantic <header> element, adding a required caption property to post-mainnavigation for aria-label support, and fixing event listener attachment to use shadowRoot instead of the host element.

Key Changes:

• Added semantic <header> wrapper element with explicit role='banner' to the post-header component
• Introduced a required caption property to post-mainnavigation that provides an accessible label via aria-label
• Moved click event listener from host element to shadowRoot for proper event handling within Shadow DOM

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/components/src/components/post-header/post-header.tsx	Wrapped header content in <header role='banner'> element and moved click event listener to shadowRoot
packages/components/src/components/post-header/post-header.scss	Added header selector to transition styles for consistency
packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx	Added required caption property and applied it as aria-label to the nav element
packages/components/src/components/post-mainnavigation/readme.md	Auto-generated documentation update showing the new caption property
packages/documentation/src/stories/components/header/header.stories.ts	Updated story to use shorter caption text ("Main" instead of "Main navigation")
packages/components/src/components.d.ts	Auto-generated TypeScript definitions for the new caption property

[alionazherdetska]

Moved the click event listener from the host element to the shadow root
to fix an accessibility issue where screen readers were incorrectly announcing
the banner landmark as "clickable banner landmark".

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud