@sapudex/web-components 2.32.1 → 2.33.0

package/src/BreadcrumbsTemplate.tsx

@@ -20,30 +20,44 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
               onClick={this._toggleDropdown}
               accessibleName={this._dropdownArrowAccessibleNameText}
               accessibleRole={UDExButtonAccessibleRole.Button}
-              icon={slimArrowDown}
-              aria-haspopup="true">
+              accessibilityAttributes={this._triggerAccessibilityAttributes}
+              icon={slimArrowDown}>
             </UDExLink>
           </li>
           {this._linksData.map(linkData =>
-            <li
-              class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
-              id={`${linkData._id}-link-wrapper`}>
-              {!linkData._isCurrentPageItem && (
-                <>
-                  <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
-                  <UDExLink
-                    onClick={this._onLinkPress}
-                    id={`${linkData._id}-link`}
-                    class={`${rootClass}__item ${this._rootClass}__item--visible`}
-                    href={linkData.href}
-                    target={linkData.target}
-                    accessibleName={linkData._accessibleNameText}
-                    data-ui5-stable={linkData.stableDomRef}>
-                    {linkData.innerText}
-                  </UDExLink>
-                </>
-              )}
-            </li>
+            (linkData._isCurrentPageItem && !this.showCurrentPage ? null : (
+              <li
+                role={linkData._isCurrentPageItem ? "presentation" : undefined}
+                class={`${this._rootClass}__link-wrapper ui5-breadcrumbs-link-wrapper`}
+                id={`${linkData._id}-link-wrapper`}>
+                {linkData._isCurrentPageItem ? (
+                  <>
+                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <span
+                      id={`${linkData._id}-link`}
+                      class={`${rootClass}__item ${this._rootClass}__item--visible ${this._rootClass}__item--current-page`}
+                      aria-current="page"
+                      data-ui5-stable={linkData.stableDomRef}>
+                      {linkData.textContent}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <span className={`${this._rootClass}__separator`} aria-hidden="true"></span>
+                    <UDExLink
+                      onClick={this._onLinkPress}
+                      id={`${linkData._id}-link`}
+                      class={`${rootClass}__item ${this._rootClass}__item--visible`}
+                      href={linkData.href}
+                      target={linkData.target}
+                      accessibleName={linkData._accessibleNameText}
+                      data-ui5-stable={linkData.stableDomRef}>
+                      {linkData.textContent}
+                    </UDExLink>
+                  </>
+                )}
+              </li>
+            ))
           )}
         </ol>
       </nav>

package/src/ListItem.hbs

