@sapudex/web-components 2.48.0 → 2.49.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/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 {

package/src/ListGroupHeader.hbs

@@ -1,27 +1,27 @@
 <div
     part="item"
     class="udex-list__group"
-    role="group"
-    aria-labelledby="group-heading">
+    role="{{groupWrapperRole}}"
+    {{#unless isTreeAccessibleRole}}aria-labelledby="group-heading"{{/unless}}>
     {{#if collapsible}}
       <div
           class="udex-list__group-list"
           name="group"
           @ui5-item-press="{{getHandleGroupItemsClick}}">
-          {{#if modeMultiSelectOrRadioGroup}}
+          {{#if useListItemHeader}}
               {{> multi-or-radio-group-header-collapsible}}
           {{else}}
               {{> single-group-header-collapsible}}
           {{/if}}
-          <div id="{{ariaControlsId}}" role="region" class="udex-list__group-list__content">
-            <div role="listbox" aria-label="group">
+          <div id="{{ariaControlsId}}" role="{{contentRegionRole}}" class="udex-list__group-list__content">
+            {{#unless isTreeAccessibleRole}}<div role="listbox" aria-label="group">{{/unless}}
               <slot></slot>
-            </div>
+            {{#unless isTreeAccessibleRole}}</div>{{/unless}}
           </div>
       </div>
     {{else}}
       <div
-          role="listbox"
+          role="{{nonCollapsibleContainerRole}}"
           class="udex-list__group-list"
           name="group"
           aria-label="group"
@@ -65,7 +65,8 @@
             type="{{type}}"
             label="{{label}}"
             _icon="{{_icon}}"
-            size="{{size}}">
+            size="{{size}}"
+            accessible-role="{{nonCollapsibleHeaderAccessibleRole}}">
         </udex-list-item>
     {{/if}}
 {{/inline}}
@@ -98,7 +99,7 @@
             id="group-heading"
             aria-expanded="{{expanded}}"
             aria-controls="{{ariaControlsId}}"
-            accessible-role="button"
+            accessible-role="{{collapsibleHeaderAccessibleRole}}"
             _additional-class-name="{{_additionalClassName}}"
             ?selected="{{selected}}"
             _tab-index="{{_effectiveTabIndex}}"
@@ -148,7 +149,7 @@
 {{#*inline "single-group-header-collapsible"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item"
     id="{{this._id}}_group-content__focusable"
-    role="button"
+    role="{{singleCollapsibleHeaderRole}}"
     tabindex="0"
     @keydown="{{handleKeyDown}}"
     _tab-index="{{_effectiveTabIndex}}"

package/src/ListGroupHeader.ts

@@ -78,7 +78,11 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (isRight(e) || isLeft(e)) {
+    if (isLeft(e) && !this.collapsed) {
+      this.handleCollapseIconClick(e);
+      return;
+    }
+    if (isRight(e) && this.collapsed) {
       this.handleCollapseIconClick(e);
     }
   }

package/src/ListGroupHeaderBase.ts

@@ -36,6 +36,16 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   @property({ type: String })
     _additionalClassName!: string;
 
+  /**
+   * Marks the group header as part of a tree structure. When true, the header
+   * renders as a treeitem and its children container as a group.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _treeMode: boolean = false;
+
   /**
    * Slot for group header list items.
    *
@@ -186,6 +196,44 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     return this.nonInteractive || this.modeRadioGroup;
   }
 
+  /**
+   * Decides which collapsible-header partial to render.
+   * Uses the udex-list-item-based partial for MultiSelect/RadioGroup only.
+   * SingleSelect collapsible headers use the plain div partial — the list-item
+   * partial fires its own Enter/Space/click selection handlers that must not run.
+   */
+  get useListItemHeader(): boolean {
+    return this.modeMultiSelectOrRadioGroup;
+  }
+
+  get isTreeAccessibleRole(): boolean {
+    return this._treeMode;
+  }
+
+  get singleCollapsibleHeaderRole(): string {
+    return this._treeMode ? "treeitem" : "button";
+  }
+
+  get collapsibleHeaderAccessibleRole(): string {
+    return this._treeMode ? "treeitem" : "button";
+  }
+
+  get groupWrapperRole(): string {
+    return this._treeMode ? "none" : "group";
+  }
+
+  get contentRegionRole(): string {
+    return this._treeMode ? "group" : "region";
+  }
+
+  get nonCollapsibleContainerRole(): string {
+    return "group";
+  }
+
+  get nonCollapsibleHeaderAccessibleRole(): string | undefined {
+    return this._treeMode ? "treeitem" : undefined;
+  }
+
   get className(): string {
     const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
     return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName} ${listGroupHeaderClass}-wrap`;

package/src/ListItem.hbs

@@ -5,6 +5,9 @@
         aria-disabled="{{_ariaDisabled}}"
         class="{{className}}"
         role="{{roleItem}}"
+        aria-checked="{{ariaCheckedValue}}"
+        aria-selected="{{ariaSelectedValue}}"
+        aria-expanded="{{ariaExpandedValue}}"
         @click="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}"
@@ -24,7 +27,8 @@
                 ?indeterminate="{{indeterminate}}"
                 accessible-name="checkbox {{stateAccessibleName}}"
                 ?checked="{{selected}}"
-                ?disabled="{{disabled}}">
+                ?disabled="{{disabled}}"
+                ?aria-hidden="{{checkboxAriaHidden}}">
             </udex-checkbox>
         {{/if}}
         {{#if modeRadioGroup}}

package/src/ListItem.ts

@@ -369,6 +369,42 @@ class UDExListItem extends UDExListItemBase {
     return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
   }
 
+  get ariaCheckedValue(): "true" | "false" | "mixed" | undefined {
+    if (this.roleItem !== "treeitem") {
+      return undefined;
+    }
+    // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.
+    if (!this.modeMultiSelect) {
+      return undefined;
+    }
+    if (this.indeterminate) {
+      return "mixed";
+    }
+    return this.selected ? "true" : "false";
+  }
+
+  get ariaSelectedValue(): "true" | "false" | undefined {
+    if (this.roleItem !== "treeitem") {
+      return undefined;
+    }
+    // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
+    if (this.modeMultiSelect) {
+      return undefined;
+    }
+    return this.selected ? "true" : "false";
+  }
+
+  get ariaExpandedValue(): "true" | "false" | undefined {
+    if (!this.collapsible) {
+      return undefined;
+    }
+    return this.expanded ? "true" : "false";
+  }
+
+  get checkboxAriaHidden(): boolean {
+    return this.roleItem === "treeitem";
+  }
+
   get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }

package/src/MediaPlayer.ts

@@ -10,6 +10,7 @@ import type { VimeoPlayer } from "./MediaPlayerVimeo.js";
 import mapLangFile from "./mediaPlayerLanguageMapping.js";
 import type UDExMediaPlayerYoutube from "./MediaPlayerYoutube.js";
 import type UDExMediaPlayerVimeo from "./MediaPlayerVimeo.js";
+import "./BusyIndicator.js";
 
 // Template
 import MediaPlayerTemplate from "./MediaPlayerTemplate.js";
@@ -281,6 +282,15 @@ class UDExMediaPlayer extends UI5Element {
     this._pendingPlugins.push({ name, plugin });
   }
 
+  _injectBusyIndicator(): void {
+    const spinner = this.shadowRoot?.querySelector(".vjs-loading-spinner");
+    if (!spinner || spinner.querySelector("[udex-busy-indicator]")) { return; }
+    const busyIndicator = document.createElement("udex-busy-indicator");
+    busyIndicator.setAttribute("active", "");
+    busyIndicator.setAttribute("surface-container", "");
+    spinner.appendChild(busyIndicator);
+  }
+
   getPlayedTime = (target: EventTarget): number => {
     const progressControl = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
     if (!progressControl) {
@@ -566,6 +576,7 @@ class UDExMediaPlayer extends UI5Element {
 
       this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "", options);
       this.attachListeners(this.player);
+      this._injectBusyIndicator();
 
       if (this.audioOnly) { return; }