@sapudex/web-components 2.2.0 → 2.4.0

package/src/Footer.ts

@@ -16,6 +16,7 @@ import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
 import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
@@ -394,36 +395,32 @@ class UDExFooter extends UI5Element {
     window.scrollTo(0, 0);
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   get parsedRef(): string | undefined {
     return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
   }
 
   get quickLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.quickLinks);
+    return parseArrayFromString<FooterLink>(this.quickLinks);
   }
 
   get trendingLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.trendingLinks);
+    return parseArrayFromString<FooterLink>(this.trendingLinks);
   }
 
   get aboutLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.aboutLinks);
+    return parseArrayFromString<FooterLink>(this.aboutLinks);
   }
 
   get siteInformationLinksArray(): FooterLink[] {
-    return this.parseArrayFromString<FooterLink>(this.siteInformationLinks);
+    return parseArrayFromString<FooterLink>(this.siteInformationLinks);
   }
 
   get contactNumbersArray(): FooterContactNumber[] {
-    return this.parseArrayFromString<FooterContactNumber>(this.contactNumbersList);
+    return parseArrayFromString<FooterContactNumber>(this.contactNumbersList);
   }
 
   get socialLinksArray(): FooterSocialLink[] {
-    return this.parseArrayFromString<FooterSocialLink>(this.socialLinks);
+    return parseArrayFromString<FooterSocialLink>(this.socialLinks);
   }
 
   get isContactContainerVisible(): boolean {

package/src/List.ts

@@ -42,7 +42,7 @@ type UDExListSelectionChangeEventDetail = {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- *\e
+ *
  *
  * <h3>Usage</h3>
  *

package/src/MastheadItem.hbs

@@ -65,8 +65,16 @@
     {{else if image}}
         <img
             class="udex-masthead-item__image"
+            id="{{this._id}}_image-alt"
             src="{{image}}"
             alt="{{imageAlt}}"/>
+            {{#if imageAlt}}
+                <span
+                    id="image-desc"
+                    class="udex-masthead-hidden-text">
+                    {{imageAlt}}
+                </span>
+            {{/if}}
     {{else}}
         <span class="udex-masthead-item__text">
             <slot></slot>

package/src/MastheadItem.ts

@@ -20,6 +20,7 @@ import type UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
 
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
@@ -31,7 +32,6 @@ export enum UDExMastheadDropdownItemAction {
 }
 
 export interface IMastheadItem {
-  text?: string;
   selected?: boolean;
   icon?: string;
   avatar?: Array<HTMLElement>;
@@ -449,12 +449,8 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   getSubItems(): Array<MenuItem> {
-    return this.parseArrayFromString(this.subItems);
+    return parseArrayFromString(this.subItems);
   }
 
   get mastheadShell(): UDExMastheadShell {
@@ -494,22 +490,18 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.selected ? " udex-masthead-item__button--active" : "";
   }
 
-  get ariaDescribedBy(): string {
+  get ariaDescribedBy(): string | undefined {
     const labels = [];
 
-    if (this.text) {
-      labels.push(`${this.__id}-text`);
-    }
-
-    if (this.icon) {
-      labels.push(`${this.__id}-icon`);
-    }
-
     if (this.isTargetBlank) {
       labels.push(`new-win-desc`);
     }
 
-    return labels.join(" ").trim();
+    if (this.imageAlt) {
+      labels.push(`image-desc`);
+    }
+
+    return labels.length ? labels.join(" ").trim() : undefined;
   }
 
   get isDropdownOpened(): boolean {

package/src/MastheadMenu.ts

@@ -11,6 +11,7 @@ import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -154,10 +155,6 @@ class UDExMastheadMenu extends UI5Element {
     return this.links.indexOf(item);
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   get links(): Array<UDExMastheadMenuItem> {
     const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll("[udex-masthead-menu-item]"));
     return menuItems.filter(({ url }) => url && url.length > 0);
@@ -165,7 +162,7 @@ class UDExMastheadMenu extends UI5Element {
 
   get itemsList(): Array<MenuItem> {
     let id = 1;
-    const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);
+    const parsedItems: Array<MenuItem> = parseArrayFromString(this.subItems);
     return parsedItems.map((mainItem: MenuItem) => {
       mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {
         category.categoryId = `${id++}`;

package/src/MastheadProfileMenu.ts

@@ -10,6 +10,7 @@ import { LOGOUT } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import MastheadProfileMenuTemplate from "./generated/templates/MastheadProfileMenuTemplate.lit.js";
 import type UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -135,10 +136,6 @@ class UDExMastheadProfileMenu extends UI5Element {
     });
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   get linksList(): string {
     return this.links ? JSON.stringify([{
       subMenuLinkItems: JSON.parse(this.links),
@@ -146,7 +143,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   get userData(): UserData {
-    return this.parseArrayFromString(this.loggedInUser) as UserData;
+    return parseArrayFromString(this.loggedInUser) as UserData;
   }
 
   get messageAvailable(): boolean {

package/src/MastheadShell.ts

@@ -387,6 +387,12 @@ class UDExMastheadShell extends UI5Element {
     this._handleResizeBound = this._handleResize.bind(this);
   }
 
+  onBeforeRendering() {
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
+  }
+
   onAfterRendering() {
     this._rootHolder = this.mastheadHolder;
     this._searchOpener = this.searchOpener;
@@ -414,7 +420,7 @@ class UDExMastheadShell extends UI5Element {
       this.handleMobileMode();
     }
 
-    if (this.isBreakpointSizeM) {
+    if (this.isAtMostBreakpointSizeM) {
       this._isSearchOpened = false;
     }
 
@@ -424,6 +430,10 @@ class UDExMastheadShell extends UI5Element {
       return;
     }
 
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
+
     this._shouldHandleResize = true;
   }
 
@@ -713,6 +723,12 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  setMobileMenuHeight(): void {
+    const mastheadHeight = parseInt(window.getComputedStyle(this).getPropertyValue("--udex-masthead-shell-height"));
+    const mobileMenuHeight = `${window.innerHeight - mastheadHeight}px`;
+    this.style.setProperty("--udex-masthead-shell-mobile-menu-height", mobileMenuHeight);
+  }
+
   removeMobileMode(): void {
     this._isMobileMode = false;
     this.slottedItems.forEach((item: MastheadSlottedItem) => {
@@ -735,7 +751,7 @@ class UDExMastheadShell extends UI5Element {
    */
   openSearch(): void {
     const shouldPreventOpeningSearch = this._isSearchOpened
-      || (this.isBreakpointSizeM && !this.showSearchByDefault)
+      || (this.isAtMostBreakpointSizeM && !this.showSearchByDefault)
       || this._isMobileMode
       || (this.isAtLeastBreakpointSizeM && this.showSearchByDefault);
 
@@ -758,7 +774,7 @@ class UDExMastheadShell extends UI5Element {
    * @public
    */
   openMobileMenu(): void {
-    if (!this._isMobileMenuOpen && (this._isMobileMode || this.isBreakpointSizeM)) {
+    if (!this._isMobileMenuOpen && this.isMobileMenuMode) {
       this.mobileBtn?.handleSelectedChange();
       this.handleOpenMobileMenu();
     }
@@ -873,7 +889,7 @@ class UDExMastheadShell extends UI5Element {
     return !!this.mobileMenu.length;
   }
 
-  get isBreakpointSizeM(): boolean {
+  get isAtMostBreakpointSizeM(): boolean {
     return BreakpointUtils.isAtMost("M");
   }
 
@@ -881,6 +897,10 @@ class UDExMastheadShell extends UI5Element {
     return BreakpointUtils.isAtLeast("M");
   }
 
+  get isMobileMenuMode(): boolean {
+    return this._isMobileMode || this.isAtMostBreakpointSizeM;
+  }
+
   get isMainMenuVisible(): boolean {
     return !this.showSearchByDefault && !this._isSearchOpened;
   }
@@ -890,7 +910,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get shouldHandleMobileView(): boolean {
-    return !this.isBreakpointSizeM && !this.showSearchByDefault;
+    return !this.isAtMostBreakpointSizeM && !this.showSearchByDefault;
   }
 
   get mainNavigationAriaLabel(): string {

package/src/Pagination.hbs

@@ -3,13 +3,15 @@
     <ul class="udex-pagination__list">
         <li class="udex-pagination__item--prev udex-pagination__item">
             <udex-button
-            ?disabled="{{prevButtonDisabled}}"
+            aria-disabled="{{effectivePrevButtonDisabled}}"
+            ?_aria-disabled="{{_prevButtonPseudoDisabled}}"
             accessible-name="{{previousPageAccessibleName}}"
             tooltip="{{previousBtnTooltip}}"
             size="Large"
             icon="navigation-left-arrow"
             design="Tertiary"
             @click="{{setPrevPage}}"
+            @focusout="{{handlePrevFocusOut}}"
             ></udex-button>
         </li>
         {{#if typeFull}}
@@ -17,7 +19,7 @@
                 <li class="udex-pagination__item">
                     <a class="udex-pagination__page" href="#" 
                         aria-label="{{accessibleName}}"
-                        @click="{{../onPageClick}}" 
+                        @click="{{../onPageClick}}"
                         ?active="{{active}}"
                         aria-current="{{ariaCurrent}}"
                         index="{{index}}">
@@ -35,13 +37,15 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}"
+            aria-disabled="{{effectiveNextButtonDisabled}}"
+            ?_aria-disabled="{{_nextButtonPseudoDisabled}}"
             tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
             icon="navigation-right-arrow"
             design="Tertiary"
             @click="{{setNextPage}}"
+            @focusout="{{handleNextFocusOut}}"
             ></udex-button>
         </li>
     </ul>

package/src/Pagination.ts

@@ -16,6 +16,7 @@ import {
   PREVIOUS_PAGE,
   NEXT_PAGE,
   CURRENT_PAGE,
+  DISABLED,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -124,6 +125,22 @@ class UDExPagination extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Defines if the previous button is in pseudo-disabled.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _nextButtonPseudoDisabled!: boolean;
+
+  /**
+   * Defines if the previous button is in pseudo-disabled.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _prevButtonPseudoDisabled!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -159,7 +176,7 @@ class UDExPagination extends UI5Element {
     this.setupPages(this.pages);
   }
 
-  get nextButtonDisbled(): boolean {
+  get nextButtonDisabled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
 
@@ -230,8 +247,12 @@ class UDExPagination extends UI5Element {
   }
 
   get previousPageAccessibleName(): string {
-    if (this.currentPageIndex === 0) { return UDExPagination.i18nBundle.getText(PREVIOUS_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
+    if (this._prevButtonPseudoDisabled || this.prevButtonDisabled) {
+      const effectiveDisabledText = this._prevButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)} ${effectiveDisabledText}`;
+    }
+    return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
@@ -239,12 +260,16 @@ class UDExPagination extends UI5Element {
   }
 
   get nextPageAccessibleName(): string {
-    if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
+    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
+    if (this._nextButtonPseudoDisabled || this.nextButtonDisabled) {
+      const effectiveDisabledText = this._nextButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)} ${effectiveDisabledText}`;
+    }
+    return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
-    return !this.nextButtonDisbled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+    return !this.nextButtonDisabled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
   }
 
   get pagination(): Page[] {
@@ -297,46 +322,38 @@ class UDExPagination extends UI5Element {
     this.currentPageIndex = currentPage + 1;
     this._pageFocusedManually = false;
 
+    this._nextButtonPseudoDisabled = this.currentPageIndex === (this.pages - 1);
+
     this.emitChangeEvent();
   }
 
-  setPrevPage(e: Event): void {
-    e.preventDefault();
-    const currentPage = this.currentPageIndex ?? 1;
-    if (this.pages && currentPage <= 0) {
-      return;
-    }
-    this.currentPageIndex -= 1;
-    this._pageFocusedManually = false;
-
-    this.emitChangeEvent();
+  get effectiveNextButtonDisabled(): boolean {
+    return !this._nextButtonPseudoDisabled && this.nextButtonDisabled;
   }
 
-  setFirstPage(e: Event): void {
-    e.preventDefault();
-    const currentPage = this.currentPageIndex ?? 1;
-    if (currentPage === 0) {
-      return;
-    }
+  get effectivePrevButtonDisabled(): boolean {
+    return !this._prevButtonPseudoDisabled && this.prevButtonDisabled;
+  }
 
-    this._firstPageIndex = 0;
-    this._lastPageIndex = this.displayNumber;
+  handlePrevFocusOut(): void {
+    this._prevButtonPseudoDisabled = false;
+  }
 
-    this.currentPageIndex = 0;
-    this.emitChangeEvent();
+  handleNextFocusOut(): void {
+    this._nextButtonPseudoDisabled = false;
   }
 
-  setLastPage(e: Event): void {
+  setPrevPage(e: Event): void {
     e.preventDefault();
     const currentPage = this.currentPageIndex ?? 1;
-    if (!this.pages || currentPage >= this.pages - 1) {
+    if (this.pages && currentPage <= 0) {
       return;
     }
+    this.currentPageIndex -= 1;
+    this._pageFocusedManually = false;
 
-    this._firstPageIndex = this.pages - this.displayNumber;
-    this._lastPageIndex = this.pages;
+    this._prevButtonPseudoDisabled = this.currentPageIndex === 0;
 
-    this.currentPageIndex = this._lastPageIndex - 1;
     this.emitChangeEvent();
   }
 

package/src/PhoneNumberField.hbs

@@ -64,7 +64,7 @@
                     <img
                         class="udex-phone-number-field__flag"
                         aria-label="{{selectedCountryName}}"
-                        style="{{selectedFlagBackgroundPosition}}">
+                        style="background-position-x: {{selectedFlagBackgroundPosition.x}}; background-position-y: {{selectedFlagBackgroundPosition.y}}">
                 </div>
             </udex-button>
         {{/unless}}

package/src/PhoneNumberField.ts

@@ -44,6 +44,11 @@ export enum UDExPhoneNumberFieldValueState {
   Success = "Success",
 }
 
+export type BackgroundPosition = {
+  x?: string,
+  y?: string,
+};
+
 const initialPlaceholder: string = "+X XXX-XXX-XXXX";
 /**
  * Maximum number of possible digits based on international standard https://en.wikipedia.org/wiki/E.164
@@ -564,7 +569,7 @@ class UDExPhoneNumberField extends UI5Element {
       || this.updatedCountriesList[0]?.countryName;
   }
 
-  get selectedFlagBackgroundPosition() {
+  get selectedFlagBackgroundPosition(): BackgroundPosition {
     if (!this.countryIso) {
       return {};
     }
@@ -575,7 +580,7 @@ class UDExPhoneNumberField extends UI5Element {
       return {};
     }
 
-    return { "backgroundPosition": `${selectedCountry.flagX} ${selectedCountry.flagY}` };
+    return { x: selectedCountry?.flagX, y: selectedCountry?.flagY };
   }
 
   get ariaInvalid(): string | null {

package/src/SearchableListBase.ts

@@ -97,6 +97,15 @@ class UDExSearchableListBase extends UI5Element {
   @property({ type: Boolean })
     busy?: boolean;
 
+  /**
+   * Defines if the search input is visible.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchInput!: boolean;
+
   /**
    * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
    *
@@ -324,7 +333,12 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   addSearchTermTag(text: string, str: string): string {
-    return text.replace(new RegExp(`(${str})`, "i"), "<b>$&</b>");
+    if (!str.length) {
+      return text;
+    }
+
+    const regex = new RegExp(`(${str})`, "i");
+    return text.replace(regex, "<b>$1</b>");
   }
 
   isIncludes(string: string, value: string): boolean {
@@ -502,8 +516,15 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get showSearch(): boolean {
-    const items = this.getSlottedItems(this.items).filter(({ isGroup }) => !isGroup);
-    return items.length > SHOW_SEARCH_AFTER_COUNT && !this.modeRadioGroup;
+    return this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+  }
+
+  get isSearchActive(): boolean {
+    return this.nonGroupItems.length > SHOW_SEARCH_AFTER_COUNT;
+  }
+
+  get nonGroupItems(): Array<UDExListItemBase> {
+    return this.getSlottedItems(this.items).filter(item => !item.isGroup);
   }
 
   get roleForGroupList(): string {

package/src/SecondaryNavigation.ts

@@ -20,6 +20,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
@@ -424,10 +426,6 @@ class UDExSecondaryNavigation extends UI5Element {
     });
   }
 
-  parseArrayFromString<T>(string: string): T[] {
-    return string ? JSON.parse(string) as T[] : [];
-  }
-
   resetTabIndex(): void {
     this.domNavItems.forEach((item, index) => {
       item._tabIndex = index === 0 ? "0" : "-1";
@@ -466,7 +464,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get parsedItems(): Array<NavItem> {
-    return this.parseArrayFromString<NavItem>(this.navItems);
+    return parseArrayFromString<NavItem>(this.navItems);
   }
 
   get visibleItems(): Array<NavItem> {

package/src/TextField.ts

@@ -224,6 +224,15 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     active!: boolean;
 
+  /**
+   * Defines if dropdown associated with text-field trigger has opened dropdown. It indicates active state of control button.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    iconActive!: boolean;
+
   /**
    * Defines the behaviour of autocomplete.
    * @default "off"

package/src/Wizard.ts

@@ -85,6 +85,30 @@ class UDExWizard extends UI5Wizard {
   @property({ type: Boolean })
     indeterminate!: boolean;
 
+  /**
+   * Defines aria-label of the wizard, read by screen readers with the first step.
+   *
+   * @public
+   */
+  @property({ type: String })
+    accessibleName!: string;
+
+  /**
+   * Defines the title of the current step.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _currentStepTitle?: string;
+
+  /**
+   * Defines the subtitle of the current step.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _currentStepSubTitle?: string;
+
   /**
    * Defines the current breakpoint.
    *
@@ -115,10 +139,6 @@ class UDExWizard extends UI5Wizard {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
-  onAfterRendering(): void {
-    this._calcCurrentBreakpoint();
-  }
-
   _adjustHeaderOverflow = () => {
     const tabs = this.stepsInHeaderDOM;
     tabs.forEach(step => {
@@ -168,13 +188,9 @@ class UDExWizard extends UI5Wizard {
     return this.steps.map((step, idx) => {
       const pos = idx + 1;
       const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;
-      const stepStateText = step.disabled
-        ? this.inactiveStepText
-        : this.activeStepText;
-      const ariaLabel = (
-        step.titleText
-          ? `${pos} ${step.titleText} ${stepStateText}`
-          : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`
+      const ariaLabel = (`${idx === 0 ? this.effectiveAccessibleName : ""} ${step.titleText
+        ? `${pos} ${step.titleText}`
+        : `${this.navStepDefaultHeading} ${pos}`}`
       ).trim();
       const isAfterCurrent = idx > selectedStepIndex;
       accInfo = {
@@ -209,6 +225,18 @@ class UDExWizard extends UI5Wizard {
     this._calcCurrentBreakpoint();
   }
 
+  onAfterRendering(): void {
+    this.attachStepsResizeObserver();
+    this._calcCurrentBreakpoint();
+    this.previouslySelectedStepIndex = this.selectedStepIndex;
+    this._currentStepTitle = this._steps[this.selectedStepIndex].titleText;
+    this._currentStepSubTitle = this._steps[this.selectedStepIndex].subtitleText;
+  }
+
+  get effectiveAccessibleName(): string {
+    return this.accessibleName || this.ariaLabelText;
+  }
+
   get slottedSteps(): UDExWizardStep[] {
     return this.getSlottedNodes("steps");
   }