@sapudex/web-components 0.231.0 → 0.231.2

package/src/CountrySelector.ts

@@ -427,28 +427,23 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._dropdown.onOpen(this.getInput());
     this._search.focus();
     this._search.value = key;
-    this.onValueSearch(key);
+    this.fireChangeSearch();
   }
 
   handleInputMouseDown(e: CustomEvent): void {
     e.preventDefault();
   }
 
-  onValueSearch(searchValue: string) {
-    this._shouldFilterItems = true;
-    this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
-    this.fireEvent("change-search", { value: searchValue });
-  }
-
   handleTriggerClick() {
     this._dropdown.open = !this._dropdown.open;
   }
 
   handleValueSearch(e:CustomEvent) {
-    this.onValueSearch(e.detail.value as string);
+    this.onSearch(e);
+    this.fireChangeSearch();
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onSubmitSearch();
   }
 
@@ -491,6 +486,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
+  fireChangeSearch(): void {
+    this.fireEvent("change-search", { value: this._search.value });
+  }
+
   getSearch(): Search {
     return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }

package/src/MastheadCountrySelector.hbs

@@ -1,8 +1,6 @@
 <div class="udex-masthead-country-selector" @keydown="{{handleKeyDown}}">
     {{#if _isActiveRegionOpen}}
-        <span class="udex-masthead-country-selector__title">
-            {{countryTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{countryTitle}}</span>
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
@@ -25,9 +23,10 @@
             non-interactive-submit-button
             show-submit-button>
         </udex-search>
+        <span aria-live="polite" aria-atomic="true" class="hidden">{{_accSearchResultInfo}}</span>
         <ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">
             {{#each _activeCountries}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                         @click="{{../fireEventCountryItemClick}}"
@@ -41,19 +40,16 @@
             {{/each}}
         </ul>
     {{else}}
-        <span class="udex-masthead-country-selector__title">
-            {{regionTitle}}
-        </span>
+        <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
         <ul class="udex-masthead-country-selector__list" role="menu">
             {{#each regionsData}}
-                <li role="menuitem">
+                <li role="none">
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
                         aria-has-popup="true"
-                        accessible-role="button"
                         type="Button"
                         is-nav-item
                         has-border

package/src/MastheadCountrySelector.ts

@@ -4,6 +4,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import {
@@ -15,6 +17,7 @@ import MastheadCountrySelectorTemplate from "./generated/templates/MastheadCount
 import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -227,8 +230,15 @@ class UDExMastheadCountrySelector extends UI5Element {
   _activeCountries!: Array<Country>;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusRegionByIndex!: boolean;
+  _accSearchResultInfo?: string;
   _activeRegionIndex!: number;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExMastheadCountrySelector.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  }
+
   constructor() {
     super();
     this._activeCountries = [];
@@ -325,6 +335,10 @@ class UDExMastheadCountrySelector extends UI5Element {
       this.setActiveCountries(this._activeRegion.countries.filter(country => country.displayTitle.toLowerCase().includes(searchTerm)));
     }
 
+    this._accSearchResultInfo = this._activeCountries.length
+      ? `${this._activeCountries.length} ${this.resultReturnedText}`
+      : this.noMatchesFoundText;
+
     this._shouldFocusBackBtn = false;
     this.fireEvent<SearchEventDetail>("country-selector-search", {
       value: e.detail.value,
@@ -502,6 +516,14 @@ class UDExMastheadCountrySelector extends UI5Element {
     });
   }
 
+  get noMatchesFoundText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+  }
+
   get items(): Array<UDExMastheadMenuItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExMastheadMenuItem>(".udex-masthead-country-selector__item");
     return items ? Array.from(items) : [];

package/src/MastheadMenu.hbs

@@ -40,7 +40,9 @@
         category="{{this.category}}">
         {{#each this.items}}
             <li>
-                {{#if this.url}}
+                {{#if this.isDivider}}
+                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else}}
                     <udex-masthead-menu-item
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
@@ -48,8 +50,6 @@
                         url="{{this.url}}"
                         label="{{this.title}}">
                     </udex-masthead-menu-item>
-                {{else}}
-                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
                 {{/if}}
             </li>
         {{/each}}

package/src/MastheadMenu.ts

@@ -23,6 +23,7 @@ export type Item = {
   title: string;
   url: string;
   externalLink: boolean;
+  isDivider?: boolean;
 };
 
 export type SubMenuLinkItem = {
@@ -199,10 +200,16 @@ class UDExMastheadMenu extends UI5Element {
   get itemsList(): Array<MenuItem> {
     let id = 1;
     const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);
+
     return parsedItems.map((mainItem: MenuItem) => {
-      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
-        category.categoryId = `${id++}`;
-        return category;
+      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
+        subMenu.categoryId = `${id++}`;
+        subMenu.items = subMenu.items.map((item: Item) => ({
+          ...item,
+          ...(item.title === "-" && { isDivider: true }),
+        }));
+
+        return subMenu;
       });
 
       return mainItem;

package/src/MastheadMobileMenu.hbs

@@ -122,33 +122,46 @@
         </li>
     {{/if}}
     {{#each _categories}}
-        {{#if this.category}}
-            <li class="udex-masthead-mobile-menu__list-item" role="none">
-                <udex-masthead-menu-item
-                    @click="{{../handleMenuCategoryClick}}"
-                    url="{{this.url}}"
-                    id="{{@index}}"
-                    label="{{this.category}}"
-                    aria-has-popup="true"
-                    type="Button"
-                    second-level
-                    second-level-btn
-                    has-border
-                    icon-end>
-                </udex-masthead-menu-item>
-            </li>
-        {{else}}
-            {{#each this.items}}
+        {{#if this.items}}
+            {{#if this.category}}
                 <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
-                        @click="{{../handleMobileItemEvent}}"
-                        url="{{this.url}}"
-                        label="{{this.title}}"
+                        part="menu-item"
+                        @click="{{../handleMenuCategoryClick}}"
+                        id="{{@index}}"
+                        label="{{this.category}}"
+                        aria-has-popup="true"
+                        type="Button"
+                        second-level-btn
                         second-level
-                        has-border>
+                        has-border
+                        icon-end>
                     </udex-masthead-menu-item>
                 </li>
-            {{/each}}
+            {{else}}
+                {{#each this.items}}
+                    <li class="udex-masthead-mobile-menu__list-item" role="none">
+                        <udex-masthead-menu-item
+                            part="menu-item"
+                            @click="{{../handleMobileItemEvent}}"
+                            url="{{this.url}}"
+                            label="{{this.title}}"
+                            second-level
+                            has-border>
+                        </udex-masthead-menu-item>
+                    </li>
+                {{/each}}
+            {{/if}}
+        {{else}}
+            <udex-masthead-menu-item
+                id="{{@index}}"
+                @click="{{../handleMobileItemEvent}}"
+                label="{{this.category}}"
+                part="menu-item"
+                type="Button"
+                second-level
+                has-border>
+            </udex-masthead-menu-item>
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/MastheadMobileMenu.ts

@@ -18,6 +18,9 @@ import AnalyticsName from "./types/AnalyticsName.js";
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
 
+const INDEX_OFFSET_WITH_OVERVIEW = 2;
+const INDEX_OFFSET_WITHOUT_OVERVIEW = 1;
+
 export type MobileItemClickEventDetail = {
   category?: string,
   isBack: boolean,
@@ -202,7 +205,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   handleBackToCategories(e: Event) {
     e.stopPropagation();
     this.showCategories();
-    this.setFocusItemByIndex(this._category.index + 1);
+    this.setFocusItemByIndex(this._category.index);
     this.fireMobileItemEvent(e);
   }
 
@@ -311,7 +314,7 @@ class UDExMastheadMobileMenu extends UI5Element {
 
     if (target.hasAttribute("is-back-to-categories")) {
       this.showCategories();
-      this.setFocusItemByIndex(this._category.index + 1);
+      this.setFocusItemByIndex(this._category.index);
       this.fireMobileItemEvent(e);
     }
 
@@ -431,8 +434,9 @@ class UDExMastheadMobileMenu extends UI5Element {
 
   openCategoryItems(e: Event) {
     const item = e.target as UDExMastheadMenuItem;
+    const indexOffset = this._clickedItem.href ? INDEX_OFFSET_WITH_OVERVIEW : INDEX_OFFSET_WITHOUT_OVERVIEW;
     const index = Number(item.getAttribute("id"));
-    this._category = { ...this._categories[index], index };
+    this._category = { ...this._categories[index], index: index + indexOffset };
     this._showCategories = false;
     this._showCategoryItems = true;
   }

package/src/MastheadShell.hbs

@@ -47,7 +47,7 @@
         {{/if}}
     {{/if}}
 
-    <div class="udex-masthead-shell__right-menu">
+    <div class="{{rightMenuClass}}">
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item
                 @ui5-item-click="{{handleOpenMobileMenu}}"
@@ -69,10 +69,10 @@
         {{#if hasSearch}}
             <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
                 <udex-masthead-item
-                    class="udex-masthead-shell__search-btn"
-                    icon="search"
-                    @click="{{handleSearchClick}}"
-                    accessible-name="search">
+                  class="udex-masthead-shell__search-btn"
+                  icon="search"
+                  @click="{{handleSearchClick}}"
+                  accessible-name="search">
                 </udex-masthead-item>
             </div>
         {{/if}}

package/src/MastheadShell.ts

@@ -47,6 +47,17 @@ export const AnalyticsNameEventDetail = {
   },
 };
 
+export enum UDExMastheadVariable {
+  mobileMenuHeight = "--udex-masthead-shell-mobile-menu-height",
+  itemButtonIconSize = "--udex-masthead-item-button-icon-size",
+  itemArrowIconSize = "--udex-masthead-item-arrow-icon-size",
+  rightMenuPadding = "--udex-masthead-right-menu-padding",
+  exploreMargin = "--udex-masthead-shell-explore-margin",
+  itemIconGap = "--udex-masthead-shell-item-icon-gap",
+  mastheadHeight = "--udex-masthead-shell-height",
+  itemGap = "--udex-masthead-shell-item-gap",
+}
+
 /**
  * @class
  *
@@ -367,6 +378,9 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     _closeBtnClicked!: boolean;
 
+  @property({ type: Boolean })
+    _isVisible!: boolean;
+
   _searchOpener!: UDExMastheadItem | null | undefined;
   _mobileMenu!: UDExMastheadMobileMenu | null | undefined;
   _handleResizeBound: ResizeObserverCallback;
@@ -402,6 +416,8 @@ class UDExMastheadShell extends UI5Element {
     if (this._closeBtnClicked) {
       this.focusSearchBtn();
     }
+
+    this.updateVisibility();
   }
 
   onEnterDOM(): void {
@@ -451,6 +467,8 @@ class UDExMastheadShell extends UI5Element {
       } else {
         this.removeMobileMode();
       }
+
+      this._isVisible = true;
     }
   }
 
@@ -642,26 +660,42 @@ class UDExMastheadShell extends UI5Element {
     const itemsIcon = [...this.shadowRoot!.querySelectorAll<HTMLDivElement>(".udex-masthead-shell__item_icon")];
     const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
     const itemIconGaps = itemsIcon.length * this.getItemIconGap();
-    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(this.exploreSAP[0]) : 0;
+    const exploreItem = this.exploreSAP[0];
+    const hasArrowIcon = exploreItem?.hasArrowDown && !exploreItem?.hideArrowIcon;
+    const exploreItemIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
+    const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(exploreItem) : 0;
     const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
-    return exploreSAPWidth + itemIconWidths + rightMenuGaps;
+    return exploreSAPWidth + exploreItemIconWidth + itemIconWidths + rightMenuGaps;
   }
 
-  getItemIconWidth(): number {
+  getItemIconSize(cssVariableName: string): number {
     const item = this.querySelector("[udex-masthead-item]");
 
-    if (!item) { return 0; }
+    if (!item) {
+      return 0;
+    }
 
     const style = window.getComputedStyle(item);
-    const itemIconWidthVar = style.getPropertyValue("--udex-masthead-item-button-icon-size");
-    return parseInt(itemIconWidthVar);
+    const iconSizeVar = style.getPropertyValue(cssVariableName);
+    return parseInt(iconSizeVar);
+  }
+
+  getItemIconWidth(): number {
+    return this.getItemIconSize(UDExMastheadVariable.itemButtonIconSize);
+  }
+
+  getItemArrowIconWidth(): number {
+    return this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
   }
 
   getMainMenuWidth(): number {
     const mainItems = this.getSlottedNodes("menuItems");
-    const gapItemVar = this.getRootVar("--udex-masthead-shell-item-gap");
+    const gapItemVar = this.getRootVar(UDExMastheadVariable.itemGap);
     return mainItems.reduce((accumulatedWidth, item, index) => {
-      return accumulatedWidth + this.getItemWidth(item as UDExMastheadItem) + (index && parseInt(gapItemVar));
+      const mainItem = item as UDExMastheadItem;
+      const hasArrowIcon = mainItem.hasArrowDown && !mainItem.hideArrowIcon;
+      const arrowIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
+      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
     }, 0);
   }
 
@@ -681,17 +715,17 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemIconGap(): number {
-    const gapIconItemVar = this.getRootVar("--udex-masthead-shell-item-icon-gap");
+    const gapIconItemVar = this.getRootVar(UDExMastheadVariable.itemIconGap);
     return parseInt(gapIconItemVar);
   }
 
   getExploreSapBtnGap(): number {
-    const exploreSapBtnGapVar = this.getRootVar("--udex-masthead-shell-explore-margin");
+    const exploreSapBtnGapVar = this.getRootVar(UDExMastheadVariable.exploreMargin);
     return this.hasExploreSAP ? parseInt(exploreSapBtnGapVar) : 0;
   }
 
   getRightMenuGap(): number {
-    const rightMenuGapVar = this.getRootVar("--udex-masthead-right-menu-padding");
+    const rightMenuGapVar = this.getRootVar(UDExMastheadVariable.rightMenuPadding);
     return parseInt(rightMenuGapVar);
   }
 
@@ -724,9 +758,9 @@ class UDExMastheadShell extends UI5Element {
   }
 
   setMobileMenuHeight(): void {
-    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue("--udex-masthead-shell-height"));
+    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue(UDExMastheadVariable.mastheadHeight));
     const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
-    this.style.setProperty("--udex-masthead-shell-mobile-menu-height", mobileMenuHeight);
+    this.style.setProperty(UDExMastheadVariable.mobileMenuHeight, mobileMenuHeight);
   }
 
   removeMobileMode(): void {
@@ -736,6 +770,10 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  updateVisibility(): void {
+    this.style.opacity = this.isVisible ? "1" : "0";
+  }
+
   /**
    * Close the search panel.
    * @public
@@ -911,7 +949,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get isMainMenuVisible(): boolean {
-    return !this.showSearchByDefault && !this._isSearchOpened;
+    return !this.showSearchByDefault && !this._isSearchOpened && !!this.menuItems.length;
   }
 
   get isSearchVisible(): boolean {
@@ -925,6 +963,20 @@ class UDExMastheadShell extends UI5Element {
   get mainNavigationAriaLabel(): string {
     return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
   }
+
+  get isVisible(): boolean {
+    return this.isMobileMenuMode || !this.menuItems.length || this._isVisible;
+  }
+
+  get isSimpleExploreMode(): boolean {
+    return !this.hasSearch && !this.hasProfile && !this.hasCart && !this.hasSupport && !this.hasCountrySelector;
+  }
+
+  get rightMenuClass(): string {
+    const root = "udex-masthead-shell__right-menu";
+    const simpleExploreClass = this.isSimpleExploreMode ? `${root}_simple-explore` : "";
+    return `${root} ${simpleExploreClass}`.trim();
+  }
 }
 
 UDExMastheadShell.define();

package/src/Search.ts

@@ -19,7 +19,6 @@ import {
   isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import List from "./List.js";
 import ControlButton from "./ControlButton.js";
@@ -42,6 +41,8 @@ import {
   OF,
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
+import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import UDExButton from "./Button.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
 import SearchSuggestionsTemplate from "./generated/templates/SearchSuggestionsTemplate.lit.js";
@@ -49,7 +50,6 @@ import SearchSuggestionsTemplate from "./generated/templates/SearchSuggestionsTe
 // Styles
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchSuggestionsCss from "./generated/themes/SearchSuggestions.css.js";
-import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
 
 const SearchIcon: string = "sap-icon://search";
 
@@ -122,7 +122,7 @@ export type PopoverPlacement = "Bottom" | "Top";
   staticAreaTemplate: SearchSuggestionsTemplate,
   get dependencies() {
     const Suggestion = getFeature<typeof SearchInputSuggestion>("SearchInputSuggestion");
-    return ([ControlButton, Button, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
+    return ([ControlButton, UDExButton, Icon, List, Popover] as Array<typeof UI5Element>).concat(Suggestion ? [...Suggestion.dependencies] : []);
   },
 })
 

package/src/SearchableListBase.hbs

@@ -8,6 +8,12 @@
         non-interactive-submit-button
         show-submit-button>
     </udex-search>
+    <span
+        aria-live="polite"
+        aria-atomic="true"
+        class="hidden">
+        {{_accSearchResultInfo}}
+    </span>
 {{/if}}
 {{#if isListEmpty}}
     <div class="udex-no-result"><span>{{getNoResultText}}&lrm;</span></div>

package/src/SearchableListBase.ts

@@ -15,7 +15,7 @@ import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { ListMode } from "./types/List.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";
 import { ProcessedItem, SHOW_SEARCH_AFTER_COUNT } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND } from "./generated/i18n/i18n-defaults.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
 
 /**
  * @class
@@ -177,6 +177,7 @@ class UDExSearchableListBase extends UI5Element {
     _filteredItems!: Array<ProcessedItem>;
 
   _shouldFilterItems?: boolean;
+  _accSearchResultInfo?: string;
 
   static i18nBundle: I18nBundle;
 
@@ -274,6 +275,8 @@ class UDExSearchableListBase extends UI5Element {
     const searchValue: string = e.detail.value;
     this._shouldFilterItems = true;
     this._filteredItems = this.filterItems(this.getProcessedItems(), searchValue);
+    const items = this.getFlattenItemsArray(this._filteredItems);
+    this._accSearchResultInfo = items.length ? `${items.length} ${this.resultReturnedText}` : this.noMatchesFoundText;
     this.fireEvent("change-search", { value: searchValue });
   }
 
@@ -430,6 +433,18 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  getFlattenItemsArray(array: Array<ProcessedItem>): (ProcessedItem | UDExListItemBase)[] {
+    return array.flatMap(item => {
+      if (item.isGroup) {
+        return [
+          item,
+          ...item.groupItems.filter(groupItem => !groupItem.disabled),
+        ];
+      }
+      return item.item.disabled ? [] : [item.item];
+    });
+  }
+
   getCurrentIndex(item: Element): number {
     return this.getDomListItems().indexOf(item);
   }
@@ -472,7 +487,15 @@ class UDExSearchableListBase extends UI5Element {
 
   get getNoResultText(): string {
     const hasTextProperty = this.noResultText !== "undefined" && this.noResultText.length > 0;
-    return hasTextProperty ? this.noResultText : UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+    return hasTextProperty ? this.noResultText : this.noMatchesFoundText;
+  }
+
+  get noMatchesFoundText(): string {
+    return UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+  }
+
+  get resultReturnedText(): string {
+    return UDExSearchableListBase.i18nBundle.getText(RESULT_RETURNED);
   }
 
   get isListEmpty(): boolean {

package/src/SelectBox.hbs

@@ -2,6 +2,7 @@
     <div class="udex-text-field__container">
         <div class="udex-text-field__wrap">
             <div
+                role="combobox"
                 @click="{{getHandleSingleSelectOpen}}"
                 class="udex-text-field__input"
                 @ui5-tag-icon-click="{{handleRemoveTag}}"