@sapudex/web-components 2.25.1 → 2.27.0

package/src/MastheadProfileMenu.ts

@@ -5,6 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   LOGOUT, SWITCH_ACCOUNT, BACK, OTHER_IDENTITIES, ADD_OR_REMOVE_ACCOUNT,
@@ -13,6 +14,7 @@ import { isEscape } from "@ui5/webcomponents-base/Keys.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExButton from "./Button.js";
 import UDExList from "./List.js";
+import UDExLink from "./Link.js";
 import UDExListItem from "./ListItem.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
@@ -37,6 +39,7 @@ export interface UserData {
   email?: string,
   avatarUrl?: string,
   avatarInitials?: string
+  fallbackIcon?: string,
 }
 
 export interface UserIdentity {
@@ -96,6 +99,7 @@ type UDExMastheadProfileMenuAddOrRemoveClickEventDetail = {
     UDExListItem,
     UDExButton,
     UDExList,
+    UDExLink,
   ],
 })
 
@@ -198,13 +202,29 @@ class UDExMastheadProfileMenu extends UI5Element {
     _openIdentities: boolean = false;
 
   /**
-   * Placeholder for message strip.
+   * Defines the request render state
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
+  /**
+   * Slot for message strip.
    *
    * @public
    */
   @slot({ type: Node, "default": false })
     message!: Array<Node>;
 
+  /**
+   * Slot for logout button.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    logoutButton!: Array<Node>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -212,6 +232,8 @@ class UDExMastheadProfileMenu extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
   _shouldFocusBackBtn!: boolean;
   _shouldFocusSwitchBtn!: boolean;
+  _identitiesListClassName = "udex-masthead-profile-menu__identities-list";
+  _profileMenuLinksClassName = "udex-masthead-profile-menu__links";
 
   constructor() {
     super();
@@ -223,10 +245,14 @@ class UDExMastheadProfileMenu extends UI5Element {
     this.updateFocusState(this._shouldFocusBackBtn, this.focusBackBtn.bind(this));
     this.updateFocusState(this._shouldFocusSwitchBtn, this.focusSwitchBtn.bind(this));
     this.setMenuItemsMobileMode();
+    this.checkScrollableElements();
   }
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
   }
 
   onExitDOM(): void {
@@ -239,6 +265,8 @@ class UDExMastheadProfileMenu extends UI5Element {
     if (this.profileMenuLinks) {
       this.profileMenuLinks._isMobileMode = this.isMobile;
     }
+
+    this.checkScrollableElements();
   }
 
   handleSwitcherClick(): void {
@@ -247,8 +275,8 @@ class UDExMastheadProfileMenu extends UI5Element {
     this._shouldFocusSwitchBtn = !this._openIdentities;
   }
 
-  handleUserLogoutItemClick(e: PointerEvent): void {
-    this.fireLogoutItemClick(e);
+  handleUserLogoutClick(e: PointerEvent): void {
+    this.fireLogoutClick(e);
     if (this._isMobileMode) {
       this.closeMenu();
     }
@@ -318,15 +346,18 @@ class UDExMastheadProfileMenu extends UI5Element {
     }
   }
 
-  fireLogoutItemClick(e: PointerEvent): void {
+  fireLogoutClick(e: PointerEvent): void {
     const item = e.target as UDExMastheadMenuItem;
-
-    this.fireDecoratorEvent("logout", {
+    const executeEvent = this.fireDecoratorEvent("logout", {
       item,
-      sourceNode: item.shadowRoot?.querySelector(".udex-masthead-menu-item") as HTMLElement,
+      sourceNode: item.shadowRoot?.querySelector("a") as HTMLElement,
       originalEvent: e,
       analyticsName: AnalyticsName.Header,
     });
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
   }
 
   fireMenuItemClick(e: CustomEvent): void {
@@ -340,6 +371,84 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
+  checkScrollableElements(): void {
+    if (this._openIdentities) {
+      this.checkScrollableElement(this.identitiesHTMLElement, this._identitiesListClassName);
+    }
+
+    if (this.isMobile) {
+      this.checkScrollableElement(this.profileMenuHTMLElement, this._profileMenuLinksClassName);
+    }
+  }
+
+  checkScrollableElement(element: HTMLElement, className: string): void {
+    if (element) {
+      requestAnimationFrame(() => {
+        if (this.isScrollableElement(element)) {
+          element.classList.add(`${className}_scrollable`);
+        }
+      });
+    }
+  }
+
+  scrollToTopProfileMenu(): void {
+    setTimeout(() => {
+      this.profileMenuHTMLElement.scrollTop = 0;
+    }, 0);
+  }
+
+  isScrollableElement(element: HTMLElement): boolean {
+    return element.scrollHeight > element.clientHeight;
+  }
+
+  handleProfileMenuShadowVisible(): void {
+    this.toggleScrollableClass(
+      this.profileMenuHTMLElement,
+      this._profileMenuLinksClassName,
+      this.scrollBottomProfileMenu,
+    );
+  }
+
+  handleIdentitiesListShadowVisible(): void {
+    this.toggleScrollableClass(
+      this.identitiesHTMLElement,
+      this._identitiesListClassName,
+      this.scrollBottomIdentitiesList,
+    );
+  }
+
+  toggleScrollableClass(el: HTMLElement, className: string, scrollBottom: number): void {
+    if (scrollBottom === 0) {
+      el.classList.remove(`${className}_scrollable`);
+    } else {
+      el.classList.add(`${className}_scrollable`);
+    }
+  }
+
+  get scrollBottomIdentitiesList(): number {
+    return this.calculateScrollBottom(this.identitiesHTMLElement);
+  }
+
+  get scrollBottomProfileMenu(): number {
+    return this.calculateScrollBottom(this.profileMenuHTMLElement);
+  }
+
+  calculateScrollBottom(element: HTMLElement): number {
+    return element.scrollHeight - element.scrollTop - element.clientHeight;
+  }
+
+  get profileMenuHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._profileMenuLinksClassName);
+  }
+
+  get identitiesHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._identitiesListClassName);
+  }
+
+  getElementByClassName(className: string): HTMLElement {
+    return this.shadowRoot?.querySelector<HTMLElement>(`.${className}`) as HTMLElement;
+  }
+
   closeMenu():void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
@@ -381,6 +490,10 @@ class UDExMastheadProfileMenu extends UI5Element {
     return !!this.message.length;
   }
 
+  get hasLogoutButton(): boolean {
+    return !!this.logoutButton.length;
+  }
+
   get logoutLink(): boolean {
     return !!this.logoutUrl?.length;
   }
@@ -425,6 +538,10 @@ class UDExMastheadProfileMenu extends UI5Element {
   get isMobile(): boolean {
     return this.isAtMostBreakpointSizeM || this.mastheadShell?.isMobileMenuMode;
   }
+
+  get hasActionButton(): boolean {
+    return this.logoutLink || this.hasLogoutButton;
+  }
 }
 
 UDExMastheadProfileMenu.define();

package/src/Pagination.ts

@@ -237,7 +237,7 @@ class UDExPagination extends UI5Element {
       const effectiveDisabledText = this._prevButtonPseudoDisabled ? `${translate(UDExPagination, DISABLED)}` : "";
       return `${translate(UDExPagination, PREVIOUS_PAGE)} ${effectiveDisabledText}`;
     }
-    return `${translate(UDExPagination, PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    return `${this.typeShort && this.nextButtonDisabled ? this.paginationShortAccessibleName : ""} ${translate(UDExPagination, PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
@@ -249,7 +249,7 @@ class UDExPagination extends UI5Element {
       const effectiveDisabledText = this._nextButtonPseudoDisabled ? `${translate(UDExPagination, DISABLED)}` : "";
       return `${translate(UDExPagination, NEXT_PAGE)} ${effectiveDisabledText}`;
     }
-    return `${translate(UDExPagination, NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
+    return `${this.typeShort && this.prevButtonDisabled ? this.paginationShortAccessibleName : ""} ${translate(UDExPagination, NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
@@ -304,9 +304,17 @@ class UDExPagination extends UI5Element {
     }
 
     this.currentPageIndex = currentPage + 1;
+    const isLastPage = this.currentPageIndex === (this.pages - 1);
     this._pageFocusedManually = false;
+    this._nextButtonPseudoDisabled = isLastPage;
 
-    this._nextButtonPseudoDisabled = this.currentPageIndex === (this.pages - 1);
+    if (isLastPage) {
+      if (this.typeShort) {
+        this.focusActiveArrow();
+      } else {
+        this.focusActivePage();
+      }
+    }
 
     this.emitChangeEvent();
   }
@@ -333,10 +341,19 @@ class UDExPagination extends UI5Element {
     if (this.pages && currentPage <= 0) {
       return;
     }
+
     this.currentPageIndex -= 1;
+    const isFirstPage = this.currentPageIndex === 0;
     this._pageFocusedManually = false;
+    this._prevButtonPseudoDisabled = isFirstPage;
 
-    this._prevButtonPseudoDisabled = this.currentPageIndex === 0;
+    if (isFirstPage) {
+      if (this.typeShort) {
+        this.focusActiveArrow();
+      } else {
+        this.focusActivePage();
+      }
+    }
 
     this.emitChangeEvent();
   }
@@ -423,10 +440,19 @@ class UDExPagination extends UI5Element {
     this.fireDecoratorEvent("change", { currentPage: this.currentPageIndex + 1 });
   }
 
+  focusActivePage() {
+    const activePageItem = this.shadowRoot?.querySelector<HTMLElement>(`.udex-pagination__page[data-index="${this.currentPageIndex}"]`);
+    activePageItem?.focus();
+  }
+
+  focusActiveArrow() {
+    const activeArrow = this.shadowRoot?.querySelector(`.udex-pagination__arrow--${this.currentPageIndex === 0 ? "next" : "prev"}`);
+    activeArrow?.shadowRoot?.querySelector<HTMLElement>("button")?.focus();
+  }
+
   onAfterRendering() {
     if (this._pageFocusedManually) {
-      const activePageItem = this.shadowRoot?.querySelector<HTMLElement>(".udex-pagination__page[active]");
-      activePageItem?.focus();
+      this.focusActivePage();
     }
 
     if (this.type === UDExPaginationType.full) {

package/src/PaginationTemplate.tsx

@@ -10,13 +10,15 @@ export default function PaginationTemplate(this: UDExPagination) {
   // This can maybe be cleaned up nicer as we can't simply
   // return empty("return;") as the renderer expects an element
   if (!this.pages) { return (<></>); }
+  const rootClass = "udex-pagination";
 
   return (
     <nav class={this.paginationClass} role="navigation" aria-label={this.paginationAccessibleName}>
-      <ul class="udex-pagination__list">
-        <li class="udex-pagination__item--prev udex-pagination__item">
+      <ul class={`${rootClass}__list`}>
+        <li class={`${rootClass}__item ${rootClass}__item--prev`}>
           <UDExButton
-            aria-disabled={this.effectivePrevButtonDisabled}
+            class={`${rootClass}__arrow ${rootClass}__arrow--prev`}
+            disabled={this.effectivePrevButtonDisabled}
             {...(this._prevButtonPseudoDisabled ? { "_aria-disabled": "" } : {})}
             accessible-name={this.previousPageAccessibleName}
             tooltip={this.previousBtnTooltip}
@@ -28,12 +30,13 @@ export default function PaginationTemplate(this: UDExPagination) {
           ></UDExButton>
         </li>
 
-        { this.typeFull ? renderFullPagination.call(this) : "" }
-        { this.typeShort ? renderShortPagination.call(this) : "" }
+        { this.typeFull ? renderFullPagination.call(this, rootClass) : "" }
+        { this.typeShort ? renderShortPagination.call(this, rootClass) : "" }
 
-        <li class="udex-pagination__item--next udex-pagination__item">
+        <li class={`${rootClass}__item ${rootClass}__item--next`}>
           <UDExButton
-            aria-disabled={this.effectiveNextButtonDisabled}
+            class={`${rootClass}__arrow ${rootClass}__arrow--next`}
+            disabled={this.effectiveNextButtonDisabled}
             {...(this._nextButtonPseudoDisabled ? { "_aria-disabled": "" } : {})}
             accessible-name={this.nextPageAccessibleName}
             tooltip={this.nextBtnTooltip}
@@ -49,12 +52,12 @@ export default function PaginationTemplate(this: UDExPagination) {
   );
 }
 
-function renderFullPagination(this: UDExPagination) {
+function renderFullPagination(this: UDExPagination, rootClass: string) {
   return this.pagination.map((page, i) => {
     return (
-      <li key={i} class="udex-pagination__item">
+      <li key={i} class={`${rootClass}__item`}>
         <a
-          class="udex-pagination__page"
+          class={`${rootClass}__page`}
           href="#"
           aria-label={page.accessibleName}
           onClick={this.onPageClick}
@@ -62,19 +65,19 @@ function renderFullPagination(this: UDExPagination) {
           aria-current={page.ariaCurrent as AriaCurrent}
           data-index={page.index}
         >
-          <span class="udex-pagination__page--value">{page.value}</span>
+          <span class={`${rootClass}__page--value`}>{page.value}</span>
         </a>
       </li>
     );
   });
 }
 
-function renderShortPagination(this: UDExPagination) {
+function renderShortPagination(this: UDExPagination, rootClass: string) {
   return (
-    <li class="udex-pagination__item udex-pagination__item--short" tab-index="-1" aria-label={this.paginationShortAccessibleName}>
-      <span class="udex-pagination__item--short-value">{this.shortTextStart}</span>
-      <span class="udex-pagination__item--short-separator">{this.shortTextSeparator}</span>
-      <span class="udex-pagination__item--short-value">{this.shortTextEnd}</span>
+    <li class={`${rootClass}__item ${rootClass}__item--short`} tab-index="-1" aria-label={this.paginationShortAccessibleName}>
+      <span class={`${rootClass}__item--short-value`}>{this.shortTextStart}</span>
+      <span class={`${rootClass}__item--short-separator`}>{this.shortTextSeparator}</span>
+      <span class={`${rootClass}__item--short-value`}>{this.shortTextEnd}</span>
     </li>
   );
 }

package/src/Tab.ts

@@ -25,14 +25,18 @@ export interface ITab extends UI5Element {
   selected?: boolean;
   numberBadge?: string;
   text?: string;
+  bodyText?: string;
   showAttentionBadge?: boolean;
   accessibleName?: string;
   href?: string;
   content?: Array<Node>;
+  link?: Array<HTMLElement>;
   hasIcon: boolean;
+  isMobile: boolean;
   isOnSelectedTab: boolean;
   hasNotIcon: boolean;
   hasNotHref: boolean;
+  hasLinkSlot: boolean;
   selectedClass: string;
   tabNavigation: any;
   _individualSlot: string;
@@ -40,6 +44,8 @@ export interface ITab extends UI5Element {
   _slotName: string;
   _selected?: boolean;
   _tabIndex: string;
+  _isMobile: boolean;
+  _isVertical: boolean;
   _iconWithoutBackground: boolean;
   _posinset?: number;
   _setsize?: number;
@@ -91,6 +97,16 @@ class UDExTab extends UI5Element implements ITab {
    */
   @property({ type: String })
     text!: string;
+
+  /**
+   * Defines the body text (supplementary description) of the tab.
+   * Optional text to provide additional context or explanation.
+   *
+   * @public
+   */
+  @property({ type: String })
+    bodyText?: string;
+
   /**
    * Accessible name for tab.
    *
@@ -167,6 +183,32 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String })
     _tabIndex!: string;
 
+  /**
+   * Defines if the viewport is mobile size.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isMobile: boolean = false;
+
+  /**
+   * Defines if the tab navigation is in vertical orientation.
+   *
+   * @private
+   * @default false
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _isVertical: boolean = false;
+
+  /**
+   * Defines the width of the tab.
+   *
+   * @private
+   */
+  @property({ type: String, noAttribute: true })
+    _width?: string;
+
   /**
    * Defines the background color of the component.
    *
@@ -185,6 +227,16 @@ class UDExTab extends UI5Element implements ITab {
   @slot({ type: Node, "default": true })
     content!: Array<Node>;
 
+  /**
+   * Defines the link(s) to be displayed in the tab header (vertical orientation only).
+   * Use this slot to add one or more udex-link elements to the tab button.
+   *
+   * @slot link
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    link!: Array<HTMLElement>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -219,6 +271,14 @@ class UDExTab extends UI5Element implements ITab {
     return this.hasIcon ? " udex-tab-navigation__button-tab--icon" : "";
   }
 
+  get isMobile(): boolean {
+    return this._isMobile;
+  }
+
+  get isMobileVertical(): boolean {
+    return this._isMobile && this._isVertical;
+  }
+
   get hasNotIcon(): boolean {
     return !this.icon && this.showAttentionBadge;
   }
@@ -227,6 +287,37 @@ class UDExTab extends UI5Element implements ITab {
     return !this.href;
   }
 
+  get hasBodyText(): boolean {
+    return !!this.bodyText;
+  }
+
+  /**
+   * Returns true if aria-describedby should point to bodyText.
+   * Only applies to selected tabs with bodyText in vertical orientation.
+   */
+  get ariaDescribedByBodyText(): boolean {
+    return this.effectiveSelected && this.hasBodyText && this._isVertical;
+  }
+
+  get hasLinkSlot(): boolean {
+    return this.link && this.link.length > 0;
+  }
+
+  /**
+   * Returns the HTML content of the link slot elements.
+   * This is used to render the links in the TabHeader template.
+   */
+  get linkSlotHtml(): string {
+    if (!this.link || this.link.length === 0) {
+      return "";
+    }
+    return this.link.map(l => l.outerHTML).join("");
+  }
+
+  get hasBodyTextOrLink(): boolean {
+    return this._isVertical && (this.hasBodyText || this.hasLinkSlot);
+  }
+
   get effectiveSelected(): boolean {
     return this.selected || this._selected;
   }
@@ -265,6 +356,13 @@ class UDExTab extends UI5Element implements ITab {
     return this.href && this.effectiveSelected ? "1" : "-1";
   }
 
+  get widthStyle(): string {
+    if (this._width && this._width !== "auto") {
+      return `width: ${this._width};`;
+    }
+    return "";
+  }
+
   get tabNavigation() {
     return executeTemplate(UDExTab.headerTemplate, this);
   }

package/src/TabHeader.hbs

@@ -1,34 +1,81 @@
-{{#if hasNotHref}}
-    <button
-        id="{{this._id}}"
-        class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
-        tabindex="{{this._tabIndex}}"
-        type="button"
-        role="tab"
-        aria-describedby="udex-tab-navigation__{{this._id}}__accessible-name"
-        aria-posinset="{{this._posinset}}"
-        aria-setsize="{{this._setsize}}"
-        aria-controls="{{this._contentId}}"
-        aria-selected="{{this.effectiveSelected}}"
-        aria-labelledby="{{this.ariaLabelledBy}}"
+{{#if hasBodyTextOrLink}}
+    <div class="udex-tab-navigation__tab-wrapper"
+        role="presentation"
         ._realTab="{{this}}"
-        style="width: {{this._width}};">
-        {{>tab-content}}
-    </button>
+        {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}>
+        {{#if hasNotHref}}
+            <button
+                id="{{this._id}}"
+                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+                type="button"
+                role="tab"
+                tabindex="{{this._tabIndex}}"
+                aria-posinset="{{this._posinset}}"
+                aria-setsize="{{this._setsize}}"
+                aria-controls="{{this._contentId}}"
+                aria-selected="{{this.effectiveSelected}}">
+                {{>tab-content}}
+                {{#if this.ariaDescribedByBodyText}}
+                    <span class="visually-hidden">{{bodyText}}</span>
+                {{/if}}
+            </button>
+        {{else}}
+            <a
+                id="{{this._id}}"
+                class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+                href="{{href}}"
+                target="{{target}}"
+                role="tab"
+                tabindex="{{this.linkTabIndex}}"
+                aria-posinset="{{this._posinset}}"
+                aria-setsize="{{this._setsize}}">
+                {{>tab-content}}
+                {{#if this.ariaDescribedByBodyText}}
+                    <span class="visually-hidden">{{bodyText}}</span>
+                {{/if}}
+            </a>
+        {{/if}}
+        {{#if hasBodyText}}
+            <p class="udex-tab-navigation__button-body-text">{{bodyText}}</p>
+        {{/if}}
+        {{#if hasLinkSlot}}
+            <div class="udex-tab-navigation__button-links">
+                {{{linkSlotHtml}}}
+            </div>
+        {{/if}}
+    </div>
 {{else}}
-    <a
-        id="{{this._id}}"
-        class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
-        tabindex="{{this.linkTabIndex}}"
-        role="tab"
-        aria-posinset="{{this._posinset}}"
-        aria-setsize="{{this._setsize}}"
-        href="{{href}}"
-        target="{{target}}"
-        style="max-width: {{this._maxWidth}}px; width: {{this._width}};"
-        ._realTab="{{this}}">
-        {{>tab-content}}
-    </a>
+    {{#if hasNotHref}}
+        <button
+            id="{{this._id}}"
+            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+            tabindex="{{this._tabIndex}}"
+            type="button"
+            role="tab"
+            aria-describedby="udex-tab-navigation__{{this._id}}__accessible-name"
+            aria-posinset="{{this._posinset}}"
+            aria-setsize="{{this._setsize}}"
+            aria-controls="{{this._contentId}}"
+            aria-selected="{{this.effectiveSelected}}"
+            ._realTab="{{this}}"
+            {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}>
+            {{>tab-content}}
+        </button>
+    {{else}}
+        <a
+            id="{{this._id}}"
+            class="udex-tab-navigation__button-tab {{selectedClass}} {{classWithIconWithoutBackground}} {{buttonClassWithIcon}}"
+            tabindex="{{this.linkTabIndex}}"
+            role="tab"
+            aria-posinset="{{this._posinset}}"
+            aria-setsize="{{this._setsize}}"
+            href="{{href}}"
+            target="{{target}}"
+            {{#if this.widthStyle}}style="{{this.widthStyle}}"{{/if}}
+            ._realTab="{{this}}">
+            {{>tab-content}}
+        </a>
+    {{/if}}
 {{/if}}
 
 {{#*inline "tab-content"}}
@@ -56,9 +103,14 @@
                 {{numberBadge}}
             </udex-badge>
         {{/if}}
+        {{#if hasNotIcon}}
+            <span class="udex-tab-navigation__button-badge"></span>
+        {{/if}}
     </p>
-    {{#if hasNotIcon}}
-        <span class="udex-tab-navigation__button-badge"></span>
-    {{/if}}
-    <span aria-hidden="true" class="hidden" id="udex-tab-navigation__{{this._id}}__accessible-name">{{accessibleNameText}}</span>
+    <span
+        class="visually-hidden"
+        id="udex-tab-navigation__{{this._id}}__accessible-name"
+    >
+        {{accessibleNameText}}
+    </span>
 {{/inline}}