feat(component): add anchor navigation functionality to `<post-tab>` component #6350

alionazherdetska · 2025-09-30T09:53:50Z

📄 Description

Ticket: #5940

Breaking Changes

Renamed post-tab-header component to post-tab-item
Renamed property panel → name in post-tab-item
Renamed property name → for in post-tab-panel
Renamed property activePanel → activeTab in post-tabs
Changed slot structure: tab items now use default slot, panels use panels slot

New Features

Added navigation variant for anchor-based navigation
Automatic variant detection based on presence of anchor links
Navigation mode renders semantic <nav> element with proper ARIA attributes

Testing

Added Cypress tests for Components package
e2e tests for Angular and Nextjs integration packages will be added in the new ticket: chore(components-angular, nextjs-integration): add general component e2e test suite #6471

Documentation

Updated Storybook stories with variant controls
Added examples for both panels and navigation variants

Animation:

Cleaned up animations to prevent memory leaks by canceling running animations on component destruction.

Note:
The controls table still shows both CSS Shadow Parts for both variants because Storybook automatically extracts these from the component's JSDoc part annotations at build time, preventing any dynamic filtering based on the selected variant control.

Unlike slots, which are manually defined in the stories configuration and support conditional visibility using the if property, CSS Shadow Parts are auto-generated from the component source code.

🚀 Preview Link

Tabs component

📝 Checklist

✅ My code follows the style guidelines of this project
🛠️ I have performed a self-review of my own code
📄 I have made corresponding changes to the documentation
⚠️ My changes generate no new warnings or errors
🧪 I have added tests that prove my fix is effective or that my feature works
✔️ New and existing unit tests pass locally with my changes

changeset-bot · 2025-09-30T09:53:56Z

🦋 Changeset detected

Latest commit: a49862c

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

This PR includes changesets to release 12 packages

Name	Type
@swisspost/design-system-components	Major
@swisspost/design-system-components-react	Major
@swisspost/design-system-components-angular	Major
@swisspost/design-system-documentation	Minor
@swisspost/design-system-components-angular-workspace	Patch
@swisspost/design-system-nextjs-integration	Patch
@swisspost/design-system-styles	Major
@swisspost/design-system-tokens	Major
@swisspost/design-system-icons	Major
@swisspost/design-system-styles-primeng	Major
@swisspost/internet-header	Major
@swisspost/design-system-styles-primeng-workspace	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

swisspost-bot · 2025-09-30T09:56:47Z

Related Previews

https://preview-6350--swisspost-design-system-next.netlify.app

packages/components/src/components/post-tab-item/post-tab-item.tsx

….tsx Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>

…spost/design-system into feat/tabs-anchor-navigation

leagrdv

The previous Subnavigation component had styles. Don't we want the anchor navigation to also have styles? Since it's sharing the post-tabs component, I'd have expected it to have the same styles

leagrdv · 2025-10-30T07:52:02Z

packages/components/src/components/post-tab-item/post-tab-item.tsx

+        role={isPanelMode ? 'tab' : undefined}
+        data-version={version}
+        data-navigation-mode={this.isNavigationMode.toString()}
+        aria-selected={isPanelMode ? 'false' : undefined}


In anchor mode, the active link should have aria-current="page"

leagrdv · 2025-10-30T07:57:26Z

packages/components/src/components/post-tabs/post-tabs.tsx


  render() {
+    const tabsRole = this.isNavigationMode ? undefined : 'tablist';
+    const ariaLabel = this.isNavigationMode ? 'Tabs navigation' : undefined;


aria-label should be localized so that should be added as a prop

Copilot

Pull Request Overview

This PR refactors the post-tabs component to support two distinct usage modes: panels variant (for tabbed content sections) and navigation variant (for anchor-based page navigation). The refactoring includes renaming post-tab-header to post-tab-item, updating property names for consistency, and implementing automatic mode detection based on the presence of anchor elements.

Renamed post-tab-header component to post-tab-item with updated properties
Changed property names across components for better clarity (activePanel → activeTab, panel → name, name → for)
Added automatic mode detection and dual-mode support (panels vs navigation)

Reviewed Changes

Copilot reviewed 26 out of 28 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
packages/components/src/components/post-tabs/post-tabs.tsx	Core refactoring with mode detection logic and navigation support
packages/components/src/components/post-tab-item/post-tab-item.tsx	New component replacing post-tab-header with navigation mode detection
packages/components/src/components/post-tab-panel/post-tab-panel.tsx	Updated property from `name` to `for` and added slot attribute
packages/documentation/src/stories/components/tabs/tabs.stories.ts	Updated stories to demonstrate both variants with new API
packages/nextjs-integration/src/app/ssr/page.tsx	Updated integration example with new component names and properties
packages/components/cypress/e2e/tabs.cy.ts	Comprehensive test updates covering both modes and accessibility
Various documentation files	Updated all documentation references from old to new API

Copilot · 2025-11-03T15:00:25Z

packages/components/src/components/post-tabs/post-tabs.tsx

+    }
+
+    // Clean up content observer
+    this.contentObserver.disconnect();


