@sapudex/web-components 2.57.0 → 2.58.0

package/cypress/specs/TabNavigation.cy.tsx

@@ -1,5 +1,6 @@
 import UDExTabNavigation, { UDExTabNavigationOrientation, UDExTabNavigationPlacement, UDExTabNavigationVerticalAlignment } from "../../src/TabNavigation.js";
 import UDExTab from "../../src/Tab.js";
+import UDExLink from "../../src/Link.js";
 
 // ─── Process Tab fixtures ─────────────────────────────────────────────────────
 
@@ -223,12 +224,12 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find(".udex-tab-navigation__root")
           .should("be.visible");
-        
+
         // All tabs should be visible without overflow
         cy.get("[udex-tab-navigation]")
           .find("udex-tab")
           .should("have.length", 5);
-        
+
         cy.get("[udex-tab-navigation]")
           .shadow()
           .find("button[role='tab']")
@@ -250,7 +251,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "General Settings");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("h3")
@@ -270,7 +271,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "Notifications");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("h3")
@@ -279,7 +280,7 @@ describe("Tab Navigation component", () => {
 
       it("emits tab-select event on tab change", () => {
         const tabSelectHandler = cy.stub().as("tabSelect");
-        
+
         cy.mount(
           <UDExTabNavigation orientation="Vertical" onTabSelect={tabSelectHandler}>
             <UDExTab text="Tab 1" selected>
@@ -468,11 +469,11 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find(".udex-tab-navigation__root")
           .should("be.visible");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab")
           .should("have.length", 3);
-        
+
         cy.get("[udex-tab-navigation]")
           .shadow()
           .find("button[role='tab']")
@@ -484,7 +485,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "Tab 1");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("p")
@@ -504,7 +505,7 @@ describe("Tab Navigation component", () => {
           .shadow()
           .find("button[role='tab'][aria-selected='true']")
           .should("contain.text", "Tab 3");
-        
+
         cy.get("[udex-tab-navigation]")
           .find("udex-tab[selected]")
           .find("p")
@@ -826,15 +827,15 @@ describe("Tab Navigation component", () => {
       it("displays body text content correctly for each vertical tab", () => {
         cy.mount(
           <UDExTabNavigation orientation="Vertical">
-            <UDExTab 
-              text="Settings" 
-              bodyText="Configure your preferences" 
+            <UDExTab
+              text="Settings"
+              bodyText="Configure your preferences"
               selected
             >
               <div>Settings content</div>
             </UDExTab>
-            <UDExTab 
-              text="Account" 
+            <UDExTab
+              text="Account"
               bodyText="Manage your account"
             >
               <div>Account content</div>
@@ -1046,7 +1047,7 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
           <UDExTab text="Account" body-text="Privacy settings" selected>
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
@@ -1065,8 +1066,8 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
           <UDExTab text="Account" selected>
-            <udex-link slot="link" href="https://sap.com/privacy" design="Default">Privacy Policy</udex-link>
-            <udex-link slot="link" href="https://sap.com/terms" design="Default">Terms of Service</udex-link>
+            <UDExLink slot="link" href="https://sap.com/privacy" design="Default">Privacy Policy</UDExLink>
+            <UDExLink slot="link" href="https://sap.com/terms" design="Default">Terms of Service</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
@@ -1085,11 +1086,11 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
           <UDExTab text="Account" selected>
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
-            <udex-link slot="link" href="https://sap.com/" design="Default">Terms of Service</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Terms of Service</UDExLink>
             <div>Settings content</div>
           </UDExTab>
         </UDExTabNavigation>
@@ -1117,7 +1118,7 @@ describe("Tab Navigation component", () => {
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Settings content</div>
           </UDExTab>
         </UDExTabNavigation>
@@ -1139,7 +1140,7 @@ describe("Tab Navigation component", () => {
       cy.mount(
         <UDExTabNavigation orientation={UDExTabNavigationOrientation.Horizontal}>
           <UDExTab text="Account" selected>
-            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <UDExLink slot="link" href="https://sap.com/" design="Default">Privacy Policy</UDExLink>
             <div>Account content</div>
           </UDExTab>
           <UDExTab text="Settings">
@@ -1983,6 +1984,198 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  // DOM-measurement-based overflow does not work in Cypress component tests
+  // (see the skipped overflow suites above), so we move tabs into the overflow
+  // popover programmatically. The popover only renders once _overflowItems has
+  // length, so we populate it first, wait for the popover to mount, then open it.
+  const openOverflowPopover = (overflowStartIndex: number) => {
+    // 1. Set _overflowItems and stub updateOverflowItems so onBeforeRendering
+    //    cannot reset it back to [] (which it would, because no tabs are hidden
+    //    in the Cypress layout environment).
+    cy.get("[udex-tab-navigation]").then($el => {
+      const nav = $el[0] as any;
+      // Stub first so onBeforeRendering cannot reset _overflowItems.
+      nav.updateOverflowItems = () => {};
+      // Setting the property triggers the internal re-render via the UI5 setter.
+      nav._overflowItems = Array.from(nav.items).slice(overflowStartIndex);
+    });
+
+    // 2. Once the popover is in the DOM, open it using the More button as opener.
+    cy.get("[udex-tab-navigation]").shadow().find("[ui5-popover]").should("exist");
+    cy.get("[udex-tab-navigation]").then($el => {
+      const nav = $el[0] as any;
+      nav._popover = nav.getResponsePopover();
+      nav._popover.opener = nav.getMoreButton();
+      nav._popover.open = true;
+      nav._isExpanded = true;
+      // updateOverflowItems is stubbed, so it never removes the hidden attribute.
+      // Unhide the More button so it can receive focus (e.g. on Escape).
+      nav.getMoreButton()?.removeAttribute("hidden");
+    });
+
+    // 3. Wait for the overflow tab buttons to be in the DOM.
+    cy.get("[udex-tab-navigation]")
+      .shadow()
+      .find(".udex-tab-overflow__button")
+      .should("exist");
+  };
+
+  describe("Overflow dropdown — disabled tab navigation", () => {
+
+    it("disabled item has aria-disabled and is not interactive", () => {
+      const tabSelectStub = cy.stub().as("tabSelect");
+
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        $el[0].addEventListener("tab-select", tabSelectStub);
+      });
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3
+
+      // The disabled overflow item reflects aria-disabled="true".
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-overflow__button[aria-disabled='true']")
+        .should("contain.text", "Tab 2");
+
+      // Clicking the disabled item must not select it nor fire tab-select.
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-overflow__button[aria-disabled='true']")
+        .click({ force: true });
+
+      cy.get("@tabSelect").should("not.have.been.called");
+
+      // Tab 1 remains the selected (active) header tab.
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active")
+        .should("contain.text", "Tab 1");
+    });
+
+    it("arrow navigation skips disabled items", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4" disabled><div>Content 4</div></UDExTab>
+          <UDExTab text="Tab 5"><div>Content 5</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3, Tab 4 (disabled), Tab 5
+
+      // ArrowDown from Tab 3 (index 1) skips disabled Tab 4 and lands on Tab 5.
+      // onNextItemInPopover sets tabindex="0" on the destination item.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        items.forEach((item, i) => item.setAttribute("tabindex", i === 1 ? "0" : "-1"));
+        nav.onNextItemInPopover(items[1]);
+      });
+      cy.get("[udex-tab-navigation]").shadow()
+        .find(".udex-tab-overflow__button").contains("Tab 5")
+        .should("have.attr", "tabindex", "0");
+
+      // ArrowUp from Tab 3 (index 1) skips disabled Tab 2 and wraps back to Tab 5.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        items.forEach((item, i) => item.setAttribute("tabindex", i === 1 ? "0" : "-1"));
+        nav.onPreviousItemInPopover(items[1]);
+      });
+      cy.get("[udex-tab-navigation]").shadow()
+        .find(".udex-tab-overflow__button").contains("Tab 5")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("focus moves to first non-disabled item on open when first item is disabled", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3, Tab 4
+
+      // onFocusFirstItemPopover sets tabindex="0" on the first non-disabled item.
+      cy.get("[udex-tab-navigation]").then($el => {
+        ($el[0] as any).onFocusFirstItemPopover();
+      });
+      cy.get("[udex-tab-navigation]").shadow()
+        .find(".udex-tab-overflow__button").contains("Tab 3")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("Home key moves focus to first non-disabled item", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1); // overflow: Tab 2 (disabled), Tab 3, Tab 4
+
+      // Spy on .focus() calls to assert which item handleHome targets.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        let focusedItem: HTMLElement | undefined;
+        items.forEach(item => {
+          const orig = item.focus.bind(item);
+          item.focus = () => { focusedItem = item; orig(); };
+        });
+        const e = new KeyboardEvent("keydown", { key: "Home", keyCode: 36, bubbles: true, cancelable: true });
+        nav.handleHome(e);
+        // Tab 3 (index 1) is the first non-disabled item; Tab 2 (index 0) must be skipped.
+        expect(focusedItem).to.equal(items[1]);
+      });
+    });
+
+    it("End key moves focus to last non-disabled item", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          <UDExTab text="Tab 5" disabled><div>Content 5</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(2); // overflow: Tab 3, Tab 4, Tab 5 (disabled)
+
+      // Spy on .focus() calls to assert which item handleEnd targets.
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        let focusedItem: HTMLElement | undefined;
+        items.forEach(item => {
+          const orig = item.focus.bind(item);
+          item.focus = () => { focusedItem = item; orig(); };
+        });
+        const e = new KeyboardEvent("keydown", { key: "End", keyCode: 35, bubbles: true, cancelable: true });
+        nav.handleEnd(e);
+        // Tab 4 (index 1) is the last non-disabled item; Tab 5 (index 2) must be skipped.
+        expect(focusedItem).to.equal(items[1]);
+      });
+    });
+  });
+
   // ── Process Tab variant ──────────────────────────────────────────────────────
 
   describe("TabNavigation - Process Tab variant", () => {
@@ -2376,4 +2569,87 @@ describe("Tab Navigation component", () => {
       });
     });
   });
+
+  describe("Overflow dropdown — focus management", () => {
+    it("pressing Escape closes the popover and moves focus to the More button", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const e = new KeyboardEvent("keydown", { key: "Escape", keyCode: 27, bubbles: true, cancelable: true });
+        nav.handleEscape(e);
+      });
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("[ui5-popover]")
+        .should("not.have.attr", "open");
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-more")
+        .shadow()
+        .find("button")
+        .should("be.focused");
+    });
+
+    it("clicking an overflow item moves focus to the selected tab in the header", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-overflow__button")
+        .contains("Tab 2")
+        .click({ force: true });
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab[aria-selected='true']")
+        .should("contain.text", "Tab 2")
+        .and("be.focused");
+    });
+
+    it("pressing Enter on an overflow item moves focus to the selected tab in the header", () => {
+      cy.mount(
+        <UDExTabNavigation>
+          <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+          <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      openOverflowPopover(1);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        const items: HTMLElement[] = nav.getItemsFromPopover();
+        const tab2Item = items.find((item) => item.textContent?.trim().startsWith("Tab 2"))!;
+        const e = new KeyboardEvent("keydown", { key: "Enter", keyCode: 13, bubbles: true, cancelable: true });
+        Object.defineProperty(e, "target", { value: tab2Item, configurable: true });
+        nav.handleEnterOrSpace(e);
+      });
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab[aria-selected='true']")
+        .should("contain.text", "Tab 2")
+        .and("be.focused");
+    });
+  });
 });

