@sapudex/web-components 2.48.0 → 2.50.0

package/cypress/specs/SelectBox.cy.tsx

@@ -704,18 +704,21 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
+        .shadow().find("[part=item]")
         .should("be.focused");
 
       cy.realPress("ArrowDown");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
+        .shadow().find("[part=item]")
         .should("be.focused");
 
       cy.realPress("ArrowUp");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
+        .shadow().find("[part=item]")
         .should("be.focused");
     });
 
@@ -727,34 +730,88 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-group-header").shadow()
-        .find(".udex-list__group-header-wrap")
+        .find(".udex-list__group-header-wrap").shadow()
+        .find("[part=item]")
         .should("be.focused");
 
       cy.realPress("ArrowDown");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
+        .shadow().find("[part=item]")
         .should("be.focused");
 
       cy.realPress("ArrowDown");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
+        .shadow().find("[part=item]")
         .should("be.focused");
 
       cy.realPress("ArrowUp");
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
+        .shadow().find("[part=item]")
         .should("be.focused");
 
       cy.realPress("ArrowUp");
 
       cy.get("#select-box").shadow()
         .find("udex-list-group-header").shadow()
-        .find(".udex-list__group-header-wrap")
+        .find(".udex-list__group-header-wrap").shadow()
+        .find("[part=item]")
         .should("be.focused");
     });
+
+    it("MultiSelect mode - Left arrow collapses a collapsible group header, Right arrow expands it", () => {
+      cy.mount(groupHeaderCollapsible);
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+      cy.realPress("ArrowDown");
+
+      // Focus the collapsible group header wrapper.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find(".udex-list__group-header-wrap").shadow()
+        .find("[part=item]")
+        .should("be.focused");
+
+      // Fixture starts expanded: neither the header host nor its children are collapsed.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .should("not.have.attr", "collapsed");
+      cy.get("#select-box").shadow()
+        .find("udex-list-item")
+        .should("have.length", 2)
+        .each($item => {
+          cy.wrap($item).should("not.have.attr", "collapsed");
+        });
+
+      // Left arrow collapses the group.
+      cy.realPress("ArrowLeft");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .should("have.attr", "collapsed");
+      cy.get("#select-box").shadow()
+        .find("udex-list-item")
+        .each($item => {
+          cy.wrap($item).should("have.attr", "collapsed");
+        });
+
+      // Right arrow expands the group again.
+      cy.realPress("ArrowRight");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .should("not.have.attr", "collapsed");
+      cy.get("#select-box").shadow()
+        .find("udex-list-item")
+        .each($item => {
+          cy.wrap($item).should("not.have.attr", "collapsed");
+        });
+    });
   });
 
   describe("Select Box focus tests", () => {
@@ -1488,6 +1545,7 @@ describe("SelectBox", () => {
       cy.get("#select-box").shadow()
         .find("udex-list-item")
         .last()
+        .shadow().find("[part=item]")
         .should("be.focused");
     });
 
@@ -1508,7 +1566,8 @@ describe("SelectBox", () => {
 
       // A list item should now be focused (not the search input).
       cy.get("#select-box").shadow()
-        .find("udex-list-item").eq(0)
+        .find("udex-list-item").eq(0).shadow()
+        .find("[part=item]")
         .should("be.focused");
 
       // Tab should be intercepted and focus redirected into the footer.
@@ -1883,6 +1942,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(0)
+        .shadow().find("[part=item]")
         .should("be.focused");
     });
 
@@ -1895,6 +1955,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
+        .shadow().find("[part=item]")
         .should("be.focused");
     });
 
@@ -1907,6 +1968,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").last()
+        .shadow().find("[part=item]")
         .should("be.focused");
     });
 
@@ -1920,6 +1982,7 @@ describe("SelectBox", () => {
 
       cy.get("#select-box").shadow()
         .find("udex-list-item").eq(1)
+        .shadow().find("[part=item]")
         .should("be.focused");
     });
 
@@ -2304,4 +2367,72 @@ describe("SelectBox", () => {
         .should("be.greaterThan", 0);
     });
   });
