feat(components): create post popover trigger component (#6209)

## 📄 Description

This PR introduces a `<post-popover-trigger>` web component to replace
the former `data-popover-target=" "` implementation.
Aria attribute and focus management logic is now handeled within the
trigger component.
Documentation and tests are updated accordingly.

## 📝 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 udpated the existing tests
- ✔️ New and existing unit tests pass locally with my changes
- Manual Accessibility Test

---------

Co-authored-by: Machado da Silva Hugo <Hugo.macdasil@gmail.com>
Co-authored-by: Machado da Silva Hugo <hugomslv@users.noreply.github.com>
Co-authored-by: Hugo <170833805+hugomslv@users.noreply.github.com>
Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>

Author: 3 people

.changeset/forty-jokes-sin.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': major
+---
+
+Introduced `<post-popover-trigger>` web component to replace the previous `data-popover-target` implementation.

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

@@ -55,17 +55,20 @@ <h2>Post Logo</h2>
 
 <div class="my-24">
   <h2>Post Popover</h2>
-  <button class="btn btn-secondary btn-large" data-popover-target="popover-one">
-    Click here to see a popover
-  </button>
-  <post-popover closeButtonCaption="Close" id="popover-one" placement="top" arrow="">
-    <h2 class="h6">Optional title</h2>
-
-    <p class="mb-0">
-      A longer message that needs more time to read.
-      <a href="#">Links</a>
-      are also possible.
-    </p>
+  <post-popover-trigger for="popover-one">
+    <button type="button" class="btn btn-secondary">Popover Trigger</button>
+  </post-popover-trigger>
+  <post-popover
+    class="palette palette-accent"
+    id="popover-one"
+    placement="top"
+    close-button-caption="Close"
+    ><div id="popoverContent">
+      <h2 class="h6">Optional title</h2>
+      <p class="mb-0">
+        A longer message that needs more time to read. <a href="#">Links</a> are also possible.
+      </p>
+    </div>
   </post-popover>
 </div>
 

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

@@ -10,6 +10,7 @@ import {
   PostIcon,
   PostLogo,
   PostPopover,
+  PostPopoverTrigger,
   PostPopovercontainer,
   PostRating,
   PostTabs,
@@ -33,15 +34,15 @@ import {
     PostIcon,
     PostLogo,
     PostPopover,
+    PostPopoverTrigger,
     PostPopovercontainer,
     PostRating,
     PostTabs,
     PostTabHeader,
     PostTabPanel,
     PostTooltipTrigger,
-  ]
+  ],
 })
-
 export class HomeComponent {
   isCollapsed = false;
 }

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

@@ -3,12 +3,27 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
     beforeEach(() => {
       cy.visit('./cypress/fixtures/post-popover.test.html');
 
-      // Ensure the component is hydrated, which is necessary to ensure the component is ready for interaction
       cy.get('post-popover[data-hydrated]');
 
-      // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
-      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+      cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+        .children()
+        .first()
+        .as('trigger');
       cy.get('#testtext').as('popover');
+
+      // Alternative popover trigger with no interactive element
+      cy.get('post-popover-trigger[data-hydrated][for="popover-two"]')
+        .children()
+        .first()
+        .as('trigger2');
+    });
+
+    it('if the element inside the trigger is not interactive, it should at least have a set tabindex="0" and role="button"', () => {
+      cy.get('@trigger2').then($child => {
+        const child = $child[0];
+        cy.wrap(child).should('have.attr', 'tabindex', '0');
+        cy.wrap(child).should('have.attr', 'role', 'button');
+      });
     });
 
     it('should show up on click', () => {
@@ -17,6 +32,7 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('@trigger').click();
       cy.get('@popover').should('be.visible');
       cy.get('@trigger').should('have.attr', 'aria-expanded', 'true');
+
       // Void click light dismiss does not work in cypress for closing
     });
 