package/dist/List.d.ts

@@ -113,6 +113,15 @@ declare class UDExList extends UI5Element {
     handleKeyDown(e: KeyboardEvent): void;
     handleArrowRight(e: KeyboardEvent): void;
     handleArrowLeft(e: KeyboardEvent): void;
+    /**
+     * Arrow-key expand/collapse toggles `collapsed` directly here (multi-select
+     * headers deliver Left/Right to the List, not to the header's own key handler),
+     * so the `accordion-icon-click` event that drives the collapse/expand live-region
+     * announcement is never fired on this path. Re-emit it from the header so
+     * SearchableListBase announces the new state to screen readers, matching the
+     * chevron/pointer and single-select paths.
+     */
+    fireAccordionToggle(target: UDExListItemBase): void;
     handleUpArrow(e: KeyboardEvent): void;
     handleDownArrow(e: KeyboardEvent): void;
     handleHomeKey(e: KeyboardEvent): void;
@@ -158,7 +167,12 @@ declare class UDExList extends UI5Element {
      * SingleContent is informational so "list"/"listitem" is the correct semantic.
      */
     get singleContentRole(): string;
-    /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
+    /**
+     * aria-multiselectable is exposed for every MultiSelect list — the flat listbox
+     * and the collapsible tree alike. It is required so the screen reader announces
+     * each option's selected / not-selected state (from aria-selected) instead of
+     * treating the container as single-select and announcing only the active option.
+     */
     get _listAriaMultiSelectable(): string | undefined;
 }
 export default UDExList;

package/dist/List.js

@@ -118,6 +118,7 @@ let UDExList = UDExList_1 = class UDExList extends UI5Element {
         if (target.isGroup && target.hasAttribute("collapsible") && target.collapsed) {
             target.collapsed = false;
             this.setCollapsedItems(false, target);
+            this.fireAccordionToggle(target);
         }
     }
     handleArrowLeft(e) {
@@ -125,8 +126,23 @@ let UDExList = UDExList_1 = class UDExList extends UI5Element {
         if (target.isGroup && target.hasAttribute("collapsible") && !target.collapsed) {
             target.collapsed = true;
             this.setCollapsedItems(true, target);
+            this.fireAccordionToggle(target);
         }
     }
+    /**
+     * Arrow-key expand/collapse toggles `collapsed` directly here (multi-select
+     * headers deliver Left/Right to the List, not to the header's own key handler),
+     * so the `accordion-icon-click` event that drives the collapse/expand live-region
+     * announcement is never fired on this path. Re-emit it from the header so
+     * SearchableListBase announces the new state to screen readers, matching the
+     * chevron/pointer and single-select paths.
+     */
+    fireAccordionToggle(target) {
+        target.dispatchEvent(new CustomEvent("accordion-icon-click", {
+            bubbles: true,
+            detail: { collapsed: target.collapsed },
+        }));
+    }
     handleUpArrow(e) {
         e.preventDefault();
         const items = this.getKeyboardNavigationItems();
@@ -454,9 +470,14 @@ let UDExList = UDExList_1 = class UDExList extends UI5Element {
     get singleContentRole() {
         return this.accessibleRole !== "listbox" ? this.accessibleRole : "list";
     }
-    /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
+    /**
+     * aria-multiselectable is exposed for every MultiSelect list — the flat listbox
+     * and the collapsible tree alike. It is required so the screen reader announces
+     * each option's selected / not-selected state (from aria-selected) instead of
+     * treating the container as single-select and announcing only the active option.
+     */
     get _listAriaMultiSelectable() {
-        return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;
+        return this.modeMultiSelect ? "true" : undefined;
     }
 };
 __decorate([