@sapudex/web-components 2.36.0 → 2.38.0

package/src/SearchableListBaseTemplate.tsx

@@ -0,0 +1,157 @@
+import type UDExSearchableListBase from "./SearchableListBase.js";
+import type { UDExProcessedItem } from "./types/SearchableListBase.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import UDExBusyIndicator from "./BusyIndicator.js";
+import UDExList from "./List.js";
+import UDExListItem from "./ListItem.js";
+import UDExListGroupHeader from "./ListGroupHeader.js";
+import UDExListSelectAll from "./ListSelectAll.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+
+export default function SearchableListBaseTemplate(this: UDExSearchableListBase) {
+  return (
+    <>
+      {this.showSearch && (
+        <>
+          <UDExSearch
+            slot="header"
+            mode={UDExSearchMode.Standard}
+            class="udex-filter-menu__search"
+            label={this.searchPlaceholder}
+            label-animation-disabled
+            non-interactive-submit-button
+            show-submit-button>
+          </UDExSearch>
+          <span aria-live="polite" aria-atomic="true" class="hidden">{this._accSearchResultInfo}</span>
+        </>
+      )}
+      {this.isListEmpty ? (
+        <div class="udex-no-result">
+          <IllustratedMessage
+            name="NoSearchResults"
+            design="Dot"
+            title-text=" "
+            subtitle-text=" ">
+          </IllustratedMessage>
+          <span>{this.getNoResultText}</span>
+        </div>
+      ) : this.busy ? (
+        <UDExBusyIndicator
+          class="udex-busy-indicator"
+          size="M"
+          delay={this.busyDelay}
+          active>
+        </UDExBusyIndicator>
+      ) : (
+        <UDExList
+          id="udex-list"
+          role={this.roleForGroupList as AriaRole}
+          accessible-role={this.accessibleRoleForList}
+          class="udex-filter-menu__list"
+          tab-navigation-enabled={this.tabNavigationEnabled}
+          controlled={this.isControlled}
+          mode={this.mode}>
+          {this._filteredItems.map((processedItem, index) => (
+            processedItem.isGroup
+              ? renderGroup.call(this, processedItem, index)
+              : renderListItem(processedItem.item as UDExListItem, index, "none", this.listItemRole, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+          ))}
+        </UDExList>
+      )}
+    </>
+  );
+}
+
+function renderGroup(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
+  return (processedItem.item as UDExListGroupHeaderBase).isSelectAllHeader
+    ? renderSelectAll.call(this, processedItem, index)
+    : renderGroupHeader.call(this, processedItem, index);
+}
+
+function renderSelectAll(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
+  const { item, groupItems } = processedItem;
+  const header = item as UDExListGroupHeaderBase;
+  return (
+    <UDExListSelectAll
+      key={index}
+      _additional-class-name={this.additionalClassName}
+      data-token-id={item._id}
+      label={item.label}
+      controlled={header.controlled}
+      supporting-text={item.supportingText}
+      disabled={item.disabled}
+      selected={item.selected}
+      indeterminate={header.indeterminate}
+      onFirstIconClick={this.fireFirstIconClickEvent}
+      onSecondIconClick={this.fireSecondIconClickEvent}>
+      {groupItems.map((child, i) =>
+        renderListItem(child as UDExListItem, i, this.listItemRole, undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+      )}
+    </UDExListSelectAll>
+  );
+}
+
+function renderGroupHeader(this: UDExSearchableListBase, processedItem: UDExProcessedItem, index: number) {
+  const { item, groupItems } = processedItem;
+  const header = item as UDExListGroupHeaderBase;
+  return (
+    <UDExListGroupHeader
+      key={index}
+      role="group"
+      _additional-class-name="udex-searchable-list__header"
+      class={this.groupClassName}
+      non-interactive={header.nonInteractive}
+      data-token-id={item._id}
+      label={item.label}
+      supporting-text={item.supportingText}
+      controlled={header.controlled}
+      collapsible={header.collapsible}
+      collapsed={header.collapsed}
+      _filtered={this._shouldFilterItems}
+      disabled={item.disabled}
+      selected={item.selected}
+      onFirstIconClick={this.fireFirstIconClickEvent}
+      onSecondIconClick={this.fireSecondIconClickEvent}
+      indeterminate={header.indeterminate}>
+      {groupItems.map((child, i) =>
+        renderListItem(child as UDExListItem, i, "none", undefined, this.fireFirstIconClickEvent, this.fireSecondIconClickEvent)
+      )}
+    </UDExListGroupHeader>
+  );
+}
+
+function renderListItem(
+  item: UDExListItem,
+  index: number,
+  role: string,
+  accessibleRole: string | undefined,
+  onFirstIconClick: (e: CustomEvent) => void,
+  onSecondIconClick: (e: CustomEvent) => void,
+) {
+  return (
+    <UDExListItem
+      key={index}
+      role={role as AriaRole}
+      data-token-id={item._id}
+      controlled={item.controlled}
+      mode={item.mode}
+      onFirstIconClick={onFirstIconClick}
+      onSecondIconClick={onSecondIconClick}
+      supporting-text={item.supportingText}
+      additional-text={item.additionalText}
+      additional-text-state={item.additionalTextState}
+      divider={item.divider}
+      disabled={item.disabled}
+      selected={item.selected}
+      rating={item.rating}
+      total-count={item.totalCount}
+      rating-count={item.ratingCount}
+      rating-max={item.ratingMax}
+      label={item.label}
+      {...(accessibleRole ? { "accessible-role": accessibleRole } : {})}
+      {...((item as any).innerHTML ? { dangerouslySetInnerHTML: { __html: (item as any).innerHTML } } : {})}>
+    </UDExListItem>
+  );
+}

package/src/SecondaryNavigation.ts

@@ -201,6 +201,7 @@ class UDExSecondaryNavigation extends UI5Element {
   _rootHolder!: HTMLElement | null | undefined;
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
+  _prevSlottedButtons: HTMLElement | null = null;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -220,6 +221,9 @@ class UDExSecondaryNavigation extends UI5Element {
 
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._boundReflowItems);
+    if (this._prevSlottedButtons) {
+      ResizeHandler.deregister(this._prevSlottedButtons, this._boundReflowItems);
+    }
   }
 
   onInvalidation(changeInfo: ChangeInfo): void {
@@ -234,6 +238,22 @@ class UDExSecondaryNavigation extends UI5Element {
       this._showMoreButton = true;
     }
     this.handleOutsideClick();
+    this.syncButtonsResizeHandler();
+  }
+
+  syncButtonsResizeHandler(): void {
+    const buttonsEl = this.optionalButtons || null;
+    if (buttonsEl !== this._prevSlottedButtons) {
+      if (this._prevSlottedButtons) {
+        ResizeHandler.deregister(this._prevSlottedButtons, this._boundReflowItems);
+      }
+      if (buttonsEl) {
+        ResizeHandler.register(buttonsEl, this._boundReflowItems);
+      } else {
+        this.reflowItems();
+      }
+      this._prevSlottedButtons = buttonsEl;
+    }
   }
 
   refreshRendering(): void {

package/src/SelectBase.ts

@@ -12,8 +12,8 @@ import type UDExSearch from "./Search.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { COUNTRY_SELECT, STARS } from "./generated/i18n/i18n-defaults.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
-import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
+import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
@@ -22,6 +22,7 @@ import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
 import { getTokensCountText } from "@ui5/webcomponents/dist/Tokenizer.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
 import translate from "./utils/translate.js";
+import type { AriaAutoComplete, AriaHasPopup } from "@ui5/webcomponents-base/dist/types.js";
 
 type UDExSelectBaseEvents = {
   "open": void,
@@ -165,10 +166,10 @@ class UDExSelectBase extends UDExSearchableListBase {
   _paneWidthVariableName = "--udex-dropdown-pane-width";
   _labelBaseClass = "udex-text-field__label";
   _dropdownClass = "udex-select-box__dropdown";
-  _listBoxRole = "listbox";
+  _listBoxRole: AriaHasPopup = "listbox";
   _rootClass = "udex-select-box__root";
   _stickyClass = "udex-list__sticky";
-  _ariaAutoComplete = "list";
+  _ariaAutoComplete: AriaAutoComplete = "list";
   _trigger!: HTMLElement;
   _search!: UDExSearch | HTMLInputElement;
   _popover!: Popover;
@@ -423,7 +424,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     }
   }
 
-  handleSearchChange(e: CustomEvent) {
+  handleSearchChange(e: InputEvent) {
     const inputValue = (e.target as HTMLInputElement)?.value || "";
     this._inputValue = inputValue;
 
@@ -586,7 +587,7 @@ class UDExSelectBase extends UDExSearchableListBase {
     return `${this._id}_${this._dropdownClass}`;
   }
 
-  get listboxRole(): string {
+  get listboxRole(): AriaHasPopup {
     return this._listBoxRole;
   }
 

package/src/SelectBox.ts

@@ -1,5 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import {
@@ -30,7 +30,8 @@ import UDExStatusMessage from "./StatusMessage.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
 import UDExTagGroup from "./TagGroup.js";
 import UDExSelectBase from "./SelectBase.js";
-import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
+import SelectBoxTemplate from "./SelectBoxTemplate.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 import type { UDExSelectBaseEvents } from "./SelectBase.js";
 
@@ -71,7 +72,7 @@ type UDExSelectBoxRemoveEventDetail = {
  */
 @customElement({
   tag: "udex-select-box",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [
     TextFieldCss,
     SelectBoxCss,
@@ -239,6 +240,7 @@ class UDExSelectBox extends UDExSelectBase {
 
     if (this.modeMultiSelect) {
       this.handleUnselectTruncatableTag();
+      this._selectedOption = "";
     }
 
     this._open = false;
@@ -460,6 +462,15 @@ class UDExSelectBox extends UDExSelectBase {
 
     return this._focused || this._open || isCurrentlyExpanded;
   }
+
+  override get searchableList() {
+    this.defaultAccessibleRole = this._listBoxRole;
+    return SearchableListBaseTemplate.call(this);
+  }
+
+  static override get searchableListBaseTemplate(): any {
+    return SearchableListBaseTemplate;
+  }
 }
 
 UDExSelectBox.define();

package/src/SelectBoxTemplate.tsx

@@ -0,0 +1,165 @@
+import type UDExSelectBox from "./SelectBox.js";
+import UDExTagGroup from "./TagGroup.js";
+import UDExTag from "./Tag.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UI5Popover from "@ui5/webcomponents/dist/Popover.js";
+import UI5PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import UI5PopoverHAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import { cleanLabel } from "./utils/listItemLabelUtils.js";
+
+export default function SelectBoxTemplate(this: UDExSelectBox) {
+  return (
+    <div class={this._rootClass}>
+      <div class="udex-text-field__container">
+        <div class="udex-text-field__wrap" {...(this.displayonly ? { displayonly: "" } : {})}>
+          {this.showMultiSelectedOptions && renderTagGroup.call(this)}
+          <div
+            class="udex-text-field__input"
+            onFocusIn={this.handleInputFocusIn}
+            onFocusOut={this.handleInputFocusOut}
+            {...(this.readonly ? { readonly: "" } : {})}
+            {...(this.isDisabled ? { disabled: "" } : {})}
+            {...(this._open ? { open: "" } : {})}>
+            {this.label && (
+              <>
+                <label for="search-input" class={this.labelClass}>
+                  {this.label}{this.required && "*"}
+                </label>
+                <span class="hidden" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>
+              </>
+            )}
+            {this.showImageFlags && this.countryFlag}
+            <div class="udex-text-field__holder">
+              <input
+                role="combobox"
+                type="text"
+                id="search-input"
+                name="search"
+                class="udex-text-field__search"
+                value={this._inputValue}
+                onInput={this.handleSearchChange}
+                onClick={this.handleInputClick}
+                onKeyDown={this.handleKeyDownSearch}
+                disabled={this.isDisabled}
+                readonly={this.isReadOrDisplayOnly}
+                aria-label={this.accInfo.ariaLabel}
+                aria-readonly={this.isReadOrDisplayOnly}
+                aria-disabled={this.disabled}
+                aria-haspopup={this.listboxRole}
+                aria-controls={this.popoverId}
+                aria-expanded={this._open}
+                aria-autocomplete={this._ariaAutoComplete}
+                aria-describedby={`${this._id}-aria-describedby`}
+                autocomplete="off"
+              />
+              {this._selectedOption && (
+                <div class="udex-text-field__text-holder">
+                  <span
+                    class="udex-text-field__single-label"
+                    aria-hidden="true"
+                    dangerouslySetInnerHTML={{ __html: this._selectedOption }}>
+                  </span>
+                </div>
+              )}
+            </div>
+            {!this.displayonly && (
+              <button
+                onClick={this.handleButtonClick}
+                disabled={this.isDisabled}
+                aria-label={this.accInfo.ariaLabel}
+                class="udex-text-field__trigger"
+                tabindex={-1}>
+                <UI5Icon mode="Decorative" name="navigation-down-arrow"></UI5Icon>
+              </button>
+            )}
+            <UI5Popover
+              id={this.popoverId}
+              allow-target-overlap={this.allowTargetOverlap}
+              onKeyDown={this.handleKeyDownDropdown}
+              {...({
+                onSelectAll: this.handleSelectAll,
+                onItemPress: this.handleItemPress,
+                onHeaderPress: this.handleHeaderPress,
+              } as any)}
+              onBeforeOpen={this.handleDropdownBeforeOpen}
+              onOpen={this.fireEventDropdownOpen}
+              onBeforeClose={this.handleDropdownBeforeClose}
+              onClose={this.handleDropdownClose}
+              class="udex-select-box__dropdown"
+              horizontal-align={UI5PopoverHAlign.Start}
+              placement={UI5PopoverPlacement.Bottom}
+              prevent-focus-restore
+              prevent-initial-focus
+              hide-arrow>
+              {this._showTagsDropdownContent
+                ? renderTruncatableTagContent.call(this)
+                : this.searchableList}
+            </UI5Popover>
+            <span aria-live="polite" aria-atomic="true" class="hidden">{this._accSearchResultInfo}</span>
+          </div>
+        </div>
+        {this.supportingText && (
+          <UDExStatusMessage
+            disabled={this.disabled ? "true" : undefined}
+            supporting-text={this.supportingText}
+            value-state={this.valueState}>
+          </UDExStatusMessage>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function renderTagGroup(this: UDExSelectBox) {
+  return (
+    <UDExTagGroup
+      class="udex-tag-group"
+      displayonly={this.displayonly}
+      readonly={this.readonly}
+      disabled={this.disabled}
+      onFocusOut={this.resetTagsTabIndexes}
+      tooltip-placement={this.tooltipPlacement}
+      onTagIconClick={this.handleRemoveTag}
+      onTagClick={this.handleTagClick}
+      onShowMoreTags={this.handlerShowMoreItems}
+      onTagKeydown={this.handleKeyDownTag}
+      tokenizer-expanded={this.tokenizerExpanded}
+      _skip-more-button-focus>
+      {this.selectedItems
+        .filter(item => !item.isGroup)
+        .map((item, index) => (
+          item.label ? (
+            <UDExTag
+              key={index}
+              text={cleanLabel(item.label)}
+              id={item._id}
+              icon="decline">
+            </UDExTag>
+          ) : (
+            <UDExTag
+              key={index}
+              text={`${item.rating} ${this.startsText}`}
+              id={item._id}
+              icon="decline">
+            </UDExTag>
+          )
+        ))
+      }
+    </UDExTagGroup>
+  );
+}
+
+function renderTruncatableTagContent(this: UDExSelectBox) {
+  return (
+    <div class="udex-truncatable-tag-content">
+      <span class="udex-truncatable-tag-content__label">{this.truncatableTagLabel}</span>
+      <UI5Icon
+        onClick={this.handleRemoveTruncatableTag}
+        class="udex-truncatable-tag-content__icon"
+        mode="Decorative"
+        name="decline">
+      </UI5Icon>
+    </div>
+  );
+}

package/src/Tab.ts

@@ -143,6 +143,16 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String })
     icon!: string;
 
+  /**
+   * Defines if the tab is disabled. A disabled tab is not clickable or focusable,
+   * but remains reachable by screen readers via aria-disabled.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    disabled!: boolean;
+
   /**
    * Defines the href of the tab.
    *
@@ -271,6 +281,10 @@ class UDExTab extends UI5Element implements ITab {
     return null;
   }
 
+  get ariaDisabled(): string | null {
+    return this.disabled ? "true" : null;
+  }
+
   get hasItemCountText(): boolean {
     return this._isProcessTab && !!this.itemCountText;
   }

package/src/TabHeader.hbs

@@ -13,7 +13,8 @@
                 aria-posinset="{{this._posinset}}"
                 aria-setsize="{{this._setsize}}"
                 aria-controls="{{this._contentId}}"
-                aria-selected="{{this.effectiveSelected}}">
+                aria-selected="{{this.effectiveSelected}}"
+                aria-disabled="{{this.ariaDisabled}}">
                 {{>tab-content}}
                 {{#if this.ariaDescribedByBodyText}}
                     <span class="visually-hidden">{{bodyText}}</span>
@@ -28,7 +29,8 @@
                 role="tab"
                 tabindex="{{this.linkTabIndex}}"
                 aria-posinset="{{this._posinset}}"
-                aria-setsize="{{this._setsize}}">
+                aria-setsize="{{this._setsize}}"
+                aria-disabled="{{this.ariaDisabled}}">
                 {{>tab-content}}
                 {{#if this.ariaDescribedByBodyText}}
                     <span class="visually-hidden">{{bodyText}}</span>
@@ -57,6 +59,7 @@
             aria-setsize="{{this._setsize}}"
             aria-controls="{{this._contentId}}"
             aria-selected="{{this.effectiveSelected}}"
+            aria-disabled="{{this.ariaDisabled}}"
             ._realTab="{{this}}"
             {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}>
             {{>tab-content}}
@@ -71,6 +74,7 @@
             aria-setsize="{{this._setsize}}"
             href="{{href}}"
             target="{{target}}"
+            aria-disabled="{{this.ariaDisabled}}"
             {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}
             ._realTab="{{this}}">
             {{>tab-content}}

package/src/TabInOverflow.hbs

@@ -4,6 +4,7 @@
         class="udex-tab-overflow__button"
         role="tab"
         aria-selected="{{this.effectiveSelected}}"
+        aria-disabled="{{this.ariaDisabled}}"
         tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
             <span class="udex-tab-overflow__button-icon"
@@ -33,6 +34,7 @@
         class="udex-tab-overflow__button"
         role="tab"
         aria-selected="{{this.effectiveSelected}}"
+        aria-disabled="{{this.ariaDisabled}}"
         tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
             <span class="udex-tab-overflow__button-icon"

package/src/TabNavigation.ts

@@ -351,9 +351,10 @@ class UDExTabNavigation extends UI5Element {
   }
 
   setCurrentSelectedTab() {
-    const selectedTabs = this.items.filter(tab => tab.selected);
-    this._selectedTab = selectedTabs.length ? selectedTabs[0] as Tab : this.items[0] as Tab;
-    this._selectedTab._selected = Boolean(selectedTabs.length ? selectedTabs.length : this.items[0]);
+    const selectedTabs = this.items.filter(tab => tab.selected && !tab.disabled);
+    const firstEnabledTab = this.items.find(tab => !tab.disabled) as Tab;
+    this._selectedTab = selectedTabs.length ? selectedTabs[0] as Tab : (firstEnabledTab || this.items[0] as Tab);
+    this._selectedTab._selected = Boolean(selectedTabs.length ? selectedTabs.length : (firstEnabledTab || this.items[0]));
   }
 
   setRealTabToItems() {
@@ -421,6 +422,11 @@ class UDExTabNavigation extends UI5Element {
     e.preventDefault();
 
     const selectedTabIndex = (this.items as Array<Tab>).findIndex(item => item.__id === tab.id);
+
+    if (this.items[selectedTabIndex]?.disabled) {
+      return;
+    }
+
     this._selectedTab = this.items[selectedTabIndex] as Tab;
     this.updateSelectedTab(selectedTabIndex);
     this.emitClickEvent(selectedTabIndex + 1);
@@ -649,7 +655,9 @@ class UDExTabNavigation extends UI5Element {
   }
 
   setVisibleTabs() {
-    this._visibleTabs = this.items.map(tab => tab.getTabInHeaderDomRef()!)
+    this._visibleTabs = this.items
+      .filter(tab => !tab.disabled)
+      .map(tab => tab.getTabInHeaderDomRef()!)
       .filter(tab => !tab.hasAttribute("hidden"));
 
     if (!this.getMoreButton().hasAttribute("hidden")) {
@@ -668,14 +676,18 @@ class UDExTabNavigation extends UI5Element {
 
   setTabsIndex(currentIndex: number) {
     this.items.forEach((tab, index) => {
-      tab._tabIndex = index === currentIndex ? "0" : "-1";
+      tab._tabIndex = index === currentIndex && !tab.disabled ? "0" : "-1";
     });
   }
 
   handleOverflowItemClick(e: Event) {
     if ((e.target as HTMLElement).localName === "button") {
-      e.preventDefault();
-      this.onItemSelect((e.target as HTMLElement).id);
+      const targetId = (e.target as HTMLElement).id;
+      const [targetTab] = this.items.filter(item => item.__id === targetId);
+      if (!targetTab?.disabled) {
+        e.preventDefault();
+        this.onItemSelect(targetId);
+      }
     }
     this.handleClosePopover();
   }
@@ -943,8 +955,12 @@ class UDExTabNavigation extends UI5Element {
   handleEnterOrSpace(e: KeyboardEvent) {
     if (isEnter(e) || isSpace(e)) {
       e.preventDefault();
-      this.onItemSelect((e.target as HTMLElement).id);
-      this.handleClosePopover();
+      const targetId = (e.target as HTMLElement).id;
+      const [targetTab] = this.items.filter(item => item.__id === targetId);
+      if (!targetTab?.disabled) {
+        this.onItemSelect(targetId);
+        this.handleClosePopover();
+      }
     }
   }
 
@@ -1038,9 +1054,15 @@ class UDExTabNavigation extends UI5Element {
   }
 
   _advanceTab(): void {
-    const currentIndex = (this.items as Array<Tab>).findIndex(item => item === this._selectedTab);
-    const nextIndex = (currentIndex + 1) % this.items.length;
-    this._selectedTab = this.items[nextIndex] as Tab;
+    const enabledItems = (this.items as Array<Tab>).filter(item => !item.disabled);
+    if (enabledItems.length === 0) {
+      return;
+    }
+    const currentEnabledIndex = enabledItems.findIndex(item => item === this._selectedTab);
+    const nextEnabledIndex = (currentEnabledIndex + 1) % enabledItems.length;
+    const nextTab = enabledItems[nextEnabledIndex];
+    const nextIndex = (this.items as Array<Tab>).indexOf(nextTab);
+    this._selectedTab = nextTab;
     this.updateSelectedTab(nextIndex);
     this.emitClickEvent(nextIndex + 1);
   }