@@ -42,12 +58,12 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('@trigger').then($trigger => {
         const originalText = $trigger.text();
         $trigger.html(`
-          <div class="level-1">
-            <div class="level-2">
-              <span class="level-3">${originalText}</span>
-            </div>
-          </div>
-        `);
+              <div class="level-1">
+                <div class="level-2">
+                  <span class="level-3">${originalText}</span>
+                </div>
+              </div>
+            `);
       });
 
       cy.get('@popover').should('not.be.visible');
@@ -63,12 +79,16 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('@popover').should('not.be.visible');
     });
 
-    it('should open and close on enter', () => {
+    it('should open on enter and first focusable element should be focused', () => {
       cy.get('@popover').should('not.be.visible');
       cy.get('@trigger').focus().type('{enter}');
       cy.get('@popover').should('be.visible');
-      cy.get('@trigger').type('{enter}');
-      cy.get('@popover').should('not.be.visible');
+
+      // find the first focusable element (e.g., button, input, link, etc.)
+      cy.get('@popover')
+        .find('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+        .first()
+        .should('have.focus');
     });
 
     it('should open and close with the API', () => {
@@ -114,13 +134,6 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
   describe('Accessibility', () => {
     beforeEach(() => {
       cy.visit('./cypress/fixtures/post-popover.test.html');
-
-      // Ensure the component is hydrated, which is necessary to ensure the component is ready for interaction
-      cy.get('post-popover[data-hydrated]');
-
-      // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
-      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
-
       cy.injectAxe();
     });
 

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

@@ -3,9 +3,17 @@ describe('popovercontainer', { baseUrl: null, includeShadowDom: true }, () => {
     const selector = isPopoverSupported() ? ':popover-open' : '.\\:popover-open';
 
     beforeEach(() => {
-      // There is no dedicated docs page for the popovercontainer
       cy.visit('./cypress/fixtures/post-popover.test.html');
-      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+
+      // Ensure the component is hydrated, which is necessary to ensure the component is ready for interaction
+      cy.get('post-popover[data-hydrated]');
+
+      // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
+      cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+        .children()
+        .first()
+        .as('trigger');
+
       cy.get('#testtext').as('container');
     });
 

packages/components/cypress/fixtures/post-popover.test.html

@@ -11,9 +11,16 @@
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>
-    <button data-popover-target="popover-one">toggle</button>
+    <post-popover-trigger for="popover-one">
+      <button type="button" class="btn btn-secondary">Popover Trigger</button>
+    </post-popover-trigger>
     <post-popover id="popover-one" close-button-caption="Close Popover">
-      <p id="testtext">This is a test</p>
+      <p id="testtext">This is a <a href="">test</a></p>
     </post-popover>
+
+    <!-- Alternative trigger case with no interactive element inside the trigger -->
+    <post-popover-trigger for="popover-two">
+      <div>Popover Trigger</div>
+    </post-popover-trigger>
   </body>
 </html>

packages/components/src/components.d.ts

@@ -386,16 +386,22 @@ export namespace Components {
         "placement"?: Placement;
         /**
           * Programmatically display the popover
-          * @param target An element with [data-popover-target="id"] where the popover should be shown
+          * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
          */
         "show": (target: HTMLElement) => Promise<void>;
         /**
           * Toggle popover display
-          * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+          * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
     }
+    interface PostPopoverTrigger {
+        /**
+          * ID of the popover element that this trigger is linked to. Used to open and close the popover.
+         */
+        "for": string;
+    }
     interface PostPopovercontainer {
         /**
           * Animation style
@@ -440,12 +446,12 @@ export namespace Components {
         "safeSpace"?: 'triangle' | 'trapezoid';
         /**
           * Programmatically display the popovercontainer
-          * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+          * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
          */
         "show": (target: HTMLElement) => Promise<void>;
         /**
           * Toggle popovercontainer display
-          * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+          * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
@@ -826,6 +832,12 @@ declare global {
         prototype: HTMLPostPopoverElement;
         new (): HTMLPostPopoverElement;
     };
+    interface HTMLPostPopoverTriggerElement extends Components.PostPopoverTrigger, HTMLStencilElement {
+    }
+    var HTMLPostPopoverTriggerElement: {
+        prototype: HTMLPostPopoverTriggerElement;
+        new (): HTMLPostPopoverTriggerElement;
+    };
     interface HTMLPostPopovercontainerElementEventMap {
         "postBeforeShow": { first?: boolean };
         "postShow": { first?: boolean };
@@ -940,6 +952,7 @@ declare global {
         "post-menu-item": HTMLPostMenuItemElement;
         "post-menu-trigger": HTMLPostMenuTriggerElement;
         "post-popover": HTMLPostPopoverElement;
+        "post-popover-trigger": HTMLPostPopoverTriggerElement;
         "post-popovercontainer": HTMLPostPopovercontainerElement;
         "post-rating": HTMLPostRatingElement;
         "post-tab-header": HTMLPostTabHeaderElement;
@@ -1275,6 +1288,12 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface PostPopoverTrigger {
+        /**
+          * ID of the popover element that this trigger is linked to. Used to open and close the popover.
+         */
+        "for": string;
+    }
     interface PostPopovercontainer {
         /**
           * Animation style
@@ -1449,6 +1468,7 @@ declare namespace LocalJSX {
         "post-menu-item": PostMenuItem;
         "post-menu-trigger": PostMenuTrigger;
         "post-popover": PostPopover;
+        "post-popover-trigger": PostPopoverTrigger;
         "post-popovercontainer": PostPopovercontainer;
         "post-rating": PostRating;
         "post-tab-header": PostTabHeader;
@@ -1496,6 +1516,7 @@ declare module "@stencil/core" {
             "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes<HTMLPostMenuItemElement>;
             "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes<HTMLPostMenuTriggerElement>;
             "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
+            "post-popover-trigger": LocalJSX.PostPopoverTrigger & JSXBase.HTMLAttributes<HTMLPostPopoverTriggerElement>;
             "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
             "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes<HTMLPostRatingElement>;
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;

packages/components/src/components/post-popover-trigger/post-popover-trigger.scss

@@ -0,0 +1,3 @@
+:host {
+  cursor: pointer;
+}