@sapudex/web-components 2.34.0 → 2.36.0

package/cypress/specs/Breadcrumbs.cy.tsx

@@ -162,18 +162,17 @@ describe("Breadcrumbs", () => {
     });
 
     it("wraps each focusable dropdown link in a <li> element", () => {
-      // Exclude the current-page <li aria-hidden="true"> which holds a <span>, not a link.
       cy.get("#breadcrumbs").shadow()
-        .find(".udex-breadcrumbs__popover-content ol > li:not([aria-hidden])")
-        .each($li => {
-          cy.wrap($li).find("[udex-link]").should("exist");
+        .find("[udex-link].udex-breadcrumbs__item--hidden")
+        .each($link => {
+          cy.wrap($link).parent("li").should("exist");
         });
     });
 
     it("wraps the current-page dropdown entry in a <li> with aria-hidden='true'", () => {
       cy.get("#breadcrumbs").shadow()
-        .find("li[aria-hidden='true']")
         .find(".udex-breadcrumbs__item--current")
+        .parent("li[aria-hidden='true']")
         .should("exist");
     });
   });

package/cypress/specs/ListItem.cy.tsx

@@ -6,7 +6,7 @@ import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
 import { UDExDisplayType } from "../../src/RatingIndicator.js";
 
-const defaultListItem = <UDExListItem
+const defaultListItem = <UDExListItem         
   id="listItem"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -21,7 +21,7 @@ const defaultListItem = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemSuccess = <UDExListItem
+const listItemSuccess = <UDExListItem         
   id="listItemSuccess"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -34,7 +34,7 @@ const listItemSuccess = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemError = <UDExListItem
+const listItemError = <UDExListItem         
   id="listItemError"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -47,7 +47,7 @@ const listItemError = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWarning = <UDExListItem
+const listItemWarning = <UDExListItem         
   id="listItemWarning"
   accessibleName="accessible-name"
   supportingText="Supporting text"
@@ -60,7 +60,7 @@ const listItemWarning = <UDExListItem
   Default List Item
 </UDExListItem>
 
-const listItemWithIcons = <UDExListItem
+const listItemWithIcons = <UDExListItem         
   id="listItemIcons"
   accessible-name="accessible-name"
   supporting-text="Supporting text"
@@ -88,32 +88,36 @@ describe("ListItem", () => {
         cy.get("[udex-list-item]").should("exist");
       });
     });
-
+  
     describe("Basic attributes", () => {
       beforeEach(() => {
         cy.mount(defaultListItem);
       });
-
+  
       it("has correct supporting text", () => {
         cy.get("#listItem").shadow().find(".udex-list__supporting-text").should("have.text", "Supporting text");
       });
-
+  
       it("has correct avatar", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("exist");
       });
-
+  
       it("has avatar of size M", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "size", "M");
       });
-
+  
       it("has avatar of shape Square", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").should("have.attr", "shape", "Square");
       });
-
+  
       it("has avatar with alternative text", () => {
         cy.get("#listItem").shadow().find(".udex-list__avatar").find("img").should("have.attr", "alt", "Person Avatar");
       });
