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

.changeset/tabs-anchor-navigation.md

@@ -0,0 +1,52 @@
+---
+"@swisspost/design-system-components": major
+"@swisspost/design-system-components-react": major
+"@swisspost/design-system-components-angular": major
+---
+
+Refactored `<post-tabs>` component:
+- Renamed `post-tab-header` component to `post-tab-item`
+- Renamed `panel` property to `name` in `post-tab-item` component
+- Renamed `name` property to `for` in `post-tab-panel` component  
+- Renamed `activePanel` property to `activeTab` in `post-tabs` component
+- Changed slot structure: `post-tab-item` elements now use the default slot and `post-tab-panel` elements use the `panels` slot
+
+BEFORE:
+
+```html
+<post-tabs active-panel="first">
+  <post-tab-header panel="first">First tab</post-tab-header>
+  <post-tab-header panel="second">Second tab</post-tab-header>
+  <post-tab-header panel="third">Third tab</post-tab-header>
+
+  <post-tab-panel name="first">
+    This is the content of the first tab.
+  </post-tab-panel>
+  <post-tab-panel name="second">
+    This is the content of the second tab.
+  </post-tab-panel>
+  <post-tab-panel name="third">
+    This is the content of the third tab.
+  </post-tab-panel>
+</post-tabs>
+```
+
+AFTER:
+
+```html
+<post-tabs active-tab="first">
+  <post-tab-item name="first">First tab</post-tab-item>
+  <post-tab-item name="second">Second tab</post-tab-item>
+  <post-tab-item name="third">Third tab</post-tab-item>
+
+  <post-tab-panel for="first" slot="panels">
+    This is the content of the first tab.
+  </post-tab-panel>
+  <post-tab-panel for="second" slot="panels">
+    This is the content of the second tab.
+  </post-tab-panel>
+  <post-tab-panel for="third" slot="panels">
+    This is the content of the third tab.
+  </post-tab-panel>
+</post-tabs>
+```

.changeset/tabs-navigation-mode.md

@@ -0,0 +1,6 @@
+---
+"@swisspost/design-system-components": minor
+"@swisspost/design-system-documentation": minor
+---
+
+Added navigation variant to the `post-tabs` component, enabling anchor-based navigation. The component now automatically detects whether `post-tab-item` elements contain anchor links and switches between panels and navigation variants accordingly.

packages/components-angular/package.json

@@ -49,6 +49,7 @@
     "angular-eslint": "19.1.0",
     "copyfiles": "2.4.1",
     "cypress": "14.3.2",
+    "cypress-axe": "1.5.0",
     "eslint": "9.18.0",
     "globals": "16.0.0",
     "karma": "6.4.4",

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';
 
 const COMPONENT_TAG_NAMES = Object.keys(Components)
   .filter(c => /^Post([A-Z][a-z]+)+$/.test(c))

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