The contentObserver may be undefined if setupContentObserver() throws an error or if disconnectedCallback() is called before componentDidLoad() completes. Add a null check before calling disconnect().

Suggested change

this.contentObserver.disconnect();

if (this.contentObserver) {

this.contentObserver.disconnect();

}

Copilot · 2025-11-03T15:00:25Z

packages/components/src/components/post-tabs/post-tabs.tsx

  private enableTabs() {
+    // Prevent early call before detectMode()
+    if (!this.isLoaded) return;


The guard if (!this.isLoaded) causes enableTabs() to exit early when called from componentDidLoad() at line 65, before this.isLoaded = true is set at line 64. This means tabs won't be enabled on initial load. Move this.isLoaded = true before calling enableTabs() in componentDidLoad().

Copilot · 2025-11-03T15:00:26Z

packages/components/src/components/post-tabs/post-tabs.tsx

+    if (this.isNavigationMode) {
+      if (this.isLoaded) this.postChange.emit(this.currentActiveTab.name);
+      return;
+    }


In navigation mode, if this.isLoaded is false, the event won't be emitted. However, the method still returns, which means navigation tabs activated during initialization won't trigger the postChange event. This is inconsistent with panels mode behavior at line 202. Consider removing the if (this.isLoaded) check or handling both modes consistently.

Copilot · 2025-11-03T15:00:26Z

packages/components/src/components/post-tab-item/post-tab-item.tsx

+  shadow: true,
+})
+export class PostTabItem {
+  private mutationObserver = new MutationObserver(this.checkNavigationMode.bind(this));


The MutationObserver callback binding is created during field initialization before the component instance is fully constructed. Consider initializing the observer in connectedCallback() to ensure proper binding context: this.mutationObserver = new MutationObserver(this.checkNavigationMode.bind(this));

Copilot · 2025-11-03T15:00:26Z

packages/documentation/src/stories/components/tabs/tabs.stories.ts

-      name: 'active-panel',
+    variant: {
+      name: 'variant',
+        description: 'Select between panels variant (content sections) or navigation variant (page navigation). <post-banner data-size="sm"><p>If you attempt to mix both variants(anchors + panels), the component will throw an error.</p></post-banner>',


Missing space in 'variants(anchors' - should be 'variants (anchors'.

Suggested change

description: 'Select between panels variant (content sections) or navigation variant (page navigation). <post-banner data-size="sm"><p>If you attempt to mix both variants(anchors + panels), the component will throw an error.</p></post-banner>',

description: 'Select between panels variant (content sections) or navigation variant (page navigation). <post-banner data-size="sm"><p>If you attempt to mix both variants (anchors + panels), the component will throw an error.</p></post-banner>',

Copilot · 2025-11-03T15:00:27Z

packages/documentation/src/stories/components/tabs/tabs.stories.ts

+
+        activeItem?.remove();
        activePanel?.remove();


The find() method returns undefined if no active item is found, but the type annotation declares it as HTMLPostTabItemElement | undefined. The subsequent check at line 272 guards against this, but the logic appears flawed - find() should use a proper predicate. The current implementation always returns the first item because the arrow function doesn't return the result of classList.contains('active').

Copilot · 2025-11-03T15:00:27Z

packages/components/cypress/e2e/tabs.cy.ts

+    });
+
+    it('should render the tabs container as nav element', () => {
+      cy.get('@tabs').find('nav[role="navigation"], nav').should('exist');


The selector nav[role=\"navigation\"], nav is redundant since <nav> elements have an implicit ARIA role of 'navigation'. The test should either check for just nav or verify that the role is properly set/omitted. Consider simplifying to cy.get('@tabs').find('nav').should('exist').

Suggested change

cy.get('@tabs').find('nav[role="navigation"], nav').should('exist');

cy.get('@tabs').find('nav').should('exist');

Copilot · 2025-11-03T15:00:27Z

packages/components-angular/projects/consumer-app/cypress/e2e/components.cy.ts

@@ -1,4 +1,4 @@
-import * as Components from '@swisspost/design-system-components/dist';
+import * as Components from '@swisspost/design-system-components/loader';


The import path changed from dist to loader. This appears to be an unrelated change to the tabs refactoring. Ensure this import path change is intentional and doesn't break the component loading mechanism.

Suggested change

import * as Components from '@swisspost/design-system-components/loader';

import * as Components from '@swisspost/design-system-components/dist';

sonarqubecloud · 2025-11-03T15:03:03Z

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

alionazherdetska added 4 commits September 30, 2025 11:11

feat(component): implement anchor-navigation for <post-tabs>

71e02b0

improved the render

fa1c06d

changed the logic for assigning aria current

20cc211

small changes

0944082

alionazherdetska requested review from a team as code owners September 30, 2025 09:53

alionazherdetska requested a review from alizedebray September 30, 2025 09:53

alionazherdetska mentioned this pull request Sep 30, 2025

feat(component): add anchor navigation functionality to <post-tab> component #6344

Closed

alionazherdetska marked this pull request as draft September 30, 2025 11:15

alionazherdetska added 19 commits September 30, 2025 13:26

changed the docs

ba0fa35

fixed the Enter button

cc36657

reverted some redundant changes

a51883b

changed some PostTabHeader to PostTabItem

428f9bc

some adjustments

ec120a5

removed redundant code

f279029

removed redundant code

10aa194

removed comments

0817546

removed comments

2d1daa3

changed the naming in the test files

d2e814d

added initial docs

2a468b0

adjusted the docs

8283f36

small changes

93ca97a

added e2e tests

8435960

removed redundant test

8a80ffe

changed the docs

b0d7a46

changed the docs

8cb61d0

changed the name slots

6fe0429

updated the docs

b50cef5

alionazherdetska added 7 commits October 15, 2025 10:57

fixed the tests

a615a95

reverted pnpm-lock.yaml

d18793a

reverted pnpm-lock.yaml

a454af9

Merge branch 'main' into feat/tabs-anchor-navigation

b196017

fix

20711db

fix

e6369f5

test fix

4fd4a3d

alionazherdetska marked this pull request as draft October 16, 2025 14:53

removed e2e files

098e7e7

alionazherdetska marked this pull request as ready for review October 17, 2025 11:38

alionazherdetska and others added 5 commits October 21, 2025 09:23

Merge branch 'main' into feat/tabs-anchor-navigation

bd07d05

clean up

109e9d0

fixed the order

e16d55c

cleanup

4709cb2

fixed the markup

86173c4

alizedebray reviewed Oct 24, 2025

View reviewed changes

packages/components/src/components/post-tab-item/post-tab-item.tsx Show resolved Hide resolved

packages/components/src/components/post-tab-item/post-tab-item.tsx Outdated Show resolved Hide resolved

alionazherdetska and others added 5 commits October 27, 2025 18:28

Update packages/components/src/components/post-tab-item/post-tab-item…

8470400

….tsx Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>

added mutation observer to post-tab-item

9f47c55

Merge branch 'feat/tabs-anchor-navigation' of https://github.com/swis…

c76cafc

…spost/design-system into feat/tabs-anchor-navigation

autogenerated files

965595d

Merge branch 'main' into feat/tabs-anchor-navigation

3c1a452

alionazherdetska requested a review from alizedebray October 28, 2025 14:00

alizedebray requested review from leagrdv and removed request for alizedebray October 28, 2025 14:44

leagrdv requested changes Oct 30, 2025

View reviewed changes

Merge branch 'main' into feat/tabs-anchor-navigation

3145567

Copilot AI review requested due to automatic review settings November 3, 2025 14:57

Copilot AI reviewed Nov 3, 2025

View reviewed changes

fixed the docs

a49862c

	description: 'Select between panels variant (content sections) or navigation variant (page navigation). <post-banner data-size="sm"><p>If you attempt to mix both variants(anchors + panels), the component will throw an error.</p></post-banner>',
	description: 'Select between panels variant (content sections) or navigation variant (page navigation). <post-banner data-size="sm"><p>If you attempt to mix both variants (anchors + panels), the component will throw an error.</p></post-banner>',

	cy.get('@tabs').find('nav[role="navigation"], nav').should('exist');
	cy.get('@tabs').find('nav').should('exist');

		@@ -1,4 +1,4 @@
		import * as Components from '@swisspost/design-system-components/dist';
		import * as Components from '@swisspost/design-system-components/loader';

feat(component): add anchor navigation functionality to <post-tab> component #6350

Are you sure you want to change the base?

feat(component): add anchor navigation functionality to <post-tab> component #6350

Conversation

alionazherdetska commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📄 Description

Breaking Changes

New Features

Testing

Documentation

Animation:

🚀 Preview Link

📝 Checklist

Uh oh!

changeset-bot bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

swisspost-bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

leagrdv left a comment

Choose a reason for hiding this comment

Uh oh!

leagrdv Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

leagrdv Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Nov 3, 2025

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat(component): add anchor navigation functionality to `<post-tab>` component #6350

feat(component): add anchor navigation functionality to `<post-tab>` component #6350

alionazherdetska commented Sep 30, 2025 •

edited

Loading

changeset-bot bot commented Sep 30, 2025 •

edited

Loading

swisspost-bot commented Sep 30, 2025 •

edited

Loading