@sapudex/web-components 2.30.0 → 2.31.0

package/src/BreadcrumbsTemplate.tsx

@@ -12,7 +12,7 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
       <nav
         class={`${this._rootClass} ui5-breadcrumbs-root`}
         aria-label={this._breadcrumbsAccessibleNameText}>
-        <ol onFocusIn={this._onfocusin}>
+        <ol>
           <li class={`${this._rootClass}__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper`}>
             <UDExLink
               id={`udex-${this._id}-breadcrumbs__opener`}

package/src/List.ts

@@ -241,7 +241,7 @@ class UDExList extends UI5Element {
     const lastItemIndex = items.length - 1;
     const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
     const isHeaderItem = items[previousSelectIndex].isGroup;
-    const nonInteractiveHeader = items[previousSelectIndex].nonInteractive;
+    const nonInteractiveHeader = items[previousSelectIndex].nonInteractive && !items[previousSelectIndex].collapsible;
 
     if (nonInteractiveHeader && previousSelectIndex === 0) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
@@ -294,7 +294,7 @@ class UDExList extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
     const nextSelectIndex = currentSelectedIndex + 1 > items.length - 1 ? 0 : currentSelectedIndex + 1;
     const isHeaderItem = items[nextSelectIndex].isGroup;
-    const nonInteractiveHeader = items[nextSelectIndex].nonInteractive;
+    const nonInteractiveHeader = items[nextSelectIndex].nonInteractive && !items[nextSelectIndex].collapsible;
 
     if (nonInteractiveHeader) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
@@ -337,7 +337,7 @@ class UDExList extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
     const firstItem = items[0];
     const isHeaderItem = firstItem.isGroup;
-    const nonInteractiveItem = firstItem.nonInteractive;
+    const nonInteractiveItem = firstItem.nonInteractive && !firstItem.collapsible;
 
     if (nonInteractiveItem) {
       this.unsetTabIndexByIndex(items, currentSelectedIndex);

package/src/ListGroupHeader.hbs

@@ -125,8 +125,6 @@
 
 {{#*inline "single-group-header"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item">
-        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
-        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"
@@ -147,15 +145,13 @@
 
 {{#*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"
-    tabindex="0"
-    @keydown="{{handleKeyDown}}"
-    _tab-index="{{_effectiveTabIndex}}"
-    aria-expanded="{{expanded}}"
-    aria-controls="{{ariaControlsId}}">
-        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
-        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
+        id="{{this._id}}_group-content__focusable"
+        role="button"
+        tabindex="0"
+        @keydown="{{handleKeyDown}}"
+        _tab-index="{{_effectiveTabIndex}}"
+        aria-expanded="{{expanded}}"
+        aria-controls="{{ariaControlsId}}">
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"

package/src/ListItem.hbs

@@ -56,8 +56,6 @@
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
             </div>
         {{/if}}
-        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
-        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"

package/src/ListItemBase.ts

@@ -298,14 +298,6 @@ class UDExListItemBase extends UI5Element {
     return this.modeMultiSelect || this.modeRadioGroup;
   }
 
-  get typeNumber(): boolean {
-    return this.type === UDExListStyleType.Number;
-  }
-
-  get typeCircle(): boolean {
-    return this.type === UDExListStyleType.Circle;
-  }
-
   get typeIcon(): boolean {
     return this.type === UDExListStyleType.Icon;
   }

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,13 +50,14 @@
         </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-haspopup="true"
                         type="Button"

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.ts

@@ -481,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;
 

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.
    *

package/src/MastheadMobileMenu.hbs

@@ -75,7 +75,6 @@
             class="udex-masthead-mobile-menu__explore-btn"
             id="{{exploreItem._id}}"
             @click="{{handleExploreSapClick}}"
-            @keydown="{{handleLeftRightKeys}}"
             accessible-role-text="button"
             aria-haspopup="true"
             type="Button"

package/src/MastheadMobileMenu.ts

@@ -7,7 +7,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  isUp, isDown, isRight, isLeft, isHome, isEnd,
+  isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
@@ -134,9 +134,6 @@ class UDExMastheadMobileMenu extends UI5Element {
   @property({ type: Boolean })
     _showCategoryItems!: boolean;
 
-  @property({ type: String })
-    _direction?: string;
-
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -202,63 +199,51 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   handlePressKey(e: KeyboardEvent) {
-    this.handleUpArrow(e);
-    this.handleDownArrow(e);
-    this.handleLeftRightKeys(e);
-    this.handleHomeKey(e);
-    this.handleEndKey(e);
-  }
+    const currentItem = e.target as UDExMastheadMenuItem;
+    const items = this.navigationItems;
+    const isFirstItem = currentItem === items[0];
+    const isLastItem = currentItem === items[items.length - 1];
 
-  handleLeftRightKeys(e: KeyboardEvent) {
-    this.handleRightArrow(e);
-    this.handleLeftArrow(e);
-  }
-
-  handleRightArrow(e: KeyboardEvent) {
-    if (isRight(e)) {
+    if (isTabNext(e) && !isLastItem) {
       e.preventDefault();
-      this.handleDirection();
-      if (this.isRtlDirection) {
-        this.moveToBackWithKeyboard(e);
-      } else {
-        this.moveToNextLevelWithKeyboard(e);
-      }
+      this.focusNextItem(currentItem);
     }
-  }
-
-  handleLeftArrow(e: KeyboardEvent) {
-    if (isLeft(e)) {
+    if (isTabPrevious(e) && !isFirstItem) {
       e.preventDefault();
-      this.handleDirection();
-      if (this.isRtlDirection) {
-        this.moveToNextLevelWithKeyboard(e);
-      } else {
-        this.moveToBackWithKeyboard(e);
-      }
+      this.focusPreviousItem(currentItem);
     }
+    this.handleHomeKey(e);
+    this.handleEndKey(e);
   }
 
-  handleUpArrow(e: KeyboardEvent) {
-    if (isUp(e)) {
-      e.preventDefault();
-      this.focusPreviousItem(e);
-    }
-  }
+  focusNextItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = this.getCurrentIndex(currentItem);
+    const nextIndex = currentIndex + 1;
+    const currentListItem = this.getListItemByIndex(currentIndex);
+    let nextItem = this.getListItemByIndex(nextIndex);
 
-  handleDownArrow(e: KeyboardEvent) {
-    if (isDown(e)) {
-      e.preventDefault();
-      this.focusNextItem(e);
+    if (nextItem.type === UDExItemType.Heading) {
+      nextItem = this.getListItemByIndex(nextIndex + 1);
     }
+
+    currentListItem._tabIndex = "-1";
+    nextItem._tabIndex = "0";
+    nextItem.focus();
   }
 
-  handleDirection() {
-    const directionStyles: string = window.getComputedStyle(this).getPropertyValue("direction");
-    if (!directionStyles) {
-      this._direction = "ltr";
-    } else {
-      this._direction = directionStyles;
+  focusPreviousItem(currentItem: UDExMastheadMenuItem): void {
+    const currentIndex = this.getCurrentIndex(currentItem);
+    const previousIndex = currentIndex - 1;
+    const currentListItem = this.getListItemByIndex(currentIndex);
+    let prevItem = this.getListItemByIndex(previousIndex);
+
+    if (prevItem.type === UDExItemType.Heading) {
+      prevItem = this.getListItemByIndex(this.navigationItems.length - 1);
     }
+
+    currentListItem._tabIndex = "-1";
+    prevItem._tabIndex = "0";
+    prevItem.focus();
   }
 
   handleMobileItemEvent(e: PointerEvent) {
@@ -291,51 +276,6 @@ class UDExMastheadMobileMenu extends UI5Element {
     }
   }
 
-  moveToBackWithKeyboard(e: KeyboardEvent) {
-    const target = e.target as UDExMastheadMenuItem;
-    if (target.hasAttribute("is-back-to-nav")) {
-      this.showFirstLevelMenu();
-      this.setFocusItemByIndex(this.items.indexOf(this._clickedItem));
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("is-back-to-categories")) {
-      this.showCategories();
-      this.setFocusItemByIndex(this._category.index);
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("is-explore-back")) {
-      this.showFirstLevelMenu();
-      this.setFocusExploreBtn();
-      this._focusedItemIndex = 0;
-      this.fireMobileItemEvent(e);
-    }
-  }
-
-  moveToNextLevelWithKeyboard(e: KeyboardEvent) {
-    const target = e.target as UDExMastheadItem;
-    const item = this.getClickedItem(e.target as UDExMastheadItem);
-
-    if (target.hasAttribute("is-explore")) {
-      this._hideExploreSapBtn = true;
-      this._showCategoryItems = false;
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("first-level-btn")) {
-      this.openCategories(item);
-      this.fireMobileItemEvent(e);
-    }
-
-    if (target.hasAttribute("second-level-btn")) {
-      this.openCategoryItems(e);
-      this.fireMobileItemEvent(e);
-    }
-
-    this.setFocusItemByIndex(0);
-  }
-
   focusItemByIndex(index: number): void {
     this.getListItemByIndex(index)?.focus();
     this._shouldFocusItemByIndex = false;
@@ -346,38 +286,6 @@ class UDExMastheadMobileMenu extends UI5Element {
     this._shouldFocusExploreBtn = false;
   }
 
-  focusPreviousItem(e: KeyboardEvent): void {
-    const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
-    const lastIndex = this.navigationItems.length - 1;
-    const previousIndex = currentIndex - 1 < 0 ? lastIndex : currentIndex - 1;
-    const currentItem = this.getListItemByIndex(currentIndex);
-    let prevItem = this.getListItemByIndex(previousIndex);
-
-    if (prevItem.type === UDExItemType.Heading) {
-      prevItem = this.getListItemByIndex(lastIndex);
-    }
-
-    currentItem._tabIndex = "-1";
-    prevItem._tabIndex = "0";
-    prevItem.focus();
-  }
-
-  focusNextItem(e: KeyboardEvent): void {
-    const currentIndex = this.getCurrentIndex(e.target as UDExMastheadMenuItem);
-    const navLength = this.navigationItems.length;
-    const nextIndex = currentIndex + 1 > navLength - 1 ? 0 : currentIndex + 1;
-    const currentItem = this.getListItemByIndex(currentIndex);
-    let nextItem = this.getListItemByIndex(nextIndex);
-
-    if (nextItem.type === UDExItemType.Heading) {
-      nextItem = this.getListItemByIndex(nextIndex + 1);
-    }
-
-    currentItem._tabIndex = "-1";
-    nextItem._tabIndex = "0";
-    nextItem.focus();
-  }
-
   handleEndKey(e: KeyboardEvent): void {
     if (isEnd(e)) {
       e.preventDefault();
@@ -572,10 +480,6 @@ class UDExMastheadMobileMenu extends UI5Element {
     return this.shadowRoot!.querySelector<UDExMastheadMenuItem>(".udex-masthead-mobile-menu__explore-btn")!;
   }
 
-  get isRtlDirection(): boolean {
-    return this._direction === "rtl";
-  }
-
   get navigationItems(): Array<UDExMastheadMenuItem> {
     return Array.from(this.shadowRoot!.querySelectorAll<UDExMastheadMenuItem>("ul [udex-masthead-menu-item]"));
   }

package/src/MastheadProfileMenu.ts

@@ -418,7 +418,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   toggleScrollableClass(el: HTMLElement, className: string, scrollBottom: number): void {
-    if (scrollBottom === 0) {
+    if (scrollBottom <= 1) {
       el.classList.remove(`${className}_scrollable`);
     } else {
       el.classList.add(`${className}_scrollable`);

package/src/MastheadShell.hbs

@@ -53,17 +53,6 @@
     {{/if}}
 
     <div class="{{rightMenuClass}}">
-        {{#if hasMobileMenuButtons}}
-            <udex-masthead-item
-                @ui5-item-click="{{handleOpenMobileMenu}}"
-                class="udex-masthead-shell__menu-btn"
-                accessible-role="button"
-                icon="menu2"
-                part="menu-open-btn"
-                accessible-name="menu">
-                <slot slot="dropdown" name="mobileMenu"></slot>
-            </udex-masthead-item>
-        {{/if}}
         {{#if hasExploreSAP}}
             <div
                 class="udex-masthead-shell__explore"
@@ -124,6 +113,15 @@
             </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
+            <udex-masthead-item
+                @ui5-item-click="{{handleOpenMobileMenu}}"
+                class="udex-masthead-shell__menu-btn"
+                accessible-role="button"
+                icon="menu2"
+                part="menu-open-btn"
+                accessible-name="menu">
+                <slot slot="dropdown" name="mobileMenu"></slot>
+            </udex-masthead-item>
             <udex-masthead-item
                 @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
                 @ui5-item-click="{{closeMobileMenu}}"