+
+  // Added: regression coverage for the WCAG 4.1.2 Treeview Checkbox pattern
+  // in SearchableListBase. SelectBox sets defaultAccessibleRole = "listbox",
+  // so it must NOT switch to the tree pattern even in MultiSelect + groups.
+  describe("Tree accessibility pattern regression", () => {
+    const selectBoxMultiSelectGroup = <div style="width: 350px; position:relative;">
+      <UDExSelectBox
+        id="select-box-tree-regression"
+        mode={UDExListMode.MultiSelect}
+        label="Programming languages">
+        <UDExSelectBoxGroupHeader label="Programming Languages">
+          <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+      </UDExSelectBox>
+    </div>;
+
+    beforeEach(() => {
+      cy.mount(selectBoxMultiSelectGroup);
+      cy.get("#select-box-tree-regression").shadow()
+        .find(".udex-text-field__trigger").click();
+    });
+
+    it("host [udex-list] has NO aria-multiselectable attribute", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("[udex-list]").should("not.have.attr", "aria-multiselectable");
+    });
+
+    // Updated: `accessibleRoleForList` no longer collapses to `"group"` for grouped
+    // non-tree mode — it now returns `defaultAccessibleRole` (`"listbox"` for SelectBox)
+    // in every non-tree case. This aligns with the test's original intent (title says
+    // "keeps role=\"listbox\""); the prior `role="group"` assertion was already stale.
+    it("inner list div keeps role=\"listbox\" (not \"tree\")", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("[udex-list]").shadow()
+        .find("#udex-list").should("have.attr", "role", "listbox");
+    });
+
+    // Updated: `accessibleRole` string property on udex-list-group-header was replaced
+    // by a `_treeMode` boolean (reflected as the `_tree-mode` attribute). SelectBox is
+    // not tree-capable so the boolean must stay false and the attribute must be absent.
+    it("group header host has NO _tree-mode attribute", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("udex-list-group-header")
+        .should("not.have.attr", "_tree-mode");
+    });
+
+    it("child items have role=\"option\", not \"treeitem\"", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(0).shadow()
+        .find("[part=item]").should("have.attr", "role", "option");
+    });
+
+    it("child items have NO aria-checked (roleItem !== treeitem)", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(0).shadow()
+        .find("[part=item]").should("not.have.attr", "aria-checked");
+    });
+
+    it("child items' checkbox is NOT aria-hidden (JAWS double-announce guard only applies to tree)", () => {
+      cy.get("#select-box-tree-regression").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(0).shadow()
+        .find("udex-checkbox").should("not.have.attr", "aria-hidden");
+    });
+  });
 });

package/cypress/specs/TabNavigation.cy.tsx

