@sapudex/web-components 2.47.0 → 2.49.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/Tag.cy.tsx

@@ -10,10 +10,11 @@ const outlineTag =<UDExTag id="tag-outlined" text="Outlined" design="Outlined"><
 const iconTag = <UDExTag id="tag-icon" text="Tag text" icon="decline"></UDExTag>
 const startIconTag = <UDExTag id="tag-icon-start" text="Tag text" icon="decline" iconPlacement="Start"></UDExTag>
 const readonlyTag = <UDExTag id="tag-readonly" text="Tag text" icon="accept" readOnly></UDExTag>
+const readonlyNoIconTag = <UDExTag id="tag-readonly-no-icon" text="Tag text" readOnly></UDExTag>
 const nonselectableTag = <UDExTag id="tag-nonselectable" text="Non selectable" non-selectable></UDExTag>
 const nonselectableIconTag = <UDExTag id="tag-nonselectable-icon" text="Non selectable" icon="decline" non-selectable></UDExTag>
 const linkTag = <UDExTag id="tag-link" text="SAP home page" href="https://sap.com"></UDExTag>
-const nonInteractiveTag = <UDExTag id="tag-nonselectable" text="Non selectable" icon="decline" non-interactive></UDExTag>
+const nonInteractiveTag = <UDExTag id="tag-noninteractive" text="Non selectable" icon="decline" non-interactive></UDExTag>
 
 describe("Tag", () => {
   it("is rendered", () => {
@@ -118,8 +119,38 @@ describe("Tag", () => {
 
   it("icon is not focusable when non-interactive attribute is set", () => {
     cy.mount(nonInteractiveTag)
-    cy.get("#tag-nonselectable").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
-  }); 
+    cy.get("#tag-noninteractive").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
+  });
+
+  it("non-interactive tag renders with udex-tag--noninteractive class", () => {
+    cy.mount(nonInteractiveTag)
+    cy.get("#tag-noninteractive").shadow().find(".udex-tag--noninteractive").should("be.visible")
+  });
+
+  it("non-interactive tag icon has no wrapping button", () => {
+    cy.mount(nonInteractiveTag)
+    cy.get("#tag-noninteractive").shadow().find(".udex-tag__btn-icon").should("not.exist")
+  });
+
+  it("readonly tag renders the icon inside shadow DOM", () => {
+    cy.mount(readonlyTag)
+    cy.get("#tag-readonly").shadow().find(".udex-tag__icon").should("be.visible")
+  });
+
+  it("readonly tag icon has no wrapping button", () => {
+    cy.mount(readonlyTag)
+    cy.get("#tag-readonly").shadow().find(".udex-tag__btn-icon").should("not.exist")
+  });
+
+  it("readonly tag icon is non-interactive (decorative)", () => {
+    cy.mount(readonlyTag)
+    cy.get("#tag-readonly").shadow().find(".udex-tag__icon").should("have.attr", "mode", "Decorative")
+  });
+
+  it("readonly tag without icon renders no icon", () => {
+    cy.mount(readonlyNoIconTag)
+    cy.get("#tag-readonly-no-icon").shadow().find(".udex-tag__icon").should("not.exist")
+  });
 
   it("tests if tag with link is correctly rendered", () => {
     cy.mount(linkTag)

package/cypress/specs/TextField.cy.tsx

@@ -262,6 +262,74 @@ describe("Text Field", () => {
     });
   });
 
+  describe("icon accessibility attributes (a11y)", () => {
+    // Updated: the accessibility fix now uses two private string properties on TextField —
+    // `_iconAriaHasPopup` and `_iconAriaExpanded` (both @property type String, reflected as the
+    // kebab attributes `_icon-aria-has-popup` / `_icon-aria-expanded`). The `iconAccessibilityAttributes`
+    // getter assembles a ButtonAccessibilityAttributes object from them (returning undefined when both
+    // are unset) and forwards it to the internal UDExControlButton via `accessibilityAttributes`, so
+    // aria-haspopup / aria-expanded land on the icon *button* (its shadow `.ui5-button-root`), not the input.
+    // The previous object-based `_iconAccessibilityAttributes` approach no longer exists.
+    // Traversal to the button root:
+    //   [udex-text-field] -> shadow -> [udex-control-button] -> shadow -> .ui5-button-root
+
+    const controlButtonRoot = (id: string) =>
+      cy
+        .get(`#${id}`)
+        .shadow()
+        .find("[udex-control-button]")
+        .shadow()
+        .find(".ui5-button-root");
+
+    it("does NOT render aria-haspopup on the native input", () => {
+      // The input's aria-haspopup is driven only by `_ariaHasPopup`, which is unset here.
+      cy.mount(<UDExTextField id="noHasPopupTextField" icon="appointment-2"></UDExTextField>);
+      cy.get("#noHasPopupTextField").shadow().find("input").should("not.have.attr", "aria-haspopup");
+    });
+
+    it("does not forward accessibilityAttributes when neither string prop is set", () => {
+      // getter returns undefined => the control button renders no aria-haspopup / aria-expanded.
+      cy.mount(<UDExTextField id="noIconA11yTextField" icon="appointment-2"></UDExTextField>);
+      controlButtonRoot("noIconA11yTextField").should("not.have.attr", "aria-haspopup");
+      controlButtonRoot("noIconA11yTextField").should("not.have.attr", "aria-expanded");
+    });
+
+    it("forwards _iconAriaHasPopup / _iconAriaExpanded to the control button (aria-haspopup / aria-expanded)", () => {
+      // Both string props supplied as the reflected kebab attributes on the host.
+      cy.mount(
+        <UDExTextField
+          id="iconA11yTextField"
+          icon="appointment-2"
+          _icon-aria-has-popup="grid"
+          _icon-aria-expanded="false"
+        ></UDExTextField>,
+      );
+
+      controlButtonRoot("iconA11yTextField").should("have.attr", "aria-haspopup", "grid");
+      controlButtonRoot("iconA11yTextField").should("have.attr", "aria-expanded", "false");
+    });
+
+    it("reflects an updated expanded value onto the control button", () => {
+      cy.mount(
+        <UDExTextField
+          id="iconExpandedTextField"
+          icon="appointment-2"
+          _icon-aria-has-popup="grid"
+          _icon-aria-expanded="false"
+        ></UDExTextField>,
+      );
+
+      controlButtonRoot("iconExpandedTextField").should("have.attr", "aria-expanded", "false");
+
+      // Flip the reactive string property; the getter re-derives and the button re-renders.
+      cy.get("#iconExpandedTextField").then($el => {
+        ($el[0] as unknown as { _iconAriaExpanded: string })._iconAriaExpanded = "true";
+      });
+
+      controlButtonRoot("iconExpandedTextField").should("have.attr", "aria-expanded", "true");
+    });
+  });
+
   describe("with the type Number", () => {
     beforeEach( () => {
       cy.mount(numberTextField)

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;