@sapudex/web-components 2.48.0 → 2.50.0

package/src/Carousel.ts

@@ -7,6 +7,8 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
   isUp, isDown, isRight, isLeft,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -194,6 +196,15 @@ class UDExCarousel extends UI5Element {
   @property({ type: String })
     accessibleName: string = "";
 
+  /**
+   * Tracks whether the inner carousel has multiple pages (updated after render).
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _hasManyPages = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -201,88 +212,66 @@ class UDExCarousel extends UI5Element {
   _autoplayLastToggle = Date.now();
   _autoplayMinTimeBetweenToggle = 250;
   _autoplayManualStop = false;
-  _autoplayLoop = () => {
-    const items = this._carousel?.items;
-    if (!items) { return; }
-
-    const currentSlide = this._carousel._currentPageIndex;
-    const itemsPerPage = this._carousel.effectiveItemsPerPage;
-    const isLastSlide = currentSlide === (items.length - itemsPerPage);
-
-    if (isLastSlide && !this.cyclic) {
-      this._stopAutoplay();
-      this._autoplayManualStop = true;
-
-      return;
-    }
-
-    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);
-
-    this._carousel?.navigateTo(nextSlide);
-    this._calculateDisabledButtonsState();
-  };
+  _resizeHandler: ResizeObserverCallback;
 
-  get nextPageText(): string {
-    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
+  constructor() {
+    super();
+    this._resizeHandler = this._onResize.bind(this);
   }
 
-  get previousPageText(): string {
-    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);
-  }
+  onAfterRendering() {
+    redirectAttributes(this, "carousel");
 
-  get carouselClass(): string {
-    const classes = "udex-carousel";
+    this._calculateDisabledButtonsState();
 
-    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
+    if (this._autoplayInterval === null) {
+      this._startAutoplay();
+    }
   }
 
-  get navigationWrapperClass(): string {
-    let _class = "udex-carousel__navigation-wrapper";
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._resizeHandler);
 
-    if (this.autoplay) {
-      _class += " udex-carousel__navigation-wrapper--autoplay";
+    if (this._autoplayInterval) {
+      clearInterval(this._autoplayInterval);
     }
+  }
 
-    return _class;
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._resizeHandler);
   }
 
-  get navigationButtonWrapperClass(): string {
-    let _class = "udex-carousel__navigation-button-wrapper";
+  _onResize(): void {
+    this._hasManyPages = this._carousel?.hasManyPages ?? false;
+  }
 
-    if (this._carousel?.isPageTypeDots) {
-      _class += " udex-carousel__navigation-button-wrapper--dot-indicators";
+  _autoplayLoop = () => {
+    const items = this._carousel?.items;
+    if (!items) {
+      return;
     }
 
-    return _class;
-  }
-
-  get buttonDesign(): UDExCarouselButtonDesign {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.top
-      ? UDExCarouselButtonDesign.Secondary
-      : UDExCarouselButtonDesign.Tertiary;
-  }
+    const currentSlide = this._carousel._currentPageIndex;
+    const itemsPerPage = this._carousel.effectiveItemsPerPage;
+    const isLastSlide = currentSlide === (items.length - itemsPerPage);
 
-  get showNavigationButtons(): { top: boolean; bottom: boolean } {
-    return {
-      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,
-      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,
-    };
-  }
+    if (isLastSlide && !this.cyclic) {
+      this._stopAutoplay();
+      this._autoplayManualStop = true;
 
-  get _hidePageIndicator(): boolean {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.top;
-  }
+      return;
+    }
 
-  get _carousel(): UI5Carousel | null {
-    return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
-  }
+    const nextSlide = isLastSlide ? 0 : (currentSlide + itemsPerPage);
 
-  get _ui5CarouselRoot(): HTMLElement | null | undefined {
-    return this._carousel?.shadowRoot?.querySelector(".ui5-carousel-root");
-  }
+    this._carousel?.navigateTo(nextSlide);
+    this._calculateDisabledButtonsState();
+  };
 
   _startAutoplay(): void {
-    if (!this.autoplay) { return; }
+    if (!this.autoplay) {
+      return;
+    }
 
     if (!this._carousel?.items) {
       console.warn("[UDExCarousel] Cannot start autoplay on an empty carousel");
@@ -305,7 +294,9 @@ class UDExCarousel extends UI5Element {
   }
 
   _stopAutoplay(): void {
-    if (!this._autoplayInterval) { return; }
+    if (!this._autoplayInterval) {
+      return;
+    }
 
     clearInterval(this._autoplayInterval);
     this._autoplayIsPaused = true;
@@ -326,22 +317,14 @@ class UDExCarousel extends UI5Element {
     });
   }
 
-  get _isBottomNavigation(): boolean {
-    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
-  }
-
-  get autoplayToggleButtonTooltipText(): string {
-    return this._autoplayIsPaused
-      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
-      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
-  }
-
   _onFocusIn(): void {
     this._stopAutoplay();
   }
 
   _onFocusOut(): void {
-    if (!this._autoplayManualStop) { this._startAutoplay(); }
+    if (!this._autoplayManualStop) {
+      this._startAutoplay();
+    }
   }
 
   _onMouseEnter(): void {
@@ -349,7 +332,9 @@ class UDExCarousel extends UI5Element {
   }
 
   _onMouseLeave(): void {
-    if (!this._autoplayManualStop) { this._startAutoplay(); }
+    if (!this._autoplayManualStop) {
+      this._startAutoplay();
+    }
   }
 
   _calculateDisabledButtonsState() {
@@ -387,16 +372,69 @@ class UDExCarousel extends UI5Element {
     this.fireDecoratorEvent("navigate", e.detail);
   }
 
-  onAfterRendering() {
-    redirectAttributes(this, "carousel");
+  get nextPageText(): string {
+    return translate(UDExCarousel, CAROUSEL_NEXT_ARROW_TEXT);
+  }
 
-    this._calculateDisabledButtonsState();
+  get previousPageText(): string {
+    return translate(UDExCarousel, CAROUSEL_PREVIOUS_ARROW_TEXT);
+  }
+
+  get carouselClass(): string {
+    const classes = "udex-carousel";
 
-    if (this._autoplayInterval === null) { this._startAutoplay(); }
+    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;
   }
 
-  onExitDOM(): void {
-    if (this._autoplayInterval) { clearInterval(this._autoplayInterval); }
+  get navigationWrapperClass(): string {
+    let _class = "udex-carousel__navigation-wrapper";
+
+    if (this.autoplay) {
+      _class += " udex-carousel__navigation-wrapper--autoplay";
+    }
+
+    return _class;
+  }
+
+  get navigationButtonWrapperClass(): string {
+    let _class = "udex-carousel__navigation-button-wrapper";
+
+    if (this._carousel?.isPageTypeDots) {
+      _class += " udex-carousel__navigation-button-wrapper--dot-indicators";
+    }
+
+    return _class;
+  }
+
+  get buttonDesign(): UDExCarouselButtonDesign {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.top
+      ? UDExCarouselButtonDesign.Secondary
+      : UDExCarouselButtonDesign.Tertiary;
+  }
+
+  get showNavigationButtons(): { top: boolean; bottom: boolean } {
+    return {
+      top: this.navigationPlacement === UDExCarouselNavigationPosition.top && this._hasManyPages,
+      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom && this._hasManyPages,
+    };
+  }
+
+  get _hidePageIndicator(): boolean {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.top;
+  }
+
+  get _carousel(): UI5Carousel | null {
+    return this.shadowRoot!.querySelector<UI5Carousel>("[ui5-carousel]");
+  }
+
+  get _isBottomNavigation(): boolean {
+    return this.navigationPlacement === UDExCarouselNavigationPosition.bottom;
+  }
+
+  get autoplayToggleButtonTooltipText(): string {
+    return this._autoplayIsPaused
+      ? translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_START)
+      : translate(UDExCarousel, CAROUSEL_AUTOPLAY_TOGGLE_STOP);
   }
 }
 

package/src/FilterMenu.ts

@@ -296,19 +296,19 @@ class UDExFilterMenu extends UDExSearchableListBase {
     accessibleNameRef!: string;
   /**
    * Allows setting a custom role.
-   * @default "None"
+   * @default "Dialog"
    * @public
    */
   @property()
-    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.None;
+    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.Dialog;
 
   /**
    * Allows setting a custom role for dropdown trigger.
-   * @default "combobox"
+   * @default "button"
    * @public
    */
   @property({ type: String })
-    triggerAccessibleRole: string = "combobox";
+    triggerAccessibleRole: string = "button";
 
   /**
    * Determines whether the filter should be applied.
@@ -591,6 +591,27 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return translate(UDExFilterMenu, SELECT_OPTIONS);
   }
 
+  /**
+   * FilterMenu uses the ARIA tree pattern for genuinely grouped items when:
+   *   - MultiSelect mode (headers/items expose aria-checked), or
+   *   - SingleSelect mode with at least one collapsible group
+   *     (headers expose aria-expanded, items expose aria-selected).
+   *
+   * A "Select All" header is NOT a hierarchical group — it is a bulk-select
+   * affordance for a flat list — so it must not trigger the tree pattern.
+   */
+  override get isTreeStructure(): boolean {
+    const groups = this._filteredItems.filter(e => e.isGroup && !(e.item as UDExListGroupHeaderBase).isSelectAllHeader);
+    if (!groups.length) {
+      return false;
+    }
+    if (this.modeMultiSelect) {
+      return true;
+    }
+    return this.modeSingleSelect
+      && groups.some(e => (e.item as UDExListGroupHeaderBase).collapsible);
+  }
+
   get triggerButtonAccessibleName(): string {
     return this.accessibleName || translate(UDExFilterMenu, SELECT_OPTIONS);
   }

package/src/FilterMenuTemplate.tsx

@@ -19,7 +19,7 @@ export default function FilterMenuTemplate(this: UDExFilterMenu) {
         aria-label={this.triggerButtonAccessibleName}
         aria-labelledby={this.accessibleNameRef}
         aria-expanded={this._open}
-        aria-haspopup="true"
+        aria-haspopup="dialog"
         role={this.triggerAccessibleRole as AriaRole}
         aria-controls={`${this._id}_udex-filter-menu-dropdown`}
         disabled={this.disabled}

package/src/HeroBanner.ts

@@ -1,11 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
+import type UDExBreadcrumbs from "./Breadcrumbs.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -105,8 +107,8 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    content?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    content!: Slot<HTMLElement>;
 
   /**
    * Slot for image or video content.
@@ -114,8 +116,8 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    mediaContent?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    mediaContent!: Slot<HTMLElement>;
 
   /**
    * Slot for any additional content.
@@ -123,8 +125,8 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    additionalContent?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    additionalContent!: Slot<HTMLElement>;
 
   /**
    * Slot background picture override.
@@ -132,15 +134,63 @@ class UDExHeroBanner extends UI5Element {
    * @slot
    * @public
    */
-  @slot()
-    backgroundPicture?: Array<HTMLElement>;
+  @slot({ type: HTMLElement })
+    backgroundPicture!: Slot<HTMLElement>;
+
+  /**
+   * Slot for breadcrumbs.
+   *
+   * @slot breadcrumbs
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    breadcrumbs!: Slot<UDExBreadcrumbs>;
+
+  onEnterDOM() {
+    if (this.backgroundVideo) {
+      if (this.backgroundColor) {
+        this.style.setProperty("--udexHeroBannerBackgroundVideoColor", `${this.wrapperBackgroundColor}`);
+      }
+      this._video?.addEventListener("play", () => {
+        this._calculateMediaButtonState();
+      });
+    }
+  }
+
+  _toggleMediaButton(): void {
+    if (this._video?.paused) {
+      this._video?.play();
+    } else {
+      this._video?.pause();
+    }
+    this._calculateMediaButtonState();
+  }
+
+  _calculateMediaButtonState() {
+    this._isVideoRunning = this._video ? !this._video.paused : false;
+  }
+
+  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {
+    return element.tagName === "DIV";
+  };
+
+  _handleKeydown(event: KeyboardEvent): void {
+    const target = <HTMLElement>event.target;
+    if (this._isHTMLDivElement(target) && isSpace(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      this._toggleMediaButton();
+    }
+  }
 
   get hasBackgroundImage(): boolean {
     return !!this.backgroundImage;
   }
+
   get hasBackgroundVideo(): boolean {
     return !!this.backgroundVideo;
   }
+
   get wrapperBackgroundColor(): string {
     return this.backgroundColor ? this.backgroundColor : "transparent";
   }
@@ -179,44 +229,8 @@ class UDExHeroBanner extends UI5Element {
   get _video() {
     return this.shadowRoot?.querySelector<HTMLVideoElement>("video");
   }
-
-  _toggleMediaButton(): void {
-    if (this._video?.paused) {
-      this._video?.play();
-    } else {
-      this._video?.pause();
-    }
-    this._calculateMediaButtonState();
-  }
-
-  _calculateMediaButtonState() {
-    this._isVideoRunning = this._video ? !this._video.paused : false;
-  }
-
-  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {
-    return element.tagName === "DIV";
-  };
-
-  _handleKeydown(event: KeyboardEvent): void {
-    const target = <HTMLElement>event.target;
-    if (this._isHTMLDivElement(target) && isSpace(event)) {
-      event.preventDefault();
-      event.stopPropagation();
-      this._toggleMediaButton();
-    }
-  }
-
-  onEnterDOM() {
-    if (this.backgroundVideo) {
-      if (this.backgroundColor) {
-        this.style.setProperty("--udexHeroBannerBackgroundVideoColor", `${this.wrapperBackgroundColor}`);
-      }
-      this._video?.addEventListener("play", () => {
-        this._calculateMediaButtonState();
-      });
-    }
-  }
 }
+
 UDExHeroBanner.define();
 
 export default UDExHeroBanner;

package/src/HeroBannerTemplate.tsx

@@ -43,25 +43,32 @@ export default function HeroBannerTemplate(this: HeroBanner) {
                 alt={this.backgroundImageLabel}/>
             </picture>
           )}
-          <div className={`${rootClass}__content-container`}>
-            <slot
-              id={`${rootClass}__content`}
-              name="content"
-              part="content">
-            </slot>
+          <>
             <slot
-              id={`${rootClass}__additionalContent`}
-              name="additionalContent"
-              part="additionalContent">
+              id={`${rootClass}__breadcrumbs`}
+              name="breadcrumbs"
+              part="breadcrumbs">
             </slot>
-          </div>
-          <button
-            className={`${rootClass}__media-button`}
-            aria-label="Play / Pause button"
-            role="button"
-            onClick={this._toggleMediaButton}>
-            <UI5Icon name={btnIcon}></UI5Icon>
-          </button>
+            <div className={`${rootClass}__content-container`}>
+              <slot
+                id={`${rootClass}__content`}
+                name="content"
+                part="content">
+              </slot>
+              <slot
+                id={`${rootClass}__additionalContent`}
+                name="additionalContent"
+                part="additionalContent">
+              </slot>
+            </div>
+            <button
+              className={`${rootClass}__media-button`}
+              aria-label="Play / Pause button"
+              role="button"
+              onClick={this._toggleMediaButton}>
+              <UI5Icon name={btnIcon}></UI5Icon>
+            </button>
+          </>
         </div>
       ) : (
         <div className={`${rootClass}__container`}>
@@ -79,11 +86,17 @@ export default function HeroBannerTemplate(this: HeroBanner) {
             </picture>
           ) : null}
           <div className={`${rootClass}__content-container`}>
-            <slot
-              id={`${rootClass}__content`}
-              name="content"
-              part="content">
-            </slot>
+            <div id={`${rootClass}__content`}>
+              <slot
+                id={`${rootClass}__breadcrumbs`}
+                name="breadcrumbs"
+                part="breadcrumbs">
+              </slot>
+              <slot
+                name="content"
+                part="content">
+              </slot>
+            </div>
             {this.hasAdditionalContent && (
               <slot
                 id={`${rootClass}__additionalContent`}

package/src/List.ts

@@ -212,7 +212,7 @@ class UDExList extends UI5Element {
 
   handleArrowRight(e: KeyboardEvent): void {
     const target = e.target as UDExListItemBase;
-    if ((target.tagName === "UDEX-LIST-GROUP-HEADER" || target.tagName === "UDEX-LIST-ITEM") && target.hasAttribute("collapsible")) {
+    if (target.isGroup && target.hasAttribute("collapsible") && target.collapsed) {
       target.collapsed = false;
       this.setCollapsedItems(false, target);
     }
@@ -220,7 +220,7 @@ class UDExList extends UI5Element {
 
   handleArrowLeft(e: KeyboardEvent): void {
     const target = e.target as UDExListItemBase;
-    if ((target.tagName === "UDEX-LIST-GROUP-HEADER" || target.tagName === "UDEX-LIST-ITEM") && target.hasAttribute("collapsible")) {
+    if (target.isGroup && target.hasAttribute("collapsible") && !target.collapsed) {
       target.collapsed = true;
       this.setCollapsedItems(true, target);
     }
@@ -241,7 +241,7 @@ class UDExList extends UI5Element {
       if (this._scrollIntoView) {
         this.scrollToItem(items[lastItemIndex]);
       }
-      items[lastItemIndex].focus();
+      this.focusItem(items[lastItemIndex]);
       return;
     }
 
@@ -251,7 +251,7 @@ class UDExList extends UI5Element {
       if (this._scrollIntoView) {
         this.scrollToItem(items[previousSelectIndex - 1]);
       }
-      items[previousSelectIndex - 1].focus();
+      this.focusItem(items[previousSelectIndex - 1]);
       return;
     }
 
@@ -276,7 +276,7 @@ class UDExList extends UI5Element {
       if (this._scrollIntoView) {
         this.scrollToItem(items[previousSelectIndex]);
       }
-      items[previousSelectIndex].focus();
+      this.focusItem(items[previousSelectIndex]);
     }, 0);
   }
 
@@ -294,7 +294,7 @@ class UDExList extends UI5Element {
       if (this._scrollIntoView) {
         this.scrollToItem(items[nextSelectIndex + 1]);
       }
-      items[nextSelectIndex + 1].focus();
+      this.focusItem(items[nextSelectIndex + 1]);
       return;
     }
 
@@ -319,7 +319,7 @@ class UDExList extends UI5Element {
       if (this._scrollIntoView) {
         this.scrollToItem(items[nextSelectIndex]);
       }
-      items[nextSelectIndex].focus();
+      this.focusItem(items[nextSelectIndex]);
     }, 0);
   }
 
@@ -334,7 +334,7 @@ class UDExList extends UI5Element {
     if (nonInteractiveItem) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, 1);
-      items[1].focus();
+      this.focusItem(items[1]);
       return;
     }
 
@@ -352,7 +352,7 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, 0);
-    items[0].focus();
+    this.focusItem(items[0]);
   }
 
   handleEndKey(e: KeyboardEvent): void {
@@ -367,7 +367,7 @@ class UDExList extends UI5Element {
 
     this.unsetTabIndexByIndex(items, currentSelectedIndex);
     this.setTabIndexByIndex(items, items.length - 1);
-    items[items.length - 1].focus();
+    this.focusItem(items[items.length - 1]);
   }
 
   handleLetterKey(e: KeyboardEvent): void {
@@ -417,7 +417,19 @@ class UDExList extends UI5Element {
 
   focusHeader(item: UDExListItemBase): void {
     const header = item.shadowRoot?.querySelector(".udex-list__group-header-wrap") as HTMLElement;
-    header.focus();
+    if (!header) { return; }
+    // If the wrap element is a custom element (e.g. udex-list-item used for MultiSelect
+    // collapsible headers), its host has no tabindex so .focus() is a no-op. Delegate
+    // to the inner [part=item] div which carries the actual tabindex.
+    const focusTarget = header.shadowRoot?.querySelector<HTMLElement>("[part=item]") ?? header;
+    focusTarget.focus();
+  }
+
+  focusItem(item: UDExListItemBase): void {
+    // UI5Element.focus() is async. Synchronously drill to the focusable shadow element
+    // so focus is set immediately (required for JAWS and reliable Cypress assertions).
+    const focusTarget = item.shadowRoot?.querySelector<HTMLElement>("[part=item]") ?? item;
+    focusTarget.focus();
   }
 
   scrollToItem(item: UDExListItemBase): void {