@@ -1927,6 +1927,62 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  describe("Overflow menu — tab-select event", () => {
+    const mountOverflowNav = (onTabSelect: (...args: any[]) => void) => {
+      cy.mount(
+        <UDExTabNavigation id="overflow-tab-nav" onTabSelect={onTabSelect}>
+          <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>
+      );
+    };
+
+    it("fires tab-select when onItemSelect is called (overflow click path)", () => {
+      const tabSelectHandler = cy.stub().as("tabSelect");
+      mountOverflowNav(tabSelectHandler);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        nav.onItemSelect(nav.items[1].__id);
+      });
+
+      cy.get("@tabSelect").should("have.been.called");
+    });
+
+    it("tab-select detail contains tab and tabIndex when triggered via onItemSelect", () => {
+      const tabSelectHandler = cy.stub().as("tabSelect");
+      mountOverflowNav(tabSelectHandler);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        nav.onItemSelect(nav.items[1].__id);
+      });
+
+      cy.get("@tabSelect").should("have.been.calledOnce").then(() => {
+        const event: CustomEvent = tabSelectHandler.firstCall.args[0];
+        expect(event.detail).to.have.property("tab");
+        expect(event.detail).to.have.property("tabIndex");
+        expect(event.detail.tabIndex).to.equal(1);
+      });
+    });
+
+    it("tab-select fires with correct tabIndex for each tab via onItemSelect", () => {
+      const tabSelectHandler = cy.stub().as("tabSelect");
+      mountOverflowNav(tabSelectHandler);
+
+      cy.get("[udex-tab-navigation]").then($el => {
+        const nav = $el[0] as any;
+        nav.onItemSelect(nav.items[2].__id);
+      });
+
+      cy.get("@tabSelect").should("have.been.calledOnce").then(() => {
+        const event: CustomEvent = tabSelectHandler.firstCall.args[0];
+        expect(event.detail.tabIndex).to.equal(2);
+      });
+    });
+  });
+
   // ── Process Tab variant ──────────────────────────────────────────────────────
 
   describe("TabNavigation - Process Tab variant", () => {

package/cypress/support/component-imports.instrumented.ts

@@ -1,5 +1,7 @@
 import UDExAccordion from "../../instrumented/Accordion.js";
 import UDExAccordionItem from "../../instrumented/AccordionItem.js";
+import UDExAccordionSpotlight from "../../instrumented/AccordionSpotlight.js";
+import UDExAccordionSpotlightItem from "../../instrumented/AccordionSpotlightItem.js";
 import UDExAvatar from "../../instrumented/Avatar.js";
 import UDExAvatarGroup from "../../instrumented/AvatarGroup.js";
 import UDExBadge from "../../instrumented/Badge.js";
@@ -7,6 +9,7 @@ import UDExBreadcrumbs from "../../instrumented/Breadcrumbs.js";
 import UDExBreadcrumbsItem from "../../instrumented/BreadcrumbsItem.js";
 import UDExBusyIndicator from "../../instrumented/BusyIndicator.js";
 import UDExButton from "../../instrumented/Button.js";
+import UDExCarousel from "../../instrumented/Carousel.js";
 import UDExCheckbox from "../../instrumented/Checkbox.js";
 import UDExContact from "../../instrumented/Contact.js";
 import UDExContactItem from "../../instrumented/ContactItem.js";
@@ -89,6 +92,8 @@ import UDExWizardStep from "../../instrumented/WizardStep.js";
 export {
   UDExAccordion,
   UDExAccordionItem,
+  UDExAccordionSpotlight,
+  UDExAccordionSpotlightItem,
   UDExAvatar,
   UDExAvatarGroup,
   UDExBadge,
@@ -96,6 +101,7 @@ export {
   UDExBreadcrumbsItem,
   UDExBusyIndicator,
   UDExButton,
+  UDExCarousel,
   UDExCheckbox,
   UDExContact,
   UDExContactItem,

package/cypress/support/component-imports.src.ts

@@ -1,5 +1,7 @@
 import UDExAccordion from "../../src/Accordion.js";
 import UDExAccordionItem from "../../src/AccordionItem.js";
+import UDExAccordionSpotlight from "../../src/AccordionSpotlight.js";
+import UDExAccordionSpotlightItem from "../../src/AccordionSpotlightItem.js";
 import UDExAvatar from "../../src/Avatar.js";
 import UDExAvatarGroup from "../../src/AvatarGroup.js";
 import UDExBadge from "../../src/Badge.js";
@@ -7,6 +9,7 @@ import UDExBreadcrumbs from "../../src/Breadcrumbs.js";
 import UDExBreadcrumbsItem from "../../src/BreadcrumbsItem.js";
 import UDExBusyIndicator from "../../src/BusyIndicator.js";
 import UDExButton from "../../src/Button.js";
+import UDExCarousel from "../../src/Carousel.js";
 import UDExCheckbox from "../../src/Checkbox.js";
 import UDExContact from "../../src/Contact.js";
 import UDExContactItem from "../../src/ContactItem.js";
@@ -89,6 +92,8 @@ import UDExWizardStep from "../../src/WizardStep.js";
 export {
   UDExAccordion,
   UDExAccordionItem,
+  UDExAccordionSpotlight,
+  UDExAccordionSpotlightItem,
   UDExAvatar,
   UDExAvatarGroup,
   UDExBadge,
@@ -96,6 +101,7 @@ export {
   UDExBreadcrumbsItem,
   UDExBusyIndicator,
   UDExButton,
+  UDExCarousel,
   UDExCheckbox,
   UDExContact,
   UDExContactItem,

package/dist/AccordionSpotlight.d.ts

@@ -0,0 +1,149 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import AccordionSpotlightItem from "./AccordionSpotlightItem.js";
+import "@ui5/webcomponents-icons/dist/play.js";
+import "@ui5/webcomponents-icons/dist/pause.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+export declare enum UDExAccordionSpotlightVerticalAlignment {
+    Top = "Top",
+    Center = "Center"
+}
+export declare enum UDExAccordionSpotlightPlacement {
+    Start = "Start",
+    End = "End"
+}
+export declare enum UDExAccordionSpotlightMediaMode {
+    Dynamic = "Dynamic",
+    Static = "Static"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * Vertical accordion navigation with spotlight layout. Items are listed on the
+ * left; the expanded panel is displayed on the right (desktop) or inline below
+ * the heading (mobile). Follows the WAI-ARIA APG Accordion pattern.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-accordion-spotlight</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/AccordionSpotlight.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExAccordionSpotlight extends UI5Element {
+    eventDetails: {
+        "item-click": {
+            item: AccordionSpotlightItem;
+        };
+    };
+    /**
+     * The index of the currently expanded item (0-based).
+     * Derived from items' <code>selected</code> attribute; kept in sync by the parent.
+     *
+     * @private
+     */
+    _selectedIndex: number;
+    /**
+     * Vertical alignment of the navigation sidebar relative to the content panel.
+     *
+     * @default "Top"
+     * @public
+     */
+    verticalAlignment: `${UDExAccordionSpotlightVerticalAlignment}`;
+    /**
+     * Placement of the navigation sidebar — "Start" (left) or "End" (right).
+     *
+     * @default "Start"
+     * @public
+     */
+    placement: `${UDExAccordionSpotlightPlacement}`;
+    /**
+     * Enables automatic cycling through items on an interval.
+     *
+     * @default false
+     * @public
+     */
+    autoPlay: boolean;
+    /**
+     * Interval in milliseconds between automatic item advances. Applies only when autoPlay is enabled.
+     *
+     * @default 5000
+     * @public
+     */
+    autoPlayInterval: number;
+    /**
+     * Defines the width of the navigation panel.
+     *
+     * @default "auto"
+     * @public
+     */
+    tabWidth: string;
+    /**
+     * Controls how the media area behaves. In <code>Static</code> mode a single
+     * persistent media element (image or video) is displayed alongside the nav
+     * list and never changes when items are expanded. In <code>Dynamic</code>
+     * mode (default) each item provides its own content panel.
+     *
+     * @default "Dynamic"
+     * @public
+     */
+    mediaMode: `${UDExAccordionSpotlightMediaMode}`;
+    /**
+     * @private
+     */
+    _isMobile: boolean;
+    /**
+     * @private
+     */
+    _isPaused: boolean;
+    /**
+     * The slotted AccordionSpotlightItem elements.
+     *
+     * @public
+     */
+    items: DefaultSlot<AccordionSpotlightItem>;
+    /**
+     * Defines optional content rendered below the navigation items.
+     * Use to place a button or any action element beneath the items.
+     *
+     * @slot footer
+     * @public
+     */
+    footer: Slot<HTMLElement>;
+    /**
+     * Persistent media area shown in <code>Static</code> media mode.
+     * Place an <code>&lt;img&gt;</code> or <code>&lt;video&gt;</code> element here;
+     * it remains visible regardless of which item is currently expanded.
+     *
+     * @slot media
+     * @public
+     */
+    media: Slot<HTMLElement>;
+    _handleResizeBound: ResizeObserverCallback;
+    _autoPlayTimer?: number;
+    constructor();
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _handleResize(): void;
+    _checkMobile(): void;
+    _syncItemStates(): void;
+    _startAutoPlay(): void;
+    _stopAutoPlay(): void;
+    _advanceItem(): void;
+    onPlayButtonClick(): void;
+    handleNavItemClick(e: MouseEvent): void;
+    private _selectItem;
+    get playBtnIcon(): string;
+    get showFooterSlot(): boolean;
+    get isStaticMedia(): boolean;
+    get showMediaSlot(): boolean;
+}
+export default UDExAccordionSpotlight;