@@ -0,0 +1,181 @@
+describe('Tabs', () => {
+  beforeEach(() => {
+    cy.visit('/tabs');
+    cy.injectAxe();
+    cy.get('post-tabs').first().as('panelTabs');
+    cy.get('post-tabs').last().as('navTabs');
+  });
+
+  describe('Panel Variant - Default', () => {
+    it('should render the tabs component', () => {
+      cy.get('@panelTabs').should('exist');
+    });
+
+    it('should show three tab headers', () => {
+      cy.get('@panelTabs').find('post-tab-item').should('have.length', 3);
+    });
+
+    it('should only show the first tab header as active', () => {
+      cy.get('@panelTabs').find('post-tab-item').first().should('have.class', 'active');
+      cy.get('@panelTabs').find('post-tab-item').eq(1).should('not.have.class', 'active');
+      cy.get('@panelTabs').find('post-tab-item').eq(2).should('not.have.class', 'active');
+    });
+
+    it('should only show the tab panel associated with the first tab header', () => {
+      cy.get('@panelTabs').find('post-tab-panel:visible').as('panel');
+      cy.get('@panel').should('have.length', 1);
+      cy.get('@panelTabs')
+        .find('post-tab-item')
+        .first()
+        .invoke('attr', 'name')
+        .then(tabName => {
+          cy.get('@panel').invoke('attr', 'for').should('equal', tabName);
+        });
+    });
+
+    it('should activate a clicked tab header and deactivate the tab header that was previously activated', () => {
+      cy.get('@panelTabs').find('post-tab-item').last().click();
+
+      cy.get('@panelTabs').find('post-tab-item').first().should('not.have.class', 'active');
+      cy.get('@panelTabs').find('post-tab-item').last().should('have.class', 'active');
+    });
+
+    it('should show the panel associated with a clicked tab header', () => {
+      cy.get('@panelTabs').find('post-tab-item').last().click();
+
+      cy.get('@panelTabs').find('post-tab-panel:visible').should('have.length', 1);
+
+      cy.get('@panelTabs')
+        .find('post-tab-item')
+        .last()
+        .invoke('attr', 'name')
+        .then(tabName => {
+          cy.get('@panelTabs')
+            .find('post-tab-panel:visible')
+            .invoke('attr', 'for')
+            .should('equal', tabName);
+        });
+    });
+  });
+
+  describe('Navigation Variant', () => {
+    it('should render as navigation when tabs contain anchor elements', () => {
+      cy.get('@navTabs').should('exist');
+      cy.get('@navTabs').find('post-tab-item').should('have.length', 3);
+      cy.get('@navTabs')
+        .find('post-tab-item')
+        .each($item => {
+          cy.wrap($item).find('a').should('exist');
+        });
+    });
+
+    it('should not render tab panels in navigation variant', () => {
+      cy.get('@navTabs').find('post-tab-panel').should('not.exist');
+      cy.get('@navTabs').find('[part="content"]').should('not.exist');
+    });
+
+    it('should render the tabs container as nav element', () => {
+      cy.get('@navTabs').find('nav[role="navigation"], nav').should('exist');
+    });
+
+    it('should set proper ARIA attributes for navigation', () => {
+      cy.get('@navTabs').find('nav').should('have.attr', 'aria-label', 'Tabs navigation');
+    });
+
+    it('should support programmatic tab activation via show() method', () => {
+      cy.get('@navTabs').then($tabs => {
+        const tabsElement = $tabs[0] as HTMLElement & { show: (tabName: string) => void };
+        tabsElement.show('nav-second');
+      });
+      cy.get('@navTabs').find('post-tab-item').eq(1).should('have.class', 'active');
+    });
+  });
+
+  describe('Accessibility - Panel Variant', () => {
+    beforeEach(() => {
+      cy.get('@panelTabs').as('tabs');
+    });
+
+    it('should have proper ARIA attributes for panels variant', () => {
+      cy.get('@tabs').find('[role="tablist"]').should('exist');
+      cy.get('@tabs').find('post-tab-item').should('have.attr', 'role', 'tab');
+      cy.get('@tabs').find('post-tab-item').should('have.attr', 'aria-selected');
+      cy.get('@tabs').find('post-tab-item').first().should('have.attr', 'aria-selected', 'true');
+      cy.get('@tabs').find('post-tab-item').not(':first').should('have.attr', 'aria-selected', 'false');
+    });
+
+    it('should link tabs to panels with aria-controls and aria-labelledby', () => {
+      cy.get('@tabs')
+        .find('post-tab-item')
+        .first()
+        .then($tab => {
+          const tabId = $tab.attr('id');
+          const ariaControls = $tab.attr('aria-controls');
+
+          cy.get(`post-tab-panel[id="${ariaControls}"]`).should('exist');
+          cy.get(`post-tab-panel[id="${ariaControls}"]`).should(
+            'have.attr',
+            'aria-labelledby',
+            tabId,
+          );
+        });
+    });
+
+    it('should manage tabindex properly', () => {
+      cy.get('@tabs').find('post-tab-item').first().should('have.attr', 'tabindex', '0');
+      cy.get('@tabs').find('post-tab-item').not(':first').should('have.attr', 'tabindex', '-1');
+
+      cy.get('@tabs').find('post-tab-item').last().click();
+      cy.get('@tabs').find('post-tab-item').last().should('have.attr', 'tabindex', '0');
+      cy.get('@tabs').find('post-tab-item').not(':last').should('have.attr', 'tabindex', '-1');
+    });
+  });
+
+  describe('Accessibility - Navigation Variant', () => {
+    beforeEach(() => {
+      cy.get('@navTabs').as('tabs');
+    });
+
+    it('should have proper ARIA attributes for navigation variant', () => {
+      cy.get('@tabs').find('nav').should('have.attr', 'aria-label', 'Tabs navigation');
+      cy.get('@tabs').find('post-tab-item').should('not.have.attr', 'role');
+      cy.get('@tabs').find('post-tab-item').should('not.have.attr', 'tabindex');
+    });
+
+    it('should not have tablist role in navigation variant', () => {
+      cy.get('@tabs').find('[role="tablist"]').should('not.exist');
+    });
+  });
+
+  describe('Variant Detection', () => {
+    it('should detect panel variant when no anchor elements are present', () => {
+      cy.get('@panelTabs').should('exist');
+      cy.get('@panelTabs').find('post-tab-panel').should('exist');
+      cy.get('@panelTabs').find('[part="content"]').should('exist');
+    });
+
+    it('should detect navigation variant when anchor elements are present', () => {
+      cy.get('@navTabs').should('exist');
+      cy.get('@navTabs').find('post-tab-panel').should('not.exist');
+      cy.get('@navTabs').find('nav').should('exist');
+    });
+  });
+
+  describe('Accessibility Violations', () => {
+    it('should not have any automatically detectable accessibility issues in panels variant', () => {
+      cy.get('@panelTabs').should('be.visible');
+      cy.get('@panelTabs').find('post-tab-item').first().should('be.visible');
+      cy.get('@panelTabs').find('[role="tablist"]').then($tablist => {
+        cy.checkA11y($tablist[0]);
+      });
+    });
+
+    it('should not have any automatically detectable accessibility issues in navigation variant', () => {
+      cy.get('@navTabs').should('be.visible');
+      cy.get('@navTabs').find('post-tab-item').first().should('be.visible');
+      cy.get('@navTabs').then($el => {
+        cy.checkA11y($el[0]);
+      });
+    });
+  });
+});

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

