@sapudex/web-components 2.1.1 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -32,19 +32,19 @@
   },
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
-    "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "2.10.0",
-    "@ui5/webcomponents-base": "2.10.0",
-    "@ui5/webcomponents-fiori": "2.10.0",
-    "@ui5/webcomponents-icons": "2.10.0",
-    "@ui5/webcomponents-theming": "2.10.0",
+    "@types/youtube": "^0.1.2",
+    "@ui5/webcomponents": "2.12.0",
+    "@ui5/webcomponents-base": "2.12.0",
+    "@ui5/webcomponents-fiori": "2.12.0",
+    "@ui5/webcomponents-icons": "2.12.0",
+    "@ui5/webcomponents-theming": "2.12.0",
     "@vimeo/player": "^2.24.0",
     "cypress-real-events": "^1.14.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.10.0",
+    "@ui5/webcomponents-tools": "2.12.0",
     "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/Badge.ts

@@ -9,7 +9,7 @@ import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
-import IconPlacement from "./types/IconPlacement.js";
+import UDExIconPlacement from "./types/IconPlacement.js";
 
 import {
   UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,
@@ -81,7 +81,7 @@ class UDExBadge extends UI5Element {
   * @public
   */
     @property()
-      iconPlacement: `${IconPlacement}` = IconPlacement.End;
+      iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;
   /**
    * Defines icon name
   *
@@ -100,11 +100,11 @@ class UDExBadge extends UI5Element {
     default!: Array<Node>;
 
   get startIcon(): boolean {
-    return !!this.icon && this.iconPlacement === IconPlacement.Start;
+    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;
   }
 
   get endIcon(): boolean {
-    return !!this.icon && this.iconPlacement === IconPlacement.End;
+    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;
   }
 
   get textClasses(): string {

package/src/Breadcrumbs.hbs

@@ -3,19 +3,16 @@
 	aria-label="{{_accessibleNameText}}">
 	<ol @focusin="{{_onfocusin}}">
 		<li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper">
-			<button
+            <udex-link
                 id="udex-{{this._id}}-breadcrumbs__opener"
                 @click="{{_toggleDropdown}}"
                 class="udex-breadcrumbs__trigger {{_triggerClass}}"
-				accessible-role="button"
-				aria-label="{{_dropdownArrowAccessibleNameText}}"
-				aria-haspopup="true">
-                <ui5-icon
-                    name="slim-arrow-down"
-                    mode="Decorative"
-                    title="{{_dropdownArrowAccessibleNameText}}">
-                </ui5-icon>
-			</button>
+                accessible-role="button"
+                aria-label="{{_dropdownArrowAccessibleNameText}}"
+                icon="slim-arrow-down"
+                icon-placement="Start"
+                aria-haspopup="true">
+            </udex-link>
 		</li>
 		{{#each _linksData}}
             <li

package/src/Breadcrumbs.ts

@@ -122,6 +122,7 @@ class UDExBreadcrumbs extends UI5Element {
 
   _responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
+  _shouldFocusFirstVisibleItem!: boolean;
 
   onBeforeRendering(): void {
     this._preprocessItems();
@@ -130,7 +131,13 @@ class UDExBreadcrumbs extends UI5Element {
   onAfterRendering(): void {
     this._responsivePopover = this._getResponsePopover();
     this._initItemNavigation();
+    this._dropdownArrowLink.forcedTabIndex = "0";
     this._handleOutsideClick();
+
+    if (this._shouldFocusFirstVisibleItem) {
+      this._getFocusableItems()[1].focus();
+      this._shouldFocusFirstVisibleItem = false;
+    }
   }
 
   _preprocessItems(): void {
@@ -236,6 +243,12 @@ class UDExBreadcrumbs extends UI5Element {
     const isLastItem = itemIndex === (this.items.length - 2).toString();
     const isFirstItem = itemIndex === "0";
 
+    if (isTabNext(e) && isLastItem) {
+      this._shouldFocusFirstVisibleItem = true;
+      this._toggleDropdown();
+      return;
+    }
+
     if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {
       this._toggleDropdown();
     }
@@ -267,7 +280,7 @@ class UDExBreadcrumbs extends UI5Element {
    * Getter for the list of links corresponding to the abstract breadcrumb items
    */
   get _links(): Array<UDExLink> {
-    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [udex-link]"));
   }
 
   /**

package/src/BreadcrumbsPopover.hbs

@@ -4,7 +4,9 @@
   class="udex-breadcrumbs__popover ui5-breadcrumbs-popover"
   placement="Bottom"
   horizontal-align="Start"
-  @keydown="{{_handleKeydown}}">
+  @keydown="{{_handleKeydown}}"
+  @close="{{_afterDropdownClose}}"
+  @open="{{_afterDropdownOpen}}">
   <div class="udex-breadcrumbs__popover-content">
     {{#each _dropdownItems}}
       {{#if this.icon}}

package/src/Button.ts

@@ -8,7 +8,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
-import { UDExButtonDesign, UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
@@ -16,6 +17,16 @@ import ButtonCss from "./generated/themes/Button.css.js";
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Button.js";</code>
+ *
  * @constructor
  * @extends Button
  * @tagname udex-button

package/src/Checkbox.ts

@@ -74,6 +74,10 @@ class UDExCheckbox extends CheckBox {
     ResizeHandler.register(this, this._handleResizeBound);
   }
 
+  onAfterRendering() {
+    this.shadowRoot?.querySelector(".ui5-checkbox-label")?.removeAttribute("required");
+  }
+
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }

package/src/ControlButton.ts

@@ -5,7 +5,8 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-import { UDExButtonSize, UDExControlButtonDesign } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 
 /**
  * @class

package/src/DatePicker.ts

@@ -28,13 +28,13 @@ export enum UDExDatePickerSelectionMode {
   Range = "Range",
 }
 
-type UDExDatePickerSelectionChangeEventDetail = {
+export type UDExDatePickerSelectionChangeEventDetail = {
   selectedValues: Array<string>;
   selectedDates: Array<number | undefined>;
   timestamp: number | undefined;
 };
 
-type UDExDatePickerValueStateChangeEventDetail = {
+export type UDExDatePickerValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }

package/src/InputGroup.ts

@@ -15,12 +15,15 @@ import {
   VALUE_STATE_ERROR,
   VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
-import type UDExValueState from "./types/common.js";
 
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
 
-export type UDExGroupValueState = Exclude<UDExValueState, "Warning">
+export enum UDExGroupValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
 
 export enum UDExOrientation {
   Vertical = "Vertical",

package/src/ListItem.ts

@@ -196,16 +196,16 @@ class UDExListItem extends UDExListItemBase {
    * @slot
    * @public
    */
-  @slot()
-    firstIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    firstIcon!: Array<UDExButton>;
   /**
    * Slot for second icon.
    *
    * @slot
    * @public
    */
-  @slot()
-    secondIcon!: Array<HTMLElement>;
+  @slot({ type: UDExButton })
+    secondIcon!: Array<UDExButton>;
 
   /**
   * Defines the role attribute of component

package/src/MastheadItem.ts

@@ -549,7 +549,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
+    return BreakpointUtils.isAtMost("M") || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MediaPlayer.ts

@@ -19,6 +19,8 @@ import MediaPlayerTemplate from "./generated/templates/MediaPlayerTemplate.lit.j
 // Styles
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
 
+export type YoutubePlayer = YT.Player;
+
 declare global {
   interface Window {
     videojs: any;
@@ -352,7 +354,7 @@ class UDExMediaPlayer extends UI5Element {
    * Returns video element
    * @public
    */
-  getPlayer(): HTMLVideoElement | HTMLAudioElement | YT.Player | VimeoPlayer | null {
+  getPlayer(): HTMLVideoElement | HTMLAudioElement | YoutubePlayer | VimeoPlayer | null {
     if (this._youtubeSrc) {
       const player = this.shadowRoot?.querySelector("[udex-media-player-youtube]") as UDExMediaPlayerYoutube;
       return player?.getPlayer() || null;

package/src/MediaPlayerYoutube.ts

@@ -3,13 +3,13 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 type { UDExAspectRatio } from "./MediaPlayer.js";
 
 import MediaPlayerYoutubeTemplate from "./generated/templates/MediaPlayerYoutubeTemplate.lit.js";
 
 // Styles
 import MediaPlayerYoutubeCss from "./generated/themes/MediaPlayerYoutube.css.js";
 import MediaPlayerCss from "./generated/themes/MediaPlayer.css.js";
-import type { UDExAspectRatio } from "./MediaPlayer.js";
 
 const MATCH_NOCOOKIE = /youtube-nocookie\.com/;
 const MATCH_URL_YOUTUBE = /(?:youtu\.be\/|youtube(?:-nocookie|education)?\.com\/(?:embed\/|v\/|watch\/|watch\?v=|watch\?.+&v=|shorts\/|live\/))((\w|-){11})|youtube\.com\/playlist\?list=|youtube\.com\/user\//;
@@ -22,6 +22,8 @@ const MATCH_END_QUERY = /[?&#]end=([0-9hms]+)/;
 const MATCH_START_STAMP = /(\d+)(h|m|s)/g;
 const MATCH_NUMERIC = /^\d+$/;
 
+export type YoutubePlayer = YT.Player;
+
 declare global {
   interface Window {
     onYouTubeIframeAPIReady: () => void;
@@ -293,7 +295,7 @@ class UDExMediaPlayerYoutube extends UI5Element {
    * Returns video element
    * @public
    */
-  getPlayer(): YT.Player | null {
+  getPlayer(): YoutubePlayer | null {
     return this.youtubePlayer || null;
   }
 

package/src/Pagination.ts

@@ -46,7 +46,7 @@ export enum UDExDisplayType {
   mobile = "mobile"
 }
 
-type UDExPaginationChangeEventDetail = {
+export type UDExPaginationChangeEventDetail = {
   currentPage: number,
 }
 

package/src/PhoneNumberField.ts

@@ -24,7 +24,6 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 import PhoneNumberFieldTemplate from "./generated/templates/PhoneNumberFieldTemplate.lit.js";
-import type UDExValueState from "./types/common.js";
 
 // Styles
 import PhoneNumberFieldCss from "./generated/themes/PhoneNumberField.css.js";
@@ -39,7 +38,11 @@ export enum UDExOpenButtonIcon {
   iconDown = "slim-arrow-down",
 }
 
-export type UDExPhoneNumberFieldValueState = Exclude<UDExValueState, "Warning">
+export enum UDExPhoneNumberFieldValueState {
+  Standard = "Standard",
+  Error = "Error",
+  Success = "Success",
+}
 
 const initialPlaceholder: string = "+X XXX-XXX-XXXX";
 /**
@@ -101,7 +104,7 @@ class UDExPhoneNumberField extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${UDExPhoneNumberFieldValueState}` = "Standard";
+    valueState: `${UDExPhoneNumberFieldValueState}` = UDExPhoneNumberFieldValueState.Standard;
 
   /**
    * Defines supporting text under the input field.

package/src/ProgressBar.ts

@@ -7,7 +7,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION,
 } from "./generated/i18n/i18n-defaults.js";
-import ProgressBarValueState from "./types/ProgressBar.js";
+import UDExProgressBarValueState from "./types/ProgressBar.js";
 
 // Styles
 import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
@@ -47,17 +47,17 @@ class UDExProgressBar extends ProgressIndicator {
    */
   @property()
   /** @ts-expect-error */
-    valueState!: `${ProgressBarValueState}` = ProgressBarValueState.None;
+    valueState!: `${UDExProgressBarValueState}` = UDExProgressBarValueState.None;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   valueStateTextMappings(): Record<string, string> {
     return {
-      [ProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
-      [ProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
-      [ProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      [ProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      [UDExProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
+      [UDExProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
+      [UDExProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      [UDExProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
     };
   }
 }

package/src/RadioButton.ts

@@ -7,7 +7,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import RadioButton from "@ui5/webcomponents/dist/RadioButton.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import RadioButtonValueState from "./types/RadioButton.js";
+import UDExRadioButtonValueState from "./types/RadioButton.js";
 
 // Styles
 import RadioButtonCss from "./generated/themes/RadioButton.css.js";
@@ -53,7 +53,7 @@ class UDExRadioButton extends RadioButton {
    */
   @property()
   /** @ts-expect-error */
-    valueState!: `${RadioButtonValueState}` = RadioButtonValueState.None;
+    valueState!: `${UDExRadioButtonValueState}` = UDExRadioButtonValueState.None;
 
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
@@ -65,13 +65,13 @@ class UDExRadioButton extends RadioButton {
 
   get valueStateText(): string {
     switch (this.valueState) {
-    case RadioButtonValueState.Error:
+    case UDExRadioButtonValueState.Error:
       return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);
-    case RadioButtonValueState.Success:
+    case UDExRadioButtonValueState.Success:
       return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);
-    case RadioButtonValueState.Information:
+    case UDExRadioButtonValueState.Information:
       return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);
-    case RadioButtonValueState.Warning:
+    case UDExRadioButtonValueState.Warning:
       return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);
     default:
       return "";

package/src/Search.hbs

@@ -73,8 +73,8 @@
                 @click="{{handleInputClick}}"
             />
         {{/if}}
-        {{#if accInfo.ariaDescription}}
-            <span role="status" id="search-description" class="hidden" aria-hidden="true">{{accInfo.ariaDescription}}</span>
+        {{#if open}}
+            <span aria-live="polite" aria-atomic="true" id="search-description" class="hidden" aria-hidden="true">{{suggestionsDescription}}</span>
         {{/if}}
         <div class="udex-search__icons">
             {{#if isShowHomeResetButton}}
@@ -123,6 +123,7 @@
                   class="udex-search__icon"
                   aria-hidden="true"
                   accessible-name="{{accInfo.accessibleNameSearchIcon}}"
+                  show-tooltip
                   name="search">
               </ui5-icon>
             {{/if}}

package/src/Search.ts

@@ -710,7 +710,6 @@ class UDExSearch extends UI5Element {
 
   getTextWithSuggestion(text: string): string {
     const escapedValue = this.escapeRegExp(this.value);
-    console.warn(escapedValue);
     const search = new RegExp(escapedValue, "i");
     return text.replace(search, "<b>$&</b>");
   }
@@ -1285,14 +1284,13 @@ class UDExSearch extends UI5Element {
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
-      "ariaDescription": this.open ? this.suggestionsDescription : undefined,
       "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON),
       "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON),
     };
   }
 
   get suggestionsDescription(): string {
-    return this.hasPopoverContent ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultText}`;
+    return !this.showNoResultMessage ? `${this.suggestedList.length} ${this._suggestionLabel}, ${this.recommendedList.length} ${this._recommendLabel}` : `${this.noResultMessage}`;
   }
 
   get tooltipInfo() {

package/src/SecondaryNavigation.hbs

@@ -66,6 +66,7 @@
         label="{{heading}}"
         mobile-link-title="{{title}}"
         @ui5-sub-item-click="{{handleSubItemClick}}"
+        _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}
             {{>buttons}}

package/src/SecondaryNavigation.ts

@@ -145,7 +145,8 @@ class UDExSecondaryNavigation extends UI5Element {
     _mobileBtnExpanded = false;
 
   _navItems!: Array<NavItem>;
-  _showMoreButton: boolean;
+  _showMoreButton: boolean = true;
+  _shouldFocusFirstItem: boolean = true;
   _rootHolder!: HTMLElement | null | undefined;
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
@@ -155,7 +156,6 @@ class UDExSecondaryNavigation extends UI5Element {
 
   constructor() {
     super();
-    this._showMoreButton = true;
     this._boundReflowItems = this._handleResize.bind(this);
   }
 
@@ -171,13 +171,6 @@ class UDExSecondaryNavigation extends UI5Element {
     ResizeHandler.deregister(this, this._boundReflowItems);
   }
 
-  _handleResize() {
-    this.reflowItems();
-    if (this._clickedNavItem && this.isDesktopScreen) {
-      this._clickedNavItem.closeDropdown();
-    }
-  }
-
   onInvalidation(changeInfo: ChangeInfo): void {
     if (changeInfo.name === "navItems") {
       this.reflowItems();
@@ -186,6 +179,12 @@ class UDExSecondaryNavigation extends UI5Element {
 
   onAfterRendering(): void {
     this._rootHolder = this.rootHolder;
+    if (!this._overflowItems.length) {
+      this._showMoreButton = true;
+    }
+    if (this._shouldFocusFirstItem && this.isDesktopScreen) {
+      this.domNavItems[0]._tabIndex = "0";
+    }
     this.handleOutsideClick();
   }
 
@@ -193,6 +192,16 @@ class UDExSecondaryNavigation extends UI5Element {
     this._requestRender = !this._requestRender;
   }
 
+  _handleResize() {
+    this.reflowItems();
+    if (this.isDesktopScreen) {
+      this.resetTabIndex();
+    }
+    if (this._clickedNavItem && this.isDesktopScreen) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   reflowItems(): void {
     const availableWidth = this.rootHolder.offsetWidth - (this.headingHolder?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
@@ -243,9 +252,12 @@ class UDExSecondaryNavigation extends UI5Element {
     const item = e.target as UDExSecondaryNavigationItem;
     const currentSelectedIndex = this.getCurrentIndex(item);
     const previousSelectIndex = currentSelectedIndex - 1;
+    const previousItem = this.domNavItems[previousSelectIndex];
     if (currentSelectedIndex > 0) {
       e.preventDefault();
-      this.domNavItems[previousSelectIndex]?.focus();
+      this.domNavItems[currentSelectedIndex]._tabIndex = "-1";
+      previousItem._tabIndex = "0";
+      previousItem?.focus();
     }
   }
 
@@ -254,9 +266,12 @@ class UDExSecondaryNavigation extends UI5Element {
     const currentSelectedIndex = this.getCurrentIndex(item);
     const lastItemIndex = this.domNavItems.length - 1;
     const nextSelectIndex = currentSelectedIndex + 1;
+    const nextItem = this.domNavItems[nextSelectIndex];
     if (nextSelectIndex < lastItemIndex) {
       e.preventDefault();
-      this.domNavItems[nextSelectIndex].focus();
+      this.domNavItems[currentSelectedIndex]._tabIndex = "-1";
+      nextItem._tabIndex = "0";
+      nextItem.focus();
     }
   }
 
@@ -305,6 +320,8 @@ class UDExSecondaryNavigation extends UI5Element {
     }
 
     this._clickedNavItem = clickedItem;
+    this._shouldFocusFirstItem = false;
+    this.setTabIndexById(_id);
     this.closePrevDropdown(_id);
 
     if (!subItems.length) {
@@ -401,7 +418,7 @@ class UDExSecondaryNavigation extends UI5Element {
 
   closePrevDropdown(clickedItemId: string): void {
     this.domNavItems.forEach(item => {
-      if (clickedItemId !== item._id) {
+      if (item.isOpen && item._id !== clickedItemId) {
         item.closeDropdown();
       }
     });
@@ -411,6 +428,18 @@ class UDExSecondaryNavigation extends UI5Element {
     return string ? JSON.parse(string) as T[] : [];
   }
 
+  resetTabIndex(): void {
+    this.domNavItems.forEach((item, index) => {
+      item._tabIndex = index === 0 ? "0" : "-1";
+    });
+  }
+
+  setTabIndexById(id: string): void {
+    this.domNavItems.forEach(item => {
+      item._tabIndex = id === item._id ? "0" : "-1";
+    });
+  }
+
   get domNavItems(): Array<UDExSecondaryNavigationItem> {
     const items = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationItem>("[udex-secondary-navigation-item]");
     return items ? Array.from(items) : [];

package/src/SecondaryNavigationItem.hbs

@@ -5,6 +5,7 @@
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
+        tabindex="{{_tabIndex}}"
         aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
@@ -14,7 +15,7 @@
     <button
         class="udex-secondary-navigation__item"
         role="{{itemRole}}"
-        tabindex="0"
+        tabindex="{{menuOpenerTabIndex}}"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"