-
+  
+      it("renders bullet marker at the start of the item", () => {
+        cy.get("#listItem").shadow().find(".udex-list__circle").should("exist");
+      });
+  
       it("has correct accessibleName", () => {
         cy.get("#listItem").shadow().find(".udex-list__content-wrap").should(($wrapper) => {
           const itemId = $wrapper.attr("_id");
@@ -130,48 +134,48 @@ describe("ListItem", () => {
         cy.get("#listItem").shadow().find("udex-status-badge").should("have.attr", "size", UDExAvatarSize.M);
       });
     });
-
+  
     describe("With Icons", () => {
       beforeEach(() => {
         cy.mount(listItemWithIcons);
       });
-
+  
       it("renders first and second icons when both slots are filled", () => {
         cy.get("#listItemIcons").find("udex-button").should("have.length", 2);
       });
-
+  
       it("becomes selected when clicking", () => {
         cy.get("#listItemIcons").shadow().find(".udex-list__item").click();
         cy.get("#listItemIcons").should("have.attr", "selected");
       });
-
+  
       it("pressing Enter sets data-selected", () => {
         cy.realPress("Enter");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
-
+  
       it("pressing Space sets data-selected", () => {
         cy.realPress("Space");
         cy.get("#listItemIcons").shadow().find(".udex-list__item").should("have.attr", "data-selected");
       });
     });
-
+  
     describe("Additional Text States", () => {
       it("shows Information state", () => {
         cy.mount(defaultListItem);
         cy.get("#listItem").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(0, 64, 176)");
       });
-
+  
       it("shows Success state", () => {
         cy.mount(listItemSuccess);
         cy.get("#listItemSuccess").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(30, 89, 47)");
       });
-
+  
       it("shows Error state", () => {
         cy.mount(listItemError);
         cy.get("#listItemError").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(132, 6, 6)");
       });
-
+  
       it("shows Warning state", () => {
         cy.mount(listItemWarning);
         cy.get("#listItemWarning").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(141, 42, 0)");

package/cypress/specs/MastheadMenu.cy.tsx

@@ -495,6 +495,87 @@ describe("UDExMastheadMenu — 3rd-level navigation (sub-items)", () => {
     });
   });
 
+  // Added: verifies focusInnerElement is used for Home/End/Tab navigation within the menu
+  describe("Keyboard navigation (Home/End/Tab focus inner element)", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-keyboard"
+          subItems={JSON.stringify(itemsWithSubItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("Home key focuses the inner element of the first menu item", () => {
+      // Focus the last link, then press Home — should move focus to the inner element of the first link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress("Home");
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    it("End key focuses the inner element of the last menu item", () => {
+      // Focus the first link, then press End — should move focus to the inner element of the last link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress("End");
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    it("Shift+Tab focuses the inner element of the previous menu item", () => {
+      // Focus the second link, then press Shift+Tab — should focus the inner element of the first link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .eq(1)
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress(["Shift", "Tab"]);
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    it("Tab focuses the inner element of the next menu item", () => {
+      // Focus the first link, then press Tab — should focus the inner element of the second link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress("Tab");
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .eq(1)
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+  });
+
   describe("Mixed linked and non-linked sub-categories in the same list", () => {
     beforeEach(() => {
       cy.mount(

package/cypress/specs/MastheadShell.cy.tsx

@@ -407,6 +407,85 @@ describe("MastheadShell Default component", () => {
       cy.realPress(["Shift", "Tab"]);
       cy.get("#support-item").should("be.focused");
     });
+
+    // Added: verifies Safari Tab-into-dropdown fix — when dropdown is open, Tab moves focus into the first menu item
+    it("Tab moves focus into the first dropdown menu item when dropdown is open", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+      cy.realPress("Tab");
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    // Updated: unified handleKeyDown uses composedPath() guard to let Tab within dropdown advance normally
+    it("Tab on first dropdown item moves focus to second item, not back to first", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+      // Tab into the dropdown — focuses first item
+      cy.realPress("Tab");
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+      // Tab again — should advance to second item (not reset to first)
+      cy.realPress("Tab");
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .eq(1)
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    // Added: verifies Tab on last dropdown item exits dropdown instead of looping back to first item
+    it("Tab on last dropdown item exits dropdown and moves focus to the next top-level menu item", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+
+      // Focus the last focusable menu item in the dropdown (items with url only)
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .filter((_, el) => !!el.getAttribute("url"))
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+
+      // Verify we are on the last item before pressing Tab
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .filter((_, el) => !!el.getAttribute("url"))
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+
+      // Tab should exit the dropdown — NOT loop back to the first item
+      cy.realPress("Tab");
+
+      // The first dropdown item should NOT be focused (no looping)
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("not.be.focused");
+
+      // The dropdown should close because focus left the masthead item
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("not.exist");
+    });
   });
 
   describe("Component events", () => {

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -329,6 +329,20 @@ describe("Desktop", () => {
       .its("lastCall.args.0.detail").should("not.have.property", "isMore");
   });
 
+  it("sets CSS variable when dropdown opens on desktop", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .then($item => {
+        const item = $item[0] as HTMLElement;
+        const dropdown = item.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
+        const { top } = dropdown.getBoundingClientRect();
+        const expected = `${window.innerHeight - top - 24}px`;
+        expect(item.style.getPropertyValue("--udex-secondary-navigation-item-dropdown-desktop-max-height")).to.eq(expected);
+      });
+  });
+
   describe("Keyboard Navigation (Disclosure pattern)", () => {
     it("Tab key moves focus to the next top-level item", () => {
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2)

package/cypress/specs/SelectBox.cy.tsx

@@ -1,4 +1,4 @@
-import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem, UDExButton } from  "../support/component-imports.js";
+import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem, UDExButton, UDExModal } from  "../support/component-imports.js";
 import { UDExListMode } from "../../src/types/List.js";
 
 const selectBoxWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
@@ -115,6 +115,14 @@ const shortComponent = <div style="width: 350px; position:relative;"><UDExSelect
   <UDExSelectBoxItem label="Perl"></UDExSelectBoxItem>
 </UDExSelectBox></div>
 
+const singleSelectWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
+  id="select-box"
+  label="Rating">
+  <UDExSelectBoxItem rating="5" ratingCount="5.0" totalCount="23"></UDExSelectBoxItem>
+  <UDExSelectBoxItem rating="4" ratingCount="4.0" totalCount="17"></UDExSelectBoxItem>
+  <UDExSelectBoxItem rating="3" ratingCount="3.0" totalCount="34"></UDExSelectBoxItem>
+</UDExSelectBox></div>
+
 const groupHeader = <div style="width: 350px; position:relative;"><UDExSelectBox
   id="select-box"
   mode={UDExListMode.MultiSelect}
@@ -139,6 +147,18 @@ const selectAll = <div style="width: 350px; position:relative;">
 <a id="next-focus" href="#">Next focusable element</a>
 </div>
 
+const selectBoxInsideModal = <div style="width: 500px; position:relative;">
+  <UDExModal id="test-modal" open header-text="Test Modal">
+    <UDExSelectBox
+      id="select-box-in-modal"
+      label="Programming languages">
+      <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+      <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+      <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+    </UDExSelectBox>
+  </UDExModal>
+</div>
+
 describe("SelectBox", () => {
   it("tests if web component is correctly rendered", () => {
     cy.mount(<UDExSelectBox></UDExSelectBox>);
@@ -1125,6 +1145,54 @@ describe("SelectBox", () => {
         .should("exist");
     });
 
+    it("MultiSelect mode - selected rating item tag shows rating value with 'stars' text", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0).click();
+
+      cy.get("#select-box").shadow()
+        .find("udex-tag-group").shadow()
+        .find("udex-tag")
+        .first()
+        .should("have.attr", "text", "5 stars");
+    });
+
+    it("MultiSelect mode - no single-label shown after opening dropdown and clicking outside", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("body").realClick();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__single-label")
+        .should("not.exist");
+    });
+
+    it("no single-label shown after opening dropdown and clicking outside", () => {
+      cy.mount(singleSelectWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("body").realClick();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__single-label")
+        .should("not.exist");
+    });
+
+    it("shows ratingCount with 'stars' as the label when item has no text label", () => {
+      cy.mount(singleSelectWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0).click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__single-label")
+        .should("have.text", "5.0 stars");
+    });
+
     it("filters rating items by ratingCount when searching", () => {
       cy.mount(selectBoxWithRating);
       cy.get("#select-box").shadow().find(".udex-text-field__search").click();
@@ -1134,4 +1202,101 @@ describe("SelectBox", () => {
         .should("have.length", 1);
     });
   });
+
+  describe("SelectBox inside Modal - Escape key propagation", () => {
+    it("pressing Escape closes only the SelectBox dropdown, not the parent Modal", () => {
+      cy.mount(selectBoxInsideModal);
+
+      // Wait for Modal to be rendered and open
+      cy.get("#test-modal").should("have.attr", "open");
+
+      // Open the SelectBox dropdown by clicking the trigger
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-text-field__trigger")
+        .click();
+
+      // Verify the dropdown is open
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // Press Escape to close the dropdown
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-text-field__search")
+        .realPress("Escape");
+
+      // Assert the SelectBox dropdown is closed
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      // Assert the Modal is still open (Escape did not propagate to close it)
+      cy.get("#test-modal").should("have.attr", "open");
+    });
+
+    it("pressing Escape while navigating dropdown list items closes dropdown, not Modal", () => {
+      cy.mount(selectBoxInsideModal);
+
+      cy.get("#test-modal").should("have.attr", "open");
+
+      // Open dropdown and navigate into list items using keyboard
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-text-field__search")
+        .click()
+        .realPress("ArrowDown");
+
+      // Verify the dropdown is open
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      // Press Escape while focus is on a list item
+      cy.realPress("Escape");
+
+      // Assert the SelectBox dropdown is closed
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      // Assert the Modal is still open
+      cy.get("#test-modal").should("have.attr", "open");
+    });
+
+    // Updated: covers fix where Escape on search input with dropdown closed now propagates to parent Modal
+    it("pressing Escape with dropdown closed propagates to close the parent Modal", () => {
+      cy.mount(selectBoxInsideModal);
+
+      // Wait for Modal to be rendered and open
+      cy.get("#test-modal").should("have.attr", "open");
+
+      // Focus the search input without opening the dropdown
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-text-field__search")
+        .click();
+
+      // Close the dropdown if it opened from the click
+      cy.get("#select-box-in-modal").then($el => {
+        const selectBox = $el[0] as any;
+        selectBox.close();
+      });
+
+      // Verify the dropdown is closed
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      // Re-focus the search input (close() may have shifted focus)
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-text-field__search")
+        .focus();
+
+      // Press Escape while focused on the search input with dropdown closed
+      cy.get("#select-box-in-modal").shadow()
+        .find(".udex-text-field__search")
+        .realPress("Escape");
+
+      // Assert the Modal is closed (Escape propagated up to the Dialog handler)
+      cy.get("#test-modal").should("not.have.attr", "open");
+    });
+  });
 });

package/cypress/specs/Wizard.cy.tsx

@@ -77,4 +77,10 @@ describe("Wizard", () => {
     cy.get("#wizard").shadow().find("udex-wizard-tab").first()
     .shadow().find(".ui5-wiz-step-root").should("have.attr", "aria-label", "Step Access SAP Account 1 Step 1")
   });
+
+  it("mounts without throwing when no steps are slotted (dynamic rendering)", () => {
+    cy.mount(<UDExWizard id="empty-wizard"></UDExWizard>);
+    cy.get("#empty-wizard").should("exist");
+    cy.get("#empty-wizard").shadow().find(".ui5-wiz-nav").should("exist");
+  });
 });

package/cypress/support/component-imports.instrumented.ts

@@ -40,6 +40,7 @@ import UDExMastheadMobileMenu from "../../instrumented/MastheadMobileMenu.js";
 import UDExMastheadProfileMenu from "../../instrumented/MastheadProfileMenu.js";
 import UDExMastheadShell from "../../instrumented/MastheadShell.js";
 import UDExMessageStrip from "../../instrumented/MessageStrip.js";
+import UDExModal from "../../instrumented/Modal.js";
 import UDExSearch from "../../instrumented/Search.js";
 import UDExMediaPlayer from "../../instrumented/MediaPlayer.js";
 import UDExPasswordField from "../../instrumented/PasswordField.js";
@@ -124,6 +125,7 @@ export {
   UDExMastheadProfileMenu,
   UDExMastheadShell,
   UDExMessageStrip,
+  UDExModal,
   UDExMediaPlayer,
   UDExSearch,
   UDExPasswordField,

package/cypress/support/component-imports.src.ts

@@ -40,6 +40,7 @@ import UDExMastheadMobileMenu from "../../src/MastheadMobileMenu.js";
 import UDExMastheadProfileMenu from "../../src/MastheadProfileMenu.js";
 import UDExMastheadShell from "../../src/MastheadShell.js";
 import UDExMessageStrip from "../../src/MessageStrip.js";
+import UDExModal from "../../src/Modal.js";
 import UDExSearch from "../../src/Search.js";
 import UDExMediaPlayer from "../../src/MediaPlayer.js";
 import UDExPasswordField from "../../src/PasswordField.js";
@@ -124,6 +125,7 @@ export {
   UDExMastheadProfileMenu,
   UDExMastheadShell,
   UDExMessageStrip,
+  UDExModal,
   UDExMediaPlayer,
   UDExSearch,
   UDExPasswordField,

package/dist/BreadcrumbsPopoverTemplate.js

@@ -11,7 +11,7 @@ export default function BreadcrumbsPopoverTemplate() {
                         focusablePos++;
                     }
                     const posLabel = `${item.accessibleName || item.textContent || ""}, ${focusablePos} ${ofText} ${focusableCount}`;
-                    return item._isCurrentPageItem ? (_jsx("li", { "aria-hidden": "true", children: _jsx("span", { id: `${item._id}-li`, className: `${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`, "aria-current": "page", "accessible-name": item.accessibleName, "data-ui5-stable": item.stableDomRef, children: item.textContent }) }, index)) : (_jsx("li", { children: item.icon ? (_jsx(UDExLink, { "data-index": index, id: `${item._id}-li`, onClick: this._onDropdownLinkPress, href: item.href, target: item.target, class: `${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`, icon: item.icon, accessibleName: posLabel, "data-ui5-stable": item.stableDomRef, children: item.textContent })) : (_jsx(UDExLink, { "data-index": index, id: `${item._id}-li`, onClick: this._onDropdownLinkPress, href: item.href, target: item.target, class: `${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`, accessibleName: posLabel, "data-ui5-stable": item.stableDomRef, children: item.textContent })) }, index));
+                    return item._isCurrentPageItem ? (_jsx("li", { children: _jsx("span", { id: `${item._id}-li`, className: `${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`, "aria-current": "page", "accessible-name": item.accessibleName, "data-ui5-stable": item.stableDomRef, children: item.textContent }) }, index)) : (_jsx("li", { children: item.icon ? (_jsx(UDExLink, { "data-index": index, id: `${item._id}-li`, onClick: this._onDropdownLinkPress, href: item.href, target: item.target, class: `${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`, icon: item.icon, accessibleName: posLabel, "data-ui5-stable": item.stableDomRef, children: item.textContent })) : (_jsx(UDExLink, { "data-index": index, id: `${item._id}-li`, onClick: this._onDropdownLinkPress, href: item.href, target: item.target, class: `${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`, accessibleName: posLabel, "data-ui5-stable": item.stableDomRef, children: item.textContent })) }, index));
                 }) }) }) }));
 }
 //# sourceMappingURL=BreadcrumbsPopoverTemplate.js.map

package/dist/BreadcrumbsPopoverTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsPopoverTemplate.js","sourceRoot":"","sources":["../src/BreadcrumbsPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Breadcrumbs from \"./Breadcrumbs.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport { Placement, HorizontalAlign } from \"./types/Dropdown.js\";\n\nexport default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {\n  const focusableCount = this._dropdownItems.filter(i => !i._isCurrentPageItem).length;\n  const ofText = this._ofText;\n  let focusablePos = 0;\n\n  return (\n    <UDExDropdown\n      id={`udex-${this._id}-breadcrumbs__popover`}\n      opener={`udex-${this._id}-breadcrumbs__opener`}\n      class={`${this._rootClass}__popover ui5-breadcrumbs-popover`}\n      accessibleName={this._dropdownAccessibleNameText}\n      placement={Placement.Bottom}\n      horizontalAlign={HorizontalAlign.Start}\n      onKeyDown={this._handleKeydown}\n      onClose={this._afterDropdownClose}\n      onOpen={this._afterDropdownOpen}>\n      <nav className={`${this._rootClass}__popover-content`} aria-label={this._breadcrumbsAccessibleNameText}>\n        <ol>\n          {this._dropdownItems.map((item, index) => {\n            if (!item._isCurrentPageItem) { focusablePos++; }\n            const posLabel = `${item.accessibleName || item.textContent || \"\"}, ${focusablePos} ${ofText} ${focusableCount}`;\n            return item._isCurrentPageItem ? (\n              <li key={index} aria-hidden=\"true\">\n                <span\n                  id={`${item._id}-li`}\n                  className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}\n                  aria-current=\"page\"\n                  accessible-name={item.accessibleName}\n                  data-ui5-stable={item.stableDomRef}>\n                  {item.textContent}\n                </span>\n              </li>\n            ) : (\n              <li key={index}>\n                {item.icon ? (\n                  <UDExLink\n                    data-index={index}\n                    id={`${item._id}-li`}\n                    onClick={this._onDropdownLinkPress}\n                    href={item.href}\n                    target={item.target}\n                    class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}\n                    icon={item.icon}\n                    accessibleName={posLabel}\n                    data-ui5-stable={item.stableDomRef}>\n                    {item.textContent}\n                  </UDExLink>\n                ) : (\n                  <UDExLink\n                    data-index={index}\n                    id={`${item._id}-li`}\n                    onClick={this._onDropdownLinkPress}\n                    href={item.href}\n                    target={item.target}\n                    class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}\n                    accessibleName={posLabel}\n                    data-ui5-stable={item.stableDomRef}>\n                    {item.textContent}\n                  </UDExLink>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    </UDExDropdown>\n  );\n}\n"]}
+{"version":3,"file":"BreadcrumbsPopoverTemplate.js","sourceRoot":"","sources":["../src/BreadcrumbsPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type Breadcrumbs from \"./Breadcrumbs.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport { Placement, HorizontalAlign } from \"./types/Dropdown.js\";\n\nexport default function BreadcrumbsPopoverTemplate(this: Breadcrumbs) {\n  const focusableCount = this._dropdownItems.filter(i => !i._isCurrentPageItem).length;\n  const ofText = this._ofText;\n  let focusablePos = 0;\n\n  return (\n    <UDExDropdown\n      id={`udex-${this._id}-breadcrumbs__popover`}\n      opener={`udex-${this._id}-breadcrumbs__opener`}\n      class={`${this._rootClass}__popover ui5-breadcrumbs-popover`}\n      accessibleName={this._dropdownAccessibleNameText}\n      placement={Placement.Bottom}\n      horizontalAlign={HorizontalAlign.Start}\n      onKeyDown={this._handleKeydown}\n      onClose={this._afterDropdownClose}\n      onOpen={this._afterDropdownOpen}>\n      <nav className={`${this._rootClass}__popover-content`} aria-label={this._breadcrumbsAccessibleNameText}>\n        <ol>\n          {this._dropdownItems.map((item, index) => {\n            if (!item._isCurrentPageItem) { focusablePos++; }\n            const posLabel = `${item.accessibleName || item.textContent || \"\"}, ${focusablePos} ${ofText} ${focusableCount}`;\n            return item._isCurrentPageItem ? (\n              <li key={index}>\n                <span\n                  id={`${item._id}-li`}\n                  className={`${this._rootClass}__item ${this._rootClass}__item--current ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}\n                  aria-current=\"page\"\n                  accessible-name={item.accessibleName}\n                  data-ui5-stable={item.stableDomRef}>\n                  {item.textContent}\n                </span>\n              </li>\n            ) : (\n              <li key={index}>\n                {item.icon ? (\n                  <UDExLink\n                    data-index={index}\n                    id={`${item._id}-li`}\n                    onClick={this._onDropdownLinkPress}\n                    href={item.href}\n                    target={item.target}\n                    class={`${this._rootClass}__item ${this._rootClass}__item--with-icon ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}\n                    icon={item.icon}\n                    accessibleName={posLabel}\n                    data-ui5-stable={item.stableDomRef}>\n                    {item.textContent}\n                  </UDExLink>\n                ) : (\n                  <UDExLink\n                    data-index={index}\n                    id={`${item._id}-li`}\n                    onClick={this._onDropdownLinkPress}\n                    href={item.href}\n                    target={item.target}\n                    class={`${this._rootClass}__item ${this._rootClass}__item--hidden ${this._rootClass}__item--${index}`}\n                    accessibleName={posLabel}\n                    data-ui5-stable={item.stableDomRef}>\n                    {item.textContent}\n                  </UDExLink>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    </UDExDropdown>\n  );\n}\n"]}