@@ -15,3 +15,4 @@
 
 // When a command from ./commands is ready to use, import with `import './commands'` syntax
 import './commands';
+import 'cypress-axe';

packages/components-angular/projects/consumer-app/src/app/app-routing.module.ts

@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './routes/home/home.component';
 import { CardControlComponent } from './routes/card-control/card-control.component';
+import { TabsComponent } from './routes/tabs/tabs.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { title: 'Home', path: 'home', component: HomeComponent },
   { title: 'Card-Control', path: 'card-control', component: CardControlComponent },
+  { title: 'Tabs', path: 'tabs', component: TabsComponent },
 ];
 
 @NgModule({

packages/components-angular/projects/consumer-app/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { providePostComponents } from '@swisspost/design-system-components-angul
 
 import { AppComponent } from './app.component';
 import { CardControlComponent } from './routes/card-control/card-control.component';
+import { TabsComponent } from './routes/tabs/tabs.component';
 
 @NgModule({
   imports: [
@@ -15,6 +16,7 @@ import { CardControlComponent } from './routes/card-control/card-control.compone
     AppRoutingModule,
     FormsModule,
     CardControlComponent,
+    TabsComponent,
   ],
   declarations: [AppComponent],
   providers: [providePostComponents()],

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html

@@ -82,17 +82,17 @@ <h2>Post Rating</h2>
 <div class="my-24">
   <h2>Post Tabs</h2>
   <post-tabs>
-    <post-tab-header panel="unua">Unua langeto</post-tab-header>
-    <post-tab-header panel="dua">Dua langeto</post-tab-header>
-    <post-tab-header panel="tria">Tria langeto</post-tab-header>
+    <post-tab-item name="unua">Unua langeto</post-tab-item>
+    <post-tab-item name="dua">Dua langeto</post-tab-item>
+    <post-tab-item name="tria">Tria langeto</post-tab-item>
 
-    <post-tab-panel name="unua">
+    <post-tab-panel for="unua">
       Jen la enhavo de la unua langeto. Defaŭlte ĝi montriĝas komence.
     </post-tab-panel>
-    <post-tab-panel name="dua">
+    <post-tab-panel for="dua">
       Jen la enhavo de la dua langeto. Defaŭlte ĝi estas kaŝita komence.
     </post-tab-panel>
-    <post-tab-panel name="tria">
+    <post-tab-panel for="tria">
       Jen la enhavo de la tria langeto. Defaŭlte ĝi ankaŭ estas kaŝita komence.
     </post-tab-panel>
   </post-tabs>

packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.ts

@@ -13,7 +13,7 @@ import {
   PostPopovercontainer,
   PostRating,
   PostTabs,
-  PostTabHeader,
+  PostTabItem,
   PostTabPanel,
   PostTooltipTrigger,
 } from 'components';
@@ -36,7 +36,7 @@ import {
     PostPopovercontainer,
     PostRating,
     PostTabs,
-    PostTabHeader,
+    PostTabItem,
     PostTabPanel,
     PostTooltipTrigger,
   ]

packages/components-angular/projects/consumer-app/src/app/routes/tabs/tabs.component.html

@@ -0,0 +1,28 @@
+<h2>Tabs - Panel Variant</h2>
+<post-tabs>
+  <post-tab-item name="first">First</post-tab-item>
+  <post-tab-item name="second">Second</post-tab-item>
+  <post-tab-item name="third">Third</post-tab-item>
+  <post-tab-panel for="first">
+    <p>Content of first tab</p>
+  </post-tab-panel>
+  <post-tab-panel for="second">
+    <p>Content of second tab</p>
+  </post-tab-panel>
+  <post-tab-panel for="third">
+    <p>Content of third tab</p>
+  </post-tab-panel>
+</post-tabs>
+
+<h2>Tabs - Navigation Variant</h2>
+<post-tabs>
+  <post-tab-item name="nav-first">
+    <a href="#first">First</a>
+  </post-tab-item>
+  <post-tab-item name="nav-second">
+    <a href="#second">Second</a>
+  </post-tab-item>
+  <post-tab-item name="nav-third">
+    <a href="#third">Third</a>
+  </post-tab-item>
+</post-tabs>

packages/components-angular/projects/consumer-app/src/app/routes/tabs/tabs.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { PostTabs, PostTabItem, PostTabPanel } from '@swisspost/design-system-components-angular';
+
+@Component({
+  selector: 'tabs-page',
+  templateUrl: './tabs.component.html',
+  imports: [CommonModule, ReactiveFormsModule, PostTabs, PostTabItem, PostTabPanel],
+  standalone: true,
+})
+export class TabsComponent {}