@@ -91,24 +91,28 @@
                     <slot part="content"></slot>
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
-                {{#if hasFirstIcon}}
-                  <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
-                {{#if hasSecondIcon}}
-                  <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
+                <div class="udex-list__btn-wrap">
+                    {{#if hasFirstIcon}}
+                        <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                    {{#if hasSecondIcon}}
+                        <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                </div>
             {{else}}
                 <div class="udex-list__text-holder">
                     <slot part="content"></slot>
                     {{#if supportingText}}<span class="udex-list__supporting-text" part="supporting">{{supportingText}}</span>{{/if}}
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
-                {{#if hasFirstIcon}}
-                    <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
-                {{#if hasSecondIcon}}
-                    <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
-                {{/if}}
+                <div class="udex-list__btn-wrap">
+                    {{#if hasFirstIcon}}
+                        <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                    {{#if hasSecondIcon}}
+                        <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                    {{/if}}
+                </div>
             {{/if}}
             {{#if collapsible}}
               <div class="udex-list__group-heading__icon-wrapper">

package/src/SecondaryNavigation.hbs

@@ -10,6 +10,7 @@
                 {{#if headingHref.length}}
                     <a
                         class="udex-secondary-navigation__title"
+                        tabindex="0"
                         @click="{{handleHeadingClick}}"
                         href="{{headingHref}}">
                         {{heading}}
@@ -19,14 +20,12 @@
                 {{/if}}
             </div>
         {{/if}}
-        <div class="udex-secondary-navigation__wrap">
+        <nav class="udex-secondary-navigation__wrap">
             <ul
-                role="menubar"
                 class="udex-secondary-navigation__list"
                 @keydown="{{handleKeyDown}}">
                 {{#each visibleItems}}
                     <li
-                        role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
                             index="{{@index}}"
@@ -44,7 +43,6 @@
                 {{/each}}
                 {{#if _showMoreButton}}
                     <li
-                        role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
                             _nav-items-length="{{visibleItems.length}}"
@@ -60,7 +58,7 @@
             {{#if hasDesktopButtonsSlot}}
                 {{>buttons}}
             {{/if}}
-        </div>
+        </nav>
     </div>
     <udex-secondary-navigation-item
         @keydown="{{handleKeyDown}}"
@@ -75,7 +73,9 @@
         _is-mobile-menu-opener
         .subItems="{{this.parsedItems}}">
         {{#if hasMobileButtonsSlot}}
-            {{>buttons}}
+            <div class="udex-secondary-navigation__buttons" @click="{{handleMobileButtonsClick}}">
+                <slot name="buttons"></slot>
+            </div>
         {{/if}}
     </udex-secondary-navigation-item>
 </div>

package/src/SecondaryNavigation.ts

@@ -6,9 +6,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import {
-  isEscape, isLeft, isRight, isDown,
-} from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { UDExSecondaryNavigationItemClickEventDetail, UDExSecondaryNavigationItemSubItemClickEventDetail } from "./SecondaryNavigationItem.js";
 import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
@@ -200,7 +198,6 @@ class UDExSecondaryNavigation extends UI5Element {
 
   _navItems!: Array<NavItem>;
   _showMoreButton: boolean = true;
-  _shouldFocusFirstItem: boolean = true;
   _rootHolder!: HTMLElement | null | undefined;
   _clickedNavItem!: UDExSecondaryNavigationItem;
   _boundReflowItems: () => void;
@@ -236,9 +233,6 @@ class UDExSecondaryNavigation extends UI5Element {
     if (!this._overflowItems.length) {
       this._showMoreButton = true;
     }
-    if (this._shouldFocusFirstItem && this.isDesktopScreen) {
-      this.domNavItems[0]._tabIndex = "0";
-    }
     this.handleOutsideClick();
   }
 
@@ -248,9 +242,6 @@ class UDExSecondaryNavigation extends UI5Element {
 
   _handleResize() {
     this.reflowItems();
-    if (this.isDesktopScreen) {
-      this.resetTabIndex();
-    }
     if (this._clickedNavItem && this.isDesktopScreen) {
       this._clickedNavItem.closeDropdown();
     }
@@ -288,45 +279,9 @@ class UDExSecondaryNavigation extends UI5Element {
     e.stopPropagation();
     const item = e.target as UDExSecondaryNavigationItem;
 
-    if (isLeft(e)) {
-      return this.focusPrevNavItem(e);
-    }
-    if (isRight(e)) {
-      return this.focusNextNavItem(e);
-    }
     if (isEscape(e) && item.hasNestedItems) {
       return item.closeDropdown();
     }
-    if (isDown(e) && item.hasNestedItems) {
-      item.openDropdown(e);
-    }
-  }
-
-  focusPrevNavItem(e: KeyboardEvent): void {
-    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[currentSelectedIndex]._tabIndex = "-1";
-      previousItem._tabIndex = "0";
-      previousItem?.focus();
-    }
-  }
-
-  focusNextNavItem(e: KeyboardEvent): void {
-    const item = e.target as UDExSecondaryNavigationItem;
-    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[currentSelectedIndex]._tabIndex = "-1";
-      nextItem._tabIndex = "0";
-      nextItem.focus();
-    }
   }
 
   getItemWidth(item: NavItem): number {
@@ -348,10 +303,6 @@ class UDExSecondaryNavigation extends UI5Element {
     return canvas.getContext("2d")!;
   }
 
-  getCurrentIndex(item: UDExSecondaryNavigationItem): number {
-    return this.domNavItems.indexOf(item);
-  }
-
   handleItemClick(e: CustomEvent<UDExSecondaryNavigationItemClickEventDetail>): void {
     const { index, item, originalEvent: actualOriginalEvent } = e.detail;
     const clickedItem = item as UDExSecondaryNavigationItem;
@@ -374,8 +325,6 @@ class UDExSecondaryNavigation extends UI5Element {
     }
 
     this._clickedNavItem = clickedItem;
-    this._shouldFocusFirstItem = false;
-    this.setTabIndexById(_id);
     this.closePrevDropdown(_id);
 
     if (!subItems.length) {
@@ -499,11 +448,11 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("mousedown", this.outsideClickListener);
+    document.addEventListener("click", this.outsideClickListener);
   }
 
   outsideClickListener = (e: MouseEvent): void => {
-    if (this.isMobileScreen && e.target !== this) {
+    if (this.isMobileScreen && !e.composedPath().includes(this)) {
       this.closeMobileDropdown();
       return;
     }
@@ -513,6 +462,10 @@ class UDExSecondaryNavigation extends UI5Element {
     }
   };
 
+  handleMobileButtonsClick(): void {
+    this.closeMobileDropdown();
+  }
+
   closeMobileDropdown(): void {
     this.mobileNav?.closeDropdown();
   }
@@ -532,18 +485,6 @@ class UDExSecondaryNavigation extends UI5Element {
     });
   }
 
-  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

@@ -1,11 +1,10 @@
 {{#if isLink}}
     <a
         class="udex-secondary-navigation__item"
-        role="{{menuItemRole}}"
+        tabindex="0"
         ?active="{{isActive}}"
         href="{{path}}"
         target="{{target}}"
-        tabindex="{{_tabIndex}}"
         aria-current="{{ariaCurrent}}"
         @keydown="{{handleItemLinkKeyDown}}"
         @click="{{fireNavItemClickEvent}}">
@@ -14,8 +13,7 @@
 {{else}}
     <button
         class="udex-secondary-navigation__item"
-        role="{{itemRole}}"
-        tabindex="{{menuOpenerTabIndex}}"
+        tabindex="0"
         ?active="{{isActive}}"
         aria-haspopup="{{hasNestedItems}}"
         aria-expanded="{{isOpen}}"
@@ -42,11 +40,11 @@
     {{#if isOpen}}
         <div
             class="udex-secondary-navigation__dropdown">
-            <ul role="menu"
+            <ul
                 class="udex-secondary-navigation__dropdown-list"
                 @keydown="{{handleSubItemKeyDown}}">
                 {{#each _processedItems}}
-                    <li role="none">
+                    <li>
                         <udex-secondary-navigation-sub-item
                             index="{{@index}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"

package/src/SecondaryNavigationItem.ts

@@ -5,7 +5,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import {
-  isLeft, isRight, isUp, isDown, isEscape, isSpace, isEnter, isHome, isEnd, isTabNext, isTabPrevious,
+  isEscape, isEnter, isSpace, isLeft, isRight, isUp, isDown, isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 import parseRelativeUnits from "./utils/parseRelativeUnits.js";
@@ -19,8 +19,6 @@ import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavi
 // Styles
 import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
 
-export const menuItemRole: string = "menuitem";
-
 type UDExSecondaryNavigationItemClickEventDetail = {
   item: HTMLElement,
   index: number,
@@ -30,7 +28,7 @@ type UDExSecondaryNavigationItemClickEventDetail = {
 type UDExSecondaryNavigationItemSubItemClickEventDetail = {
   item: NavItem,
   index: number,
-  originalEvent: PointerEvent
+  originalEvent: PointerEvent | KeyboardEvent
 }
 
 /**
@@ -166,7 +164,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   _dropdownHistory: Array<Array<NavItem>> = [];
   _shouldFocusFirstSubItem!: boolean;
   _subTitle!: string | undefined;
-  _shouldSetTabIndex!: boolean;
 
   onAfterRendering(): void {
     if (this.isLastItem && this.isOpen && !this._isMobileView) {
@@ -181,11 +178,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     if (this._isMobileView && this.isOpen) {
       this.setDropdownHeight();
     }
-
-    if (this._shouldSetTabIndex) {
-      this._tabIndex = "0";
-      this._shouldSetTabIndex = false;
-    }
   }
 
   onBeforeRendering() : void {
@@ -193,7 +185,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   handleSubItemClick(e: CustomEvent | KeyboardEvent): void {
-    const { originalEvent } = e.detail;
+    const originalEvent: PointerEvent | KeyboardEvent = (e instanceof CustomEvent && e.detail?.originalEvent) ? e.detail.originalEvent : e as KeyboardEvent;
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
 
@@ -203,7 +195,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       this.onShouldFocusFirstSubItem();
     }
 
-    this.fireSubItemClickEvent(originalEvent as PointerEvent, clickedItem, index);
+    this.fireSubItemClickEvent(originalEvent, clickedItem, index);
   }
 
   onBackClick(): void {
@@ -222,7 +214,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 
   closeDropdown(): void {
     this.isOpen = false;
-    this._shouldSetTabIndex = true;
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
@@ -268,10 +259,11 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       e.preventDefault();
       this.handleEnterAndSpace(e);
     }
-    if (isTabPrevious(e) && this._isMobileView) {
+    const { index } = e.target as UDExSecondaryNavigationSubItem;
+    if (isTabNext(e) && index === this.domNavItems.length - 1) {
       this.closeDropdown();
     }
-    if ((isTabPrevious(e) || isTabNext(e)) && !this._isMobileView) {
+    if (isTabPrevious(e) && index === 0) {
       this.closeDropdown();
     }
   }
@@ -282,27 +274,40 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     }
   }
 
+  handleEnterAndSpace(e: KeyboardEvent): void {
+    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
+    if (isBack) {
+      this.onBackClick();
+      this.onShouldFocusFirstSubItem();
+      return;
+    }
+
+    this.handleSubItemClick(e);
+
+    if (hasItems) {
+      this.onShouldFocusFirstSubItem();
+    } else {
+      this.closeDropdown();
+      this.focus();
+    }
+  }
+
+  handleEscapeKey(): void {
+    this.closeDropdown();
+    this.focus();
+  }
+
   handleUpArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const lastIndex = this.domNavItems.length - 1;
-    const previousSelectIndex = index - 1 < 0 ? lastIndex : index - 1;
-    const previousItem = this.domNavItems[previousSelectIndex];
-    const currentItem = this.domNavItems[index];
-
-    this.unsetTabIndex(currentItem);
-    this.setTabIndex(previousItem);
-    previousItem.focus();
+    const previousIndex = index - 1 < 0 ? lastIndex : index - 1;
+    this.domNavItems[previousIndex].focus();
   }
 
   handleDownArrow(e: KeyboardEvent): void {
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;
-    const nextItem = this.domNavItems[nextIndex];
-    const currentItem = this.domNavItems[index];
-
-    this.unsetTabIndex(currentItem);
-    this.setTabIndex(nextItem);
-    nextItem.focus();
+    this.domNavItems[nextIndex].focus();
   }
 
   handleLeftArrow(e: KeyboardEvent): void {
@@ -316,32 +321,15 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   handleRightArrow(e: KeyboardEvent): void {
     const { hasItems, isBack, index } = e.target as UDExSecondaryNavigationSubItem;
     if (hasItems && !isBack) {
-      this.handleSubItemClick(e);
-      this.unsetTabIndex(this.domNavItems[index]);
-    }
-  }
-
-  handleEnterAndSpace(e: KeyboardEvent): void {
-    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
-    if (isBack) {
-      this.onBackClick();
-      this.onShouldFocusFirstSubItem();
-      return;
-    }
-
-    this.handleSubItemClick(e);
-
-    if (hasItems) {
+      const clickedItem = this._processedItems[index];
+      this.setDropdownHistory();
+      this.setNestedItems(clickedItem);
       this.onShouldFocusFirstSubItem();
-    } else {
-      this.closeDropdown();
-      this.focus();
     }
   }
 
-  handleEscapeKey(): void {
-    this.closeDropdown();
-    this.focus();
+  onLastSubItemFocus(): void {
+    this.domNavItems[this.domNavItems.length - 1].focus();
   }
 
   fireNavItemClickEvent(e: PointerEvent | KeyboardEvent): void {
@@ -352,7 +340,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     });
   }
 
-  fireSubItemClickEvent(e: PointerEvent, clickedItem: NavItem, index: number): void {
+  fireSubItemClickEvent(e: PointerEvent | KeyboardEvent, clickedItem: NavItem, index: number): void {
     this.fireDecoratorEvent("sub-item-click", {
       item: clickedItem,
       index,
@@ -411,23 +399,8 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     }
   }
 
-  setTabIndex(item: UDExSecondaryNavigationSubItem): void {
-    item._tabIndex = "0";
-  }
-
-  unsetTabIndex(item: UDExSecondaryNavigationSubItem): void {
-    item._tabIndex = "-1";
-  }
-
   onFirstSubItemFocus(): void {
-    const firstSubItem = this.domNavItems[0];
-
-    firstSubItem.focus();
-    this.setTabIndex(firstSubItem);
-  }
-
-  onLastSubItemFocus(): void {
-    this.domNavItems[this.domNavItems.length - 1].focus();
+    this.domNavItems[0]?.focus();
   }
 
   onShouldFocusFirstSubItem(): void {
@@ -438,14 +411,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     return this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
   }
 
-  get menuOpenerTabIndex(): string {
-    if (this._isMobileMenuOpener) {
-      return "0";
-    }
-
-    return this._tabIndex;
-  }
-
   get isLastItem(): boolean {
     return this._navItemsLength === this.index;
   }
@@ -482,14 +447,6 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     return !this.hasNestedItems && !!this.path;
   }
 
-  get itemRole(): string {
-    return this.role ? this.role : this.menuItemRole;
-  }
-
-  get menuItemRole(): string {
-    return menuItemRole;
-  }
-
   get title(): string {
     return this.label;
   }

package/src/SecondaryNavigationItemBase.ts

@@ -93,9 +93,6 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   @property({ type: Boolean })
     _isMobileView!: boolean;
 
-  @property({ type: String })
-    _tabIndex: string = "-1";
-
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {

package/src/SecondaryNavigationSubItem.hbs

@@ -1,10 +1,8 @@
 {{#if isBack}}
     <button
-        tabindex="{{_tabIndex}}"
         @click="{{onBackItemClick}}"
-        role="menuitem"
         aria-label="{{backButtonAriaLabel}}"
-        aria-haspopup="true"
+        tabindex="0"
         is-back
         class="udex-secondary-navigation__dropdown-item">
         <ui5-icon
@@ -17,13 +15,12 @@
 {{else}}
     {{#if isButton}}
         <button
-            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
-            role="menuitem"
             aria-haspopup="{{hasItems}}"
             ?sub-active="{{isSubItemActive}}"
             aria-label="{{label}}"
             ?active="{{active}}"
+            tabindex="0"
             aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}
@@ -37,12 +34,11 @@
         </button>
     {{else}}
         <a
-            tabindex="{{_tabIndex}}"
             @click="{{onItemClick}}"
-            role="menuitem"
             href="{{path}}"
             target="{{target}}"
             ?active="{{active}}"
+            tabindex="0"
             aria-current="{{ariaCurrent}}"
             class="udex-secondary-navigation__dropdown-item">
             {{itemLabel}}