chore(components): update <post-menu> and <post-popovecontainer> to enforce separation of concerns

.changeset/vast-onions-return.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated `<post-popovercontainer>` to emit events: postBeforeShow, postAfterShow, postHide, postBeforeToggle, and postAfterToggle. Updated `<post-menu>` and `<post-tooltip-trigger>` to consume the `onPostAfterToggle` event emitted by `<post-popovercontainer>`.

.changeset/whole-crews-dream.md

@@ -0,0 +1,9 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Updated `<post-menu>` and `<post-menu-item>` to prevent accessibility roles from being announced before the menu content is visible, and to ensure correct focus behavior on menu items during keyboard navigation when NVDA is running.
+
+Removed the obsolete `role="menuitem"` from `<post-language-switch>. `<post-language-option>` now assigns `role="listitem"` in case of `variant="list"`, to ensure a correct reference relationship.
+
+Updated the `<post-breadcrumbs>` component by removing an `aria-label` set on the trigger wrapper `<div>`, which was causing an accessibility error. Also added `role="none"` to the wrapper div to reflect its presentational purpose.

packages/components/cypress/e2e/language-switch.cy.ts

@@ -0,0 +1,179 @@
+const LANGUAGE_SWITCH_ID = 'decbb10c-2b39-4f47-b67d-337d8111a3ae';
+const LANGUAGE_OPTION_ID = '3753ab83-a659-47b5-a2f2-ac452ec97916';
+
+describe('post-language-switch', () => {
+  describe('list variant', () => {
+    beforeEach(() => {
+      cy.getComponent('language-switch', LANGUAGE_SWITCH_ID);
+    });
+
+    it('should render', () => {
+      cy.get('@language-switch').should('exist');
+    });
+
+    it('should have three language option items', () => {
+      cy.get('@language-switch').find('post-language-option').as('language-options');
+      cy.get('@language-options').should('have.length', 3);
+    });
+
+    it('should render as a list', () => {
+      cy.get('@language-switch').find('.post-language-switch-list').should('exist');
+    });
+
+    it('should not render dropdown elements', () => {
+      cy.get('@language-switch').find('post-menu-trigger').should('not.exist');
+      cy.get('@language-switch').find('post-menu').should('not.exist');
+    });
+
+    it('should have the correct ARIA attributes', () => {
+      cy.get('@language-switch')
+        .find('[role="list"]')
+        .should('have.attr', 'aria-label', 'Change the language')
+        .and('have.attr', 'aria-describedby');
+
+      cy.get('@language-switch')
+        .find('[aria-describedby]')
+        .should('contain.text', 'The currently selected language is English.');
+    });
+
+    it('should correctly set the active language option on click', () => {
+      cy.get('@language-switch')
+        .find('post-language-option[code="en"]')
+        .should('have.attr', 'active');
+      cy.get('@language-switch')
+        .find('post-language-option[code="fr"]')
+        .should('have.attr', 'active', 'false');
+      cy.get('@language-switch')
+        .find('post-language-option[code="de"]')
+        .should('have.attr', 'active', 'false');
+
+      cy.get('@language-switch').find('post-language-option[code="de"]').click();
+
+      cy.get('@language-switch')
+        .find('post-language-option[code="de"]')
+        .should('have.attr', 'active');
+      cy.get('@language-switch')
+        .find('post-language-option[code="en"]')
+        .should('not.have.attr', 'active', 'false');
+      cy.get('@language-switch')
+        .find('post-language-option[code="fr"]')
+        .should('not.have.attr', 'active', 'false');
+    });
+  });
+
+  describe('menu variant', () => {
+    beforeEach(() => {
+      cy.getComponent('language-switch', LANGUAGE_SWITCH_ID);
+      cy.get('@language-switch').invoke('prop', 'variant', 'menu');
+      cy.get('@language-switch').find('post-menu-trigger').as('trigger');
+    });
+
+    it('should render as a dropdown menu', () => {
+      cy.get('@language-switch').find('post-menu-trigger').should('exist');
+      cy.get('@language-switch').find('post-menu').should('exist');
+    });
+
+    it('should not render list elements', () => {
+      cy.get('@language-switch').find('[role="list"]').should('not.exist');
+    });
+
+    it('should display the active language in the trigger button', () => {
+      cy.get('@trigger').should('contain.text', 'en');
+    });
+
+    it('should show the menu on trigger click', () => {
+      cy.get('@trigger').find('button').click();
+      cy.get('@language-switch').find('post-language-option button').should('be.visible');
+    });
+
+    it('should correctly switch language and hide menu on option click', () => {
+      cy.get('@trigger').find('button').click();
+      cy.get('@language-switch').find('post-language-option[code="de"]').click();
+
+      cy.get('@trigger').should('contain.text', 'de');
+      cy.get('@language-switch').find('post-language-option').should('not.be.visible');
+    });
+
+    it('should have correct ARIA roles', () => {
+      cy.get('@trigger').find('button').click();
+      cy.get('@language-switch').find('post-menu').should('have.attr', 'role', 'menu');
+      cy.get('@language-switch')
+        .find('post-language-option')
+        .find('button[role="menuitem"]')
+        .should('have.length', 2);
+    });
+  });
+
+  describe('language-option', () => {
+    describe('button', () => {
+      beforeEach(() => {
+        cy.getComponent('language-option', LANGUAGE_OPTION_ID);
+        cy.get('@language-option').find('button').as('button');
+      });
+
+      it('should render', () => {
+        cy.get('@language-option').should('exist');
+      });
+
+      it('should not render an anchor', () => {
+        cy.get('@language-option').find('a').should('not.exist');
+      });
+
+      it('should render a button with correct properties', () => {
+        cy.get('@button')
+          .should('exist')
+          .and('have.attr', 'aria-current', 'true')
+          .and('have.attr', 'lang', 'en');
+      });
+
+      it('should emit postChange event when clicked', () => {
+        cy.get('@language-option').then($languageOption => {
+          $languageOption.on('postChange', cy.spy().as('postChangeSpy'));
+        });
+        cy.get('@button').click({ force: true });
+        cy.get('@postChangeSpy').should('have.been.called');
+      });
+    });
+
+    describe('anchor', () => {
+      beforeEach(() => {
+        cy.getComponent('language-option', LANGUAGE_OPTION_ID, 'anchor');
+        cy.get('@language-option').find('a').as('anchor');
+      });
+
+      it('should render', () => {
+        cy.get('@language-option').should('exist');
+      });
+
+      it('should not render a button', () => {
+        cy.get('@language-option').find('button').should('not.exist');
+      });
+
+      it('should render an anchor', () => {
+        cy.get('@anchor')
+          .should('exist')
+          .and('have.attr', 'aria-current', 'page')
+          .and('have.attr', 'href', 'https://www.post.ch/en')
+          .and('have.attr', 'hrefLang', 'en')
+          .and('have.attr', 'lang', 'en');
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.getComponent('language-switch', LANGUAGE_SWITCH_ID);
+      cy.get('@language-switch').invoke('prop', 'variant', 'menu');
+      cy.get('@language-switch').find('post-menu-trigger').as('trigger');
+      cy.get('@language-switch').find('post-language-option').as('language-options');
+    });
+
+    it('Has no detectable a11y violations for all variants', () => {
+      cy.get('post-language-switch').as('languageSwitch');
+      cy.get('@languageSwitch').invoke('prop', 'variant', 'menu');
+      cy.checkA11y('#root-inner');
+      cy.get('@languageSwitch').invoke('prop', 'variant', 'list');
+      cy.checkA11y('#root-inner');
+    });
+  });
+});

packages/components/src/animations/pop-in.ts

@@ -0,0 +1,18 @@
+const duration = 250;
+const easing = 'ease-out';
+
+export function popIn(el: Element) {
+  if (!el) return;
+
+  return el.animate(
+    [
+      { transform: 'scale(0.9)', opacity: 0 },
+      { transform: 'scale(1)', opacity: 1 },
+    ],
+    {
+      duration,
+      easing,
+      fill: 'forwards',
+    },
+  );
+}

packages/components/src/components.d.ts

@@ -324,6 +324,10 @@ export namespace Components {
           * Hides the popover menu and restores focus to the previously focused element.
          */
         "hide": () => Promise<void>;
+        /**
+          * Required label providing an accessible name for the menu.
+         */
+        "label"?: string;
         /**
           * Defines the position of the menu relative to its trigger. Menus are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
           * @default 'bottom'
@@ -802,7 +806,11 @@ declare global {
         new (): HTMLPostPopoverElement;
     };
     interface HTMLPostPopovercontainerElementEventMap {
-        "postToggle": boolean;
+        "postBeforeShow": { first?: boolean };
+        "postAfterShow": { first?: boolean };
+        "postHide": { first?: boolean };
+        "postBeforeToggle": { willOpen: boolean; first?: boolean };
+        "postAfterToggle": { isOpen: boolean; first?: boolean };
     }
     interface HTMLPostPopovercontainerElement extends Components.PostPopovercontainer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostPopovercontainerElementEventMap>(type: K, listener: (this: HTMLPostPopovercontainerElement, ev: PostPopovercontainerCustomEvent<HTMLPostPopovercontainerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1196,6 +1204,10 @@ declare namespace LocalJSX {
         "for": string;
     }
     interface PostMenu {
+        /**
+          * Required label providing an accessible name for the menu.
+         */
+        "label"?: string;
         /**
           * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
          */
@@ -1252,9 +1264,25 @@ declare namespace LocalJSX {
          */
         "manualClose"?: boolean;
         /**
-          * Fires whenever the popovercontainer gets shown or hidden, passing the new state in event.details as a boolean
+          * Fires whenever the popovercontainer is shown, passing in event.detail a `first` boolean, which is true if it is shown for the first time.
+         */
+        "onPostAfterShow"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
+        /**
+          * Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing two booleans: `isOpen`, which is true if the popovercontainer was opened and false if it was closed, and `first`, which is true if it was opened for the first time.
+         */
+        "onPostAfterToggle"?: (event: PostPopovercontainerCustomEvent<{ isOpen: boolean; first?: boolean }>) => void;
+        /**
+          * Fires whenever the popovercontainer is about to be shown, passing in event.detail a `first` boolean, which is true if it is to be shown for the first time.
+         */
+        "onPostBeforeShow"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
+        /**
+          * Fires whenever the popovercontainer is about to be shown or hidden, passing in event.detail an object containing two booleans: `willOpen`, which is true if the popovercontainer is about to be opened and false if it is about to be closed, and `first`, which is true if it is to be opened for the first time.
+         */
+        "onPostBeforeToggle"?: (event: PostPopovercontainerCustomEvent<{ willOpen: boolean; first?: boolean }>) => void;
+        /**
+          * Fires whenever the popovercontainer is hidden, passing in event.detail a `first` boolean, which is true if it is hidden for the first time.
          */
-        "onPostToggle"?: (event: PostPopovercontainerCustomEvent<boolean>) => void;
+        "onPostHide"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
         /**
           * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
           * @default 'top'

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

@@ -140,8 +140,8 @@ export class PostBreadcrumbs {
             {/* Conditionally render concatenated menu or individual breadcrumb items */}
             {this.isConcatenated ? (
               <div
+                role="none"
                 class="menu-trigger-wrapper"
-                aria-label="More breadcrumbs"
                 onKeyDown={e => {
                   if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();

packages/components/src/components/post-language-option/post-language-option.tsx

@@ -119,18 +119,16 @@ export class PostLanguageOption {
 
   render() {
     const lang = this.code.toLowerCase();
-    const role = this.variant === 'menu' ? 'menuitem' : undefined;
     const emitOnKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter' || e.key === ' ') {
         this.emitChange();
       }
     };
 
     return (
-      <Host data-version={version}>
+      <Host data-version={version} role={this.variant === 'list' ? 'listitem' : undefined}>
         {this.url ? (
           <a
-            role={role}
             aria-current={this.active ? 'page' : undefined}
             href={this.url}
             hrefLang={lang}
@@ -143,7 +141,6 @@ export class PostLanguageOption {
           </a>
         ) : (
           <button
-            role={role}
             aria-current={this.active ? 'true' : undefined}
             lang={lang}
             onClick={() => this.emitChange()}