@sapudex/web-components 2.47.0 → 2.49.0

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; }
 

package/src/PromoTile.ts

@@ -240,7 +240,7 @@ class UDExPromoTile extends UI5Element {
     const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
     const isDarkMode = this._colorMode === UDExPromoTileMode.dark;
     const defaultButtonDesign = isDarkMode ? UDExButtonDesign.Secondary : UDExButtonDesign.Primary;
-    const modeColor = isDarkMode ? "var(--udexCoreTextLight)" : "inherit";
+    const modeColor = isDarkMode ? "var(--udexColorNeutralWhite)" : "inherit";
 
     if (this._button) {
       this._button.design = this.buttonDesign || defaultButtonDesign;

package/src/SearchableListBase.ts

@@ -247,11 +247,11 @@ class UDExSearchableListBase extends UI5Element {
   /**
    * Defines the default accessible role for the list component.
    *
-   * @default "list"
+   * @default "listbox"
    * @public
    */
   @property({ type: String })
-    defaultAccessibleRole: string = "list";
+    defaultAccessibleRole: string = "listbox";
 
   /**
    * Defines the filtered items for the component.
@@ -582,7 +582,7 @@ class UDExSearchableListBase extends UI5Element {
     if (firstItem.isGroup) {
       list.focusHeader(firstItem);
     } else {
-      firstItem.focus();
+      list.focusItem(firstItem);
     }
   }
 
@@ -720,6 +720,18 @@ class UDExSearchableListBase extends UI5Element {
     return this.modeMultiSelect && isGrouping;
   }
 
+  /**
+   * Whether the dropdown list should use the ARIA tree pattern
+   * (role="tree"/"treeitem" with aria-expanded / aria-selected / aria-checked).
+   *
+   * Base implementation is never a tree. Subclasses that support grouped
+   * hierarchical navigation (e.g. UDExFilterMenu) override this with their
+   * own mode/collapsible rules.
+   */
+  get isTreeStructure(): boolean {
+    return false;
+  }
+
   get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }
@@ -743,16 +755,21 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get roleForGroupList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : "none";
+    // Host is always transparent; the shadow-inner div carries the widget role
+    // (tree/listbox) via accessibleRoleForList.
+    return "none";
   }
 
   get accessibleRoleForList(): string {
-    return this._filteredItems.some(element => element.isGroup) ? "group" : this.defaultAccessibleRole;
+    if (this.isTreeStructure) {
+      return "tree";
+    }
+    return this.defaultAccessibleRole;
   }
 
   get listItemRole(): string {
-    if (this.accessibleRoleForList === "list") {
-      return "listitem";
+    if (this.isTreeStructure) {
+      return "treeitem";
     }
 
     if (this.accessibleRoleForList === "listbox") {

package/src/SearchableListBaseTemplate.tsx

@@ -49,6 +49,7 @@ export default function SearchableListBaseTemplate(this: UDExSearchableListBase)
           id="udex-list"
           role={this.roleForGroupList as AriaRole}
           accessible-role={this.accessibleRoleForList}
+          {...(this.isTreeStructure && this.modeMultiSelect ? { "aria-multiselectable": "true" } : {})}
           class="udex-filter-menu__list"
           controlled={this.isControlled}
           mode={this.mode}
@@ -97,10 +98,12 @@ function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProces
 function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
   const { item, groupItems } = processedItem;
   const header = item as UDExListGroupHeaderBase;
+  const childAccessibleRole = this.isTreeStructure ? "treeitem" : undefined;
   return (
     <UDExListGroupHeader
       key={index}
-      role="group"
+      role={this.isTreeStructure ? "none" : "group"}
+      _tree-mode={this.isTreeStructure || undefined}
       {...(index === 0 ? { "_no-border": "" } : {})}
       _additional-class-name="udex-searchable-list__header"
       class={this.groupClassName}
@@ -118,7 +121,7 @@ function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProc
       onSecondIconClick={this.fireSecondIconClickEvent}
       indeterminate={header.indeterminate}>
       {groupItems.map((child, i) =>
-        renderListItem(child as UDExListItem, i, "none", undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+        renderListItem(child as UDExListItem, i, "none", childAccessibleRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
       )}
     </UDExListGroupHeader>
   );

package/src/SelectBase.ts

@@ -225,6 +225,10 @@ class UDExSelectBase extends UDExSearchableListBase {
     this._trigger = this.trigger;
     this.handleDirection();
 
+    if (this._list) {
+      this._list._scrollIntoView = "Nearest";
+    }
+
     if (this._requestRender) {
       this._requestRender = false;
     }
@@ -299,12 +303,18 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     if (isRight(e)) {
       e.preventDefault();
+      if (this._handleGroupHeaderCollapse(e.target as HTMLElement, false)) {
+        return;
+      }
       this._handleArrowRightInRow(e.target as HTMLElement);
       return;
     }
 
     if (isLeft(e)) {
       e.preventDefault();
+      if (this._handleGroupHeaderCollapse(e.target as HTMLElement, true)) {
+        return;
+      }
       this._handleArrowLeftInRow(e.target as HTMLElement);
       return;
     }
@@ -617,6 +627,51 @@ class UDExSelectBase extends UDExSearchableListBase {
     return (iconSlot === "firstIcon" || iconSlot === "secondIcon") ? iconSlot : null;
   }
 
+  /**
+   * Collapses (Left) or expands (Right) a collapsible group header when the arrow key
+   * is pressed while focus is on that header. Mirrors List.handleArrowLeft/Right, but is
+   * needed here because SelectBox intercepts Left/Right at the popover level (for icon-row
+   * navigation) before the event would reach the List's own handler.
+   *
+   * Returns true when a collapse/expand was handled, so the caller skips icon-row handling.
+   */
+  _handleGroupHeaderCollapse(target: HTMLElement, collapse: boolean): boolean {
+    const header = this._resolveCollapsibleGroupHeader(target);
+    if (!header) { return false; }
+
+    // Left only collapses an expanded group; Right only expands a collapsed one.
+    if (collapse && !header.collapsed) {
+      header.collapsed = true;
+      this._list.setCollapsedItems(true, header);
+      return true;
+    }
+    if (!collapse && header.collapsed) {
+      header.collapsed = false;
+      this._list.setCollapsedItems(false, header);
+      return true;
+    }
+    // Target is a collapsible header but already in the requested state — still consume
+    // the key so it does not fall through to icon-row navigation.
+    return header.isGroup;
+  }
+
+  /**
+   * Resolves the collapsible group-header host from a keydown target, walking up through
+   * shadow host boundaries (the focused element can be the header's inner wrapper/list-item).
+   */
+  _resolveCollapsibleGroupHeader(target: HTMLElement): UDExListItemBase | null {
+    let node: Node | null = target;
+    while (node) {
+      const el = node as UDExListItemBase;
+      if (el.isGroup && typeof el.hasAttribute === "function" && el.hasAttribute("collapsible")) {
+        return el;
+      }
+      const root = node.getRootNode() as ShadowRoot | Document;
+      node = (root as ShadowRoot).host ?? null;
+    }
+    return null;
+  }
+
   _handleArrowRightInRow(target: HTMLElement): void {
     const iconSlot = this._getIconButtonSlot(target);
     if (!iconSlot) {
@@ -642,7 +697,7 @@ class UDExSelectBase extends UDExSearchableListBase {
       const firstIcon = parentItem.querySelector<HTMLElement>("[slot=\"firstIcon\"]");
       firstIcon?.focus();
     } else if (iconSlot === "firstIcon") {
-      (parentItem as UDExListItemBase).focus();
+      this._list.focusItem(parentItem as UDExListItemBase);
     }
   }
 
@@ -680,7 +735,7 @@ class UDExSelectBase extends UDExSearchableListBase {
 
     this._list.unsetTabIndexByIndex(items, currentIndex);
     this._list.setTabIndexByIndex(items, targetIndex);
-    items[targetIndex].focus();
+    this._list.focusItem(items[targetIndex]);
     this._selectedOption = items[targetIndex].label;
   }
 
@@ -697,7 +752,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     if (lastItem.isGroup) {
       this._list.focusHeader(lastItem);
     } else {
-      lastItem.focus();
+      this._list.focusItem(lastItem);
     }
   }
 

package/src/SelectBoxTemplate.tsx

@@ -76,6 +76,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             <UI5Popover
               id={this.popoverId}
               allow-target-overlap={this.allowTargetOverlap}
+              accessible-role="None"
               onKeyDown={this.handleKeyDownDropdown}
               {...({
                 onSelectAll: this.handleSelectAll,

package/src/TabNavigation.ts

@@ -139,6 +139,7 @@ class UDExTabNavigation extends UI5Element {
   /**
    * Defines the orientation of the tab navigation.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. Only `Horizontal` orientation should be used.
    * @public
    * @default "Horizontal"
    */
@@ -149,6 +150,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the placement of the tab strip relative to the content area.
    * Applies to Vertical orientation only.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default "Start"
    */
@@ -159,6 +161,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the vertical alignment of the tab strip relative to the content area.
    * Applies to Vertical orientation only.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default "Top"
    */
@@ -168,6 +171,7 @@ class UDExTabNavigation extends UI5Element {
   /**
    * Enables automatic tab switching for Vertical orientation.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation.
    * @public
    * @default false
    */
@@ -178,6 +182,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines the interval in milliseconds between automatic tab switches.
    * Applies only when autoPlay is enabled.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This property only applies to Vertical orientation with autoPlay.
    * @public
    * @default 5000
    */
@@ -256,6 +261,7 @@ class UDExTabNavigation extends UI5Element {
    * Defines optional content rendered below the tab list in Vertical orientation.
    * Use to place a button or any action element beneath the tabs.
    *
+   * @deprecated Vertical Tabs feature has been moved to Accordion Spotlight. This slot only applies to Vertical orientation.
    * @slot footer
    * @public
    */

package/src/Tag.ts

@@ -293,10 +293,11 @@ class UDExTag extends UI5Element {
     const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
     const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
     const nonSelectableClass = this.nonSelectable && !this.href && !this.nonInteractive ? "udex-tag--nonselectable" : "";
+    const nonInteractiveClass = this.nonInteractive ? "udex-tag--noninteractive" : "";
     const linkTagClass = this.href ? "udex-tag--link" : "";
     const selectableClass = this.selected ? "udex-tag--selected" : "";
     const designClass = `udex-tag-${this.design?.toLowerCase()}`;
-    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();
+    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${nonInteractiveClass} ${linkTagClass} ${selectableClass}`.trim();
   }
 
   get startIcon(): boolean {
@@ -331,7 +332,7 @@ class UDExTag extends UI5Element {
   }
 
   get hasIcon(): boolean {
-    return !!this.icon && !this.readOnly;
+    return !!this.icon;
   }
 
   get iconAccessibleName(): string {

package/src/TagTemplate.tsx

@@ -8,7 +8,9 @@ export default function TagTemplate(this: UDExTag) {
   return (
     this.readOnly ? (
       <div class={this.tagClasses}>
+        {this.startIcon && tagIcon.call(this, rootClass, "start")}
         <span class={`${rootClass}__text`}>{this.text}</span>
+        {this.endIcon && tagIcon.call(this, rootClass, "end")}
       </div>
     ) : this.href ? (
       <a class={this.tagClasses}