@sapudex/web-components 2.29.0 → 2.31.0

package/src/ListItemBase.ts

@@ -4,10 +4,16 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import translate from "./utils/translate.js";
+import { COLLAPSE, EXPAND } from "./generated/i18n/i18n-defaults.js";
 
 export type UDExListItemBaseEvents = {
   "first-icon-click": UDExListItemBaseEventDetail,
   "second-icon-click": UDExListItemBaseEventDetail,
+  "accordion-icon-click": UDExListItemBaseAccordionClickEventDetail,
 }
 
 type UDExListItemBaseEventDetail = {
@@ -15,6 +21,10 @@ type UDExListItemBaseEventDetail = {
   item: HTMLElement,
 }
 
+type UDExListItemBaseAccordionClickEventDetail = {
+  collapsed: boolean;
+}
+
 /**
  * @class
  *
@@ -49,6 +59,14 @@ type UDExListItemBaseEventDetail = {
  */
 @event("second-icon-click", { bubbles: true })
 
+/**
+ * Triggered when the user clicks on an accordion item.
+ * @public
+ * @param { string } name
+ * @param { boolean } expanded
+ */
+@event("accordion-icon-click", { bubbles: true })
+
 class UDExListItemBase extends UI5Element {
   eventDetails!: UDExListItemBaseEvents;
 
@@ -148,6 +166,33 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _icon: string = "";
 
+  /**
+   * Defines if grouping header can collapse/expand child elements.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    collapsible!: boolean;
+
+  /**
+   * Defines if collapsible grouping header is collapsed or expanded
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: Boolean })
+    collapsed!: boolean;
+
+  /**
+   * Defines if item is part of filtered list
+   *
+   * @default undefined
+   * @private
+   */
+  @property({ type: Boolean })
+    _filtered!: boolean;
+
   /**
    * Defines the tab index of the component.
    *
@@ -157,6 +202,45 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _tabIndex: string = "";
 
+  _resizeHandler: () => void;
+  contentElement: HTMLElement | null | undefined;
+
+  constructor() {
+    super();
+    this._resizeHandler = this._onResize.bind(this);
+    this.contentElement = null;
+  }
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  onEnterDOM() {
+    if (!this.collapsible) {
+      return;
+    }
+    this.contentElement = this.shadowRoot?.querySelector(".udex-list__group-list__content") || this.nextElementSibling as HTMLElement;
+    if (this.contentElement) {
+      ResizeHandler.register(this.contentElement, this._resizeHandler);
+      this.setContentHeight();
+    }
+  }
+
+  onExitDOM(): void {
+    if (this.contentElement && this.collapsible) {
+      ResizeHandler.deregister(this.contentElement, this._resizeHandler);
+    }
+  }
+
+  setContentHeight() {
+    this.style.setProperty("--udex-list-content-max-height", `${this.contentElement?.scrollHeight || 0}px`);
+  }
+
+  _onResize(): void {
+    if (this.contentElement && this.collapsible) {
+      this.setContentHeight();
+    }
+  }
+
   _fireIconClickEvent(e: PointerEvent): void {
     const target = e.target as HTMLElement;
     const slot = target.getAttribute("slot");
@@ -173,6 +257,16 @@ class UDExListItemBase extends UI5Element {
     }
   }
 
+  handleCollapseIconMouseDown(e: MouseEvent) {
+    e.stopPropagation();
+  }
+
+  handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.fireDecoratorEvent("accordion-icon-click", { collapsed: this.collapsed });
+  }
+
   get _effectiveTabIndex(): string {
     if (this.disabled) {
       return "-1";
@@ -204,18 +298,22 @@ class UDExListItemBase extends UI5Element {
     return this.modeMultiSelect || this.modeRadioGroup;
   }
 
-  get typeNumber(): boolean {
-    return this.type === UDExListStyleType.Number;
+  get typeIcon(): boolean {
+    return this.type === UDExListStyleType.Icon;
   }
 
-  get typeCircle(): boolean {
-    return this.type === UDExListStyleType.Circle;
+  get ariaControlsId(): string {
+    return `udex-list-${this._id}__group-content`;
   }
 
-  get typeIcon(): boolean {
-    return this.type === UDExListStyleType.Icon;
+  get expandButtonAccessibleName(): string {
+    return this.collapsed ? translate(UDExListItemBase, EXPAND) : translate(UDExListItemBase, COLLAPSE);
+  }
+
+  get expanded(): boolean {
+    return !this.collapsed;
   }
 }
 
 export default UDExListItemBase;
-export type { UDExListItemBaseEventDetail };
+export type { UDExListItemBaseEventDetail, UDExListItemBaseAccordionClickEventDetail };

package/src/MastheadCountrySelector.hbs

@@ -4,6 +4,8 @@
         {{#unless this.isSingleMode}}
             <udex-masthead-menu-item
                 class="udex-masthead-country-selector__region-back-item"
+                accessible-role="button"
+                _accessible-Name="{{backToRegionListAccessibleName}}"
                 @click="{{backToRegions}}"
                 label="{{_activeRegion?.title}}"
                 type="Button"
@@ -48,15 +50,16 @@
         </div>
     {{else}}
         <span class="udex-masthead-country-selector__title">{{regionTitle}}</span>
-        <ul class="udex-masthead-country-selector__list" role="menu">
+        <ul class="udex-masthead-country-selector__list">
             {{#each regionsData}}
-                <li role="none">
+                <li>
                     <udex-masthead-menu-item
                         id="{{this._id}}"
                         @click="{{../handleRegionClick}}"
                         index="{{@index}}"
+                        accessible-role="button"
                         class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         type="Button"
                         part="menu-item"
                         is-nav-item

package/src/MastheadCountrySelector.ts

@@ -9,7 +9,7 @@ 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 {
-  isUp, isDown, isRight, isLeft, isEnd, isHome,
+  isEnd, isHome, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import UDExSearch, { Mode as UDExSearchMode } from "./Search.js";
@@ -17,7 +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";
+import { NO_MATCHES_FOUND, RESULT_RETURNED, BACK_TO_REGION_LIST } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -217,14 +217,6 @@ class UDExMastheadCountrySelector extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
-  /**
-   * Defines direction of the component.
-   *
-   * @private
-   */
-  @property({ type: String })
-    _direction!: string;
-
   @property({ type: Boolean, noAttribute: true })
     _requestRender = false;
 
@@ -250,7 +242,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._mastheadShell = this.mastheadShell;
     this.handleFocusItem();
     this.setTabIndexForItems();
-    this.handleDirection();
     this.handleOutsideClick();
 
     if (this.isSingleMode) {
@@ -283,55 +274,23 @@ class UDExMastheadCountrySelector extends UI5Element {
   handleKeyDown(e: KeyboardEvent): void {
     const item = e.target as UDExMastheadMenuItem;
 
-    if (item.hasAttribute("is-back")) {
-      this.handleBackKeyboard(e);
-      return;
-    }
-
     if (item.hasAttribute("is-nav-item")) {
-      this.handleUpArrow(e);
-      this.handleDownArrow(e);
-      this.handleRightArrow(e);
-      this.handleLeftArrow(e);
+      const isFirstItem = item === this.items[0];
+      const isLastItem = item === this.items[this.items.length - 1];
+
+      if (isTabNext(e) && !isLastItem) {
+        e.preventDefault();
+        this.focusNextItem(item);
+      }
+      if (isTabPrevious(e) && !isFirstItem) {
+        e.preventDefault();
+        this.focusPreviousItem(item);
+      }
       this.handleHomeKey(e);
       this.handleEndKey(e);
     }
   }
 
-  handleBackKeyboard(e: KeyboardEvent): void {
-    if ((isLeft(e) && !this.isRtlDirection) || (isRight(e) && this.isRtlDirection)) {
-      this.backToRegions();
-    }
-  }
-
-  handleRightArrow(e: KeyboardEvent): void {
-    if (isRight(e) && !this.isRtlDirection) {
-      this.openCountriesByRegion(e);
-      this.fireEventRegionItemClick(e);
-    }
-  }
-
-  handleLeftArrow(e: KeyboardEvent): void {
-    if (isLeft(e) && this.isRtlDirection) {
-      this.openCountriesByRegion(e);
-      this.fireEventRegionItemClick(e);
-    }
-  }
-
-  handleUpArrow(e: KeyboardEvent): void {
-    if (isUp(e)) {
-      e.preventDefault();
-      this.focusPreviousItem(e);
-    }
-  }
-
-  handleDownArrow(e: KeyboardEvent): void {
-    if (isDown(e)) {
-      e.preventDefault();
-      this.focusNextItem(e);
-    }
-  }
-
   handleSearch(e: CustomEvent): void {
     const searchTerm = e.detail.value.toLowerCase().trim() as string;
 
@@ -377,17 +336,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._requestRender = !this._requestRender;
   }
 
-  handleDirection() {
-    const directionStyles: string = window
-      .getComputedStyle(this)
-      .getPropertyValue("direction");
-    if (!directionStyles) {
-      this._direction = "ltr";
-    } else {
-      this._direction = directionStyles;
-    }
-  }
-
   handleOutsideClick(): void {
     document.addEventListener("mousedown", (e: Event): void => {
       if (e.target !== this && !this.isMobile) {
@@ -415,21 +363,9 @@ class UDExMastheadCountrySelector extends UI5Element {
     this._shouldFocusRegionByIndex = true;
   }
 
-  focusPreviousItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const prevIndex = currentIndex - 1 < 0 ? lastItemIndex : currentIndex - 1;
-    const prevItem = this.items[prevIndex];
-    this.items[currentIndex]._tabIndex = "-1";
-    prevItem._tabIndex = "0";
-    prevItem.scrollIntoView({ block: "center" });
-    prevItem.focus({ preventScroll: true });
-  }
-
-  focusNextItem(e: KeyboardEvent): void {
-    const currentIndex = (e.target as UDExMastheadMenuItem).index;
-    const lastItemIndex = this.items.length - 1;
-    const nextIndex = currentIndex + 1 > lastItemIndex ? 0 : currentIndex + 1;
+  focusNextItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = currentItem.index;
+    const nextIndex = currentIndex + 1;
     const nextItem = this.items[nextIndex];
     this.items[currentIndex]._tabIndex = "-1";
     nextItem._tabIndex = "0";
@@ -437,6 +373,16 @@ class UDExMastheadCountrySelector extends UI5Element {
     nextItem.focus({ preventScroll: true });
   }
 
+  focusPreviousItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = currentItem.index;
+    const prevIndex = currentIndex - 1;
+    const prevItem = this.items[prevIndex];
+    this.items[currentIndex]._tabIndex = "-1";
+    prevItem._tabIndex = "0";
+    prevItem.scrollIntoView({ block: "center" });
+    prevItem.focus({ preventScroll: true });
+  }
+
   focusLastItem(e: KeyboardEvent): void {
     const currentIndex = (e.target as UDExMastheadMenuItem).index;
     const lastItemIndex = this.items.length - 1;
@@ -564,7 +510,7 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   handleCountryListShadowVisible(): void {
-    if (this.scrollBottomCountriesList === 0) {
+    if (this.scrollBottomCountriesList <= 1) {
       this.removeScrollableClassInCountryList();
     } else {
       this.addScrollableClassToCountryList();
@@ -623,10 +569,6 @@ class UDExMastheadCountrySelector extends UI5Element {
     }));
   }
 
-  get isRtlDirection(): boolean {
-    return this._direction === "rtl";
-  }
-
   get homeSearchMode(): UDExSearchMode {
     return UDExSearchMode.HomeSearch;
   }
@@ -642,6 +584,10 @@ class UDExMastheadCountrySelector extends UI5Element {
   get mastheadShell(): UDExMastheadShell {
     return document.querySelector<UDExMastheadShell>("[udex-masthead-shell]")!;
   }
+
+  get backToRegionListAccessibleName(): string {
+    return `${this._activeRegion?.title} ${translate(UDExMastheadCountrySelector, BACK_TO_REGION_LIST)}`;
+  }
 }
 
 UDExMastheadCountrySelector.define();

package/src/MastheadItem.hbs

@@ -21,23 +21,21 @@
         </span>
     {{/if}}
 {{else if isProfileBtn}}
-    <span
+    <button
         id="{{this._id}}"
-        class="udex-masthead-item__btn {{additionalClass}}"
-        aria-expanded="{{selected}}"
+        class="udex-masthead-item__btn udex-masthead-item__profile-btn {{additionalClass}}"
+        aria-expanded="{{buttonAriaExpanded}}"
         aria-describedby="{{ariaDescribedBy}}"
         aria-controls="{{this._id}}_dropdown"
-        aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{handleItemClick}}"
+        @click-default="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}">
         {{> content}}
-    </span>
-    {{#if isDropdownOpened}}
-        {{> dropdown}}
-    {{/if}}
+    </button>
+    {{> dropdown}}
 {{else}}
     <button
         role="{{accessibleRoleName}}"
@@ -46,7 +44,6 @@
         aria-expanded="{{buttonAriaExpanded}}"
         aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"
-        aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @mousedown="{{handleMouseDown}}"
@@ -54,9 +51,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
-    {{#if isDropdownOpened}}
-        {{> dropdown}}
-    {{/if}}
+    {{> dropdown}}
 {{/if}}
 
 {{#*inline "content"}}
@@ -69,14 +64,23 @@
             mode="Decorative">
         </ui5-icon>
     {{else if image}}
-        <div class="udex-masthead-item__image-wrap">
-            <img
-                class="udex-masthead-item__image"
-                id="{{this._id}}_image-alt"
-                src="{{image}}"
-                aria-hidden="{{isCountrySelectorBtn}}"
-                alt="{{imageAlt}}"/>
-        </div>
+        {{#if imageLoadError}}
+            <ui5-icon
+                class="udex-masthead-item__icon"
+                name="sap-icon://world"
+                mode="Decorative">
+            </ui5-icon>
+        {{else}}
+            <div class="udex-masthead-item__image-wrap">
+                <img
+                    class="udex-masthead-item__image"
+                    id="{{this._id}}_image-alt"
+                    src="{{image}}"
+                    aria-hidden="{{isCountrySelectorBtn}}"
+                    alt="{{imageAlt}}"
+                    @error="{{handleImageError}}"/>
+            </div>
+        {{/if}}
         {{#if imageAlt}}
             <span
                 id="image-desc"
@@ -99,13 +103,17 @@
 {{/inline}}
 
 {{#*inline "dropdown"}}
+    {{#if isDropdownOpened}}
     <div
         id="{{this._id}}_dropdown"
         class="udex-masthead-item__dropdown"
         @keydown="{{handleKeyDown}}"
         @focusout="{{handleFocusout}}">
-        <div class="udex-masthead-item__dropdown-holder">
-            <slot name="dropdown"></slot>
-        </div>
+          <div class="udex-masthead-item__dropdown-holder">
+              <slot name="dropdown"></slot>
+          </div>
     </div>
+    {{else}}
+      <div id="{{this._id}}_dropdown"></div>
+    {{/if}}
 {{/inline}}

package/src/MastheadItem.ts

@@ -10,13 +10,13 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/world.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
@@ -315,6 +315,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _isMenuCloseBtn?: boolean;
 
+  /**
+   * Defines if the image failed to load
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _imageLoadError = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -339,10 +347,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
-    if (this.shouldFocusFirstElement) {
-      this.applyFocusToFirstElement();
-    }
-
     this.handleOutsideClick();
   }
 
@@ -432,6 +436,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  handleImageError(): void {
+    this._imageLoadError = true;
+  }
+
   fireDropdownEvents(): void {
     if (this.hasDropdownSlot) {
       const { Open, Close } = UDExMastheadDropdownItemAction;
@@ -473,6 +481,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  recalculateDropdownPosition(): void {
+    const dropdown = this.dropdownHolder;
+    if (dropdown) {
+      dropdown.style.marginInlineStart = "";
+      this.setDropdownInsetStart();
+    }
+  }
+
   calculateMarginInlineStart(rect: DOMRect): number | null {
     const { left, right } = rect;
 
@@ -511,13 +527,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
-  async applyFocusToFirstElement(): Promise<void> {
-    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
-    if (focusedElement) {
-      focusedElement.focus();
-    }
-  }
-
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -607,10 +616,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
-  get shouldFocusFirstElement(): boolean {
-    return this.isDropdownOpened && !this._preventFocusOut;
-  }
-
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
@@ -688,9 +693,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get buttonAriaExpanded(): boolean | undefined {
-    if (!this.isSearchBtn) {
-      return this.selected;
+    if (!this.hasDropdownSlot) {
+      return undefined;
     }
+    return this.selected || false;
+  }
+
+  get imageLoadError(): boolean {
+    return this._imageLoadError && this.isCountrySelectorBtn;
   }
 }
 

package/src/MastheadMenu.ts

@@ -9,7 +9,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
 import {
-  isUp, isDown, isTabNext, isTabPrevious, isHome, isEnd,
+  isTabNext, isTabPrevious, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
@@ -139,11 +139,11 @@ class UDExMastheadMenu extends UI5Element {
     const isFirstItem = e.target === this.links[0];
     const isLastItem = e.target === this.links[this.links.length - 1];
 
-    if (isUp(e) || (isTabPrevious(e) && !isFirstItem)) {
-      this.handleUpArrow(e);
+    if (isTabPrevious(e) && !isFirstItem) {
+      this.handlePreviousItemFocus(e);
     }
-    if (isDown(e) || (isTabNext(e) && !isLastItem)) {
-      this.handleDownArrow(e);
+    if (isTabNext(e) && !isLastItem) {
+      this.handleNextItemFocus(e);
     }
     if (isHome(e)) {
       this.handleHomeKey(e);
@@ -165,13 +165,13 @@ class UDExMastheadMenu extends UI5Element {
     lastItem.focus();
   }
 
-  handleUpArrow(e: KeyboardEvent): void {
+  handlePreviousItemFocus(e: KeyboardEvent): void {
     e.preventDefault();
     const currentItem = e.target as UDExMastheadMenuItem;
     this.focusPreviousItem(currentItem);
   }
 
-  handleDownArrow(e: KeyboardEvent): void {
+  handleNextItemFocus(e: KeyboardEvent): void {
     e.preventDefault();
     const currentItem = e.target as UDExMastheadMenuItem;
     this.focusNextItem(currentItem);
@@ -239,10 +239,11 @@ class UDExMastheadMenu extends UI5Element {
     return parsedItems.map((mainItem: MenuItem) => {
       mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
         subMenu.categoryId = `${id++}`;
-        subMenu.items = subMenu.items.map((item: Item) => ({
+
+        subMenu.items = subMenu.items ? subMenu.items.map((item: Item) => ({
           ...item,
           ...(item.title === "-" && { isDivider: true }),
-        }));
+        })) : [];
 
         return subMenu;
       });

package/src/MastheadMenuItem.hbs

@@ -38,6 +38,7 @@
     {{#if isButtonType}}
         <button
             _id="{{id}}"
+            aria-label="{{_accessibleName}}"
             class="udex-masthead-menu-item {{rootClass}}"
             part="menu-item-button"
             aria-haspopup="{{ariaHasPopup}}"

package/src/MastheadMenuItem.ts

@@ -162,6 +162,15 @@ class UDExMastheadMenuItem extends UI5Element {
   @property()
     target: `${UDExTarget}` = UDExTarget._self;
 
+  /**
+   * Defines the accessible name of the item.
+   *
+   * @default undefined
+   * @private
+   */
+  @property()
+    _accessibleName?: string;
+
   /**
    * Defines the tabindex attribute for the item.
    *