@sapudex/web-components 2.35.0 → 2.37.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/Pagination.cy.tsx

@@ -0,0 +1,52 @@
+import { UDExPagination } from "../support/component-imports.js";
+
+describe("UDExPagination", () => {
+  describe("Focus management — _pageFocusedManually flag reset", () => {
+    it("does not call focusActivePage on programmatic currentPageIndex change after a user click", () => {
+      // Mount pagination with enough pages to navigate
+      cy.mount(
+        <div>
+          <button id="external-focus-target">External</button>
+          <UDExPagination id="pagination" pages={5} currentPageIndex={0} />
+        </div>,
+      );
+
+      // Wait for the component to render fully
+      cy.get("[udex-pagination]")
+        .shadow()
+        .find(".udex-pagination__page[data-index='0']")
+        .should("exist");
+
+      // Click on page 3 (index 2) — this sets _pageFocusedManually = true,
+      // triggers re-render, focusActivePage() runs and resets the flag
+      cy.get("[udex-pagination]")
+        .shadow()
+        .find(".udex-pagination__page[data-index='2']")
+        .click();
+
+      // Verify the click was registered (page 3 is now active)
+      cy.get("[udex-pagination]")
+        .shadow()
+        .find(".udex-pagination__page[data-index='2']")
+        .should("have.attr", "active");
+
+      // Move focus to an external element so we can detect if focus moves back
+      cy.get("#external-focus-target").focus();
+      cy.get("#external-focus-target").should("have.focus");
+
+      // Programmatically change currentPageIndex — this should NOT trigger focusActivePage
+      // because _pageFocusedManually was already consumed (reset to false) on the prior render
+      cy.get("[udex-pagination]").then(($el) => {
+        ($el[0] as any).currentPageIndex = 4;
+      });
+
+      // Allow time for re-render to complete
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy.wait(100);
+
+      // Assert that focus did NOT move to the pagination page button.
+      // Focus should remain on the external button.
+      cy.get("#external-focus-target").should("have.focus");
+    });
+  });
+});

package/cypress/specs/SelectBox.cy.tsx

@@ -1155,7 +1155,7 @@ describe("SelectBox", () => {
         .find("udex-tag-group").shadow()
         .find("udex-tag")
         .first()
-        .should("have.attr", "text", "5 stars");
+        .should("have.attr", "text", "5 stars");
     });
 
     it("MultiSelect mode - no single-label shown after opening dropdown and clicking outside", () => {

package/cypress/specs/TabNavigation.cy.tsx

@@ -1613,6 +1613,320 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  // ── Disabled tab behaviour ──────────────────────────────────────────────────
+
+  describe("Disabled tab", () => {
+    describe("Rendering", () => {
+      it("renders aria-disabled='true' on a disabled tab button", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-disabled", "true");
+      });
+
+      it("does not set native disabled attribute — tab remains in DOM for assistive technology", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("not.have.attr", "disabled");
+      });
+
+      it("applies disabled opacity style to the disabled tab button", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-disabled='true']")
+          .should("have.css", "opacity", "0.4");
+      });
+
+      it("does not apply aria-disabled on enabled tabs", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("not.have.attr", "aria-disabled");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("not.have.attr", "aria-disabled");
+      });
+    });
+
+    describe("Interaction", () => {
+      it("does not change the selected tab when a disabled tab is clicked", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Force click because pointer-events: none prevents normal click
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click({ force: true });
+
+        // Tab 1 should remain selected
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 1");
+
+        // Tab 2 should NOT be selected
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "false");
+      });
+
+      it("does not fire tab-select event when a disabled tab is clicked", () => {
+        const tabSelectHandler = cy.stub().as("tabSelect");
+
+        cy.mount(
+          <UDExTabNavigation onTabSelect={tabSelectHandler}>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click({ force: true });
+
+        cy.get("@tabSelect").should("not.have.been.called");
+      });
+    });
+
+    describe("Keyboard navigation", () => {
+      it("disabled tab has tabindex='-1' even when it would otherwise be the roving-tabindex target", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // The disabled tab should always have tabindex -1
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-disabled='true']")
+          .should("have.attr", "tabindex", "-1");
+      });
+
+      it("arrow-key navigation skips disabled tab (ArrowRight)", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Focus Tab 1 and press ArrowRight — should skip Tab 2 (disabled) and land on Tab 3
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips disabled tab (ArrowLeft)", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1"><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3" selected><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Focus Tab 3 and press ArrowLeft — should skip Tab 2 (disabled) and land on Tab 1
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("ArrowLeft");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips multiple consecutive disabled tabs", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3" disabled><div>Content 3</div></UDExTab>
+            <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips disabled tabs in vertical mode (ArrowDown)", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Vertical">
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowDown");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+    });
+
+    describe("Default selection", () => {
+      it("selects the first non-disabled tab when the first tab is disabled and none are explicitly selected", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 2");
+      });
+
+      it("selects the first non-disabled tab when multiple leading tabs are disabled", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+            <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+      });
+
+      it("ignores selected attribute on a disabled tab and falls back to first enabled tab", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // The disabled tab cannot be selected, so the first enabled tab is chosen
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 2");
+      });
+    });
+
+    describe("Auto-play skips disabled tabs", () => {
+      it("auto-play advances past disabled tabs", () => {
+        cy.clock(0, ["setInterval", "clearInterval"]);
+        cy.mount(
+          <UDExTabNavigation
+            orientation="Vertical"
+            autoPlay
+            autoPlayInterval={1000}
+          >
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // After 1 tick, auto-play should skip disabled Tab 2 and select Tab 3
+        cy.tick(1000);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+      });
+    });
+  });
+
   // ── Process Tab variant ──────────────────────────────────────────────────────
 
   describe("TabNavigation - Process Tab variant", () => {

package/cypress/specs/Table.cy.tsx

@@ -269,6 +269,10 @@ describe("Table", () => {
     cy.get("#table").shadow().find(".udex-table").should("have.attr", "aria-label", "table devices")
   });
 
+  it("header holder has role presentation to be transparent in the ARIA tree", () => {
+    cy.get("#table").shadow().find(".udex-table__header-holder").should("have.attr", "role", "presentation");
+  });
+
   it("renders the right amount of header rows",  () => {
     cy.get("#table").find("udex-table-header-row").should("have.length", 1)
   });
@@ -357,3 +361,169 @@ describe("Table", () => {
     })
   });
 });
+
+const multipleGroupRowsTable = <UDExTable id="table-multi-group">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableGroupRow id="group-row-1" group-title="Group A" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item A1</UDExTableCell>
+      <UDExTableCell>$100</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+  <UDExTableGroupRow id="group-row-2" group-title="Group B" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item B1</UDExTableCell>
+      <UDExTableCell>$200</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+  <UDExTableGroupRow id="group-row-3" group-title="Group C" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item C1</UDExTableCell>
+      <UDExTableCell>$300</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+</UDExTable>;
+
+describe("TableGroupRow Accessibility", () => {
+  beforeEach(() => {
+    cy.mount(multipleGroupRowsTable);
+  });
+
+  it("generates unique button IDs for each collapsible group row", () => {
+    const ids: string[] = [];
+
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-btn").invoke("attr", "id").then(id => {
+        expect(id).to.match(/^udex-table-group-opener-/);
+        ids.push(id as string);
+      });
+    }).then(() => {
+      const uniqueIds = new Set(ids);
+      expect(uniqueIds.size).to.equal(ids.length, "All group row button IDs must be unique");
+    });
+  });
+
+  it("button aria-controls references an existing element in the shadow DOM", () => {
+    cy.get("#group-row-1").shadow().find(".udex-table-grow-btn").then($btn => {
+      const controlsId = $btn.attr("aria-controls");
+      expect(controlsId).to.match(/^udex-table-group-rows-/);
+      cy.get("#group-row-1").shadow().find(`#${controlsId}`).should("exist").and("have.class", "udex-table-grow-rows");
+    });
+  });
+
+  it("button aria-controls value matches the rows container ID on the same instance", () => {
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-btn").invoke("attr", "aria-controls").then(controlsValue => {
+        cy.wrap($groupRow).shadow().find(".udex-table-grow-rows").invoke("attr", "id").should("equal", controlsValue);
+      });
+    });
+  });
+
+  it("each rows container has a unique ID matching its group row instance", () => {
+    const containerIds: string[] = [];
+
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-rows").invoke("attr", "id").then(id => {
+        expect(id).to.match(/^udex-table-group-rows-/);
+        containerIds.push(id as string);
+      });
+    }).then(() => {
+      const uniqueIds = new Set(containerIds);
+      expect(uniqueIds.size).to.equal(containerIds.length, "All rows container IDs must be unique");
+    });
+  });
+});
+
+const nonCollapsibleGroupRowTable = <UDExTable id="table-non-collapsible-group">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableGroupRow id="non-collapsible-group" group-title="Static Group">
+    <UDExTableRow>
+      <UDExTableCell>Item 1</UDExTableCell>
+      <UDExTableCell>$50</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+</UDExTable>;
+
+describe("TableGroupRow ARIA Structure", () => {
+  describe("Collapsible group row", () => {
+    beforeEach(() => {
+      cy.mount(multipleGroupRowsTable);
+    });
+
+    it("contains a div with role='row' and class 'udex-table-group-header-row'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='row']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-row");
+    });
+
+    it("the row wrapper contains a div with role='rowheader'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='row'] > div[role='rowheader']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-cell");
+    });
+
+    it("the rowheader contains the button with class 'udex-table-grow-btn'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='rowheader'] > button.udex-table-grow-btn")
+        .should("exist");
+    });
+
+    it("the row and rowheader wrappers have display:contents", () => {
+      cy.get("#group-row-1").shadow().find(".udex-table-group-header-row").then($row => {
+        expect(window.getComputedStyle($row[0]).display).to.equal("contents");
+      });
+      cy.get("#group-row-1").shadow().find(".udex-table-group-header-cell").then($cell => {
+        expect(window.getComputedStyle($cell[0]).display).to.equal("contents");
+      });
+    });
+
+    it("all collapsible group rows have the row > rowheader > button structure", () => {
+      cy.get("[udex-table-group-row]").each($groupRow => {
+        cy.wrap($groupRow).shadow().find("div[role='row'] > div[role='rowheader'] > button.udex-table-grow-btn")
+          .should("exist");
+      });
+    });
+  });
+
+  describe("Non-collapsible group row", () => {
+    beforeEach(() => {
+      cy.mount(nonCollapsibleGroupRowTable);
+    });
+
+    it("contains a div with role='row' and class 'udex-table-group-header-row'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='row']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-row");
+    });
+
+    it("the row wrapper contains a div with role='rowheader'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='row'] > div[role='rowheader']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-cell");
+    });
+
+    it("the rowheader contains a div (not button) with class 'udex-table-grow-btn'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='rowheader'] > div.udex-table-grow-btn")
+        .should("exist");
+    });
+
+    it("the non-collapsible title div displays the group title", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='rowheader'] .udex-table-grow-btn")
+        .should("have.text", "Static Group");
+    });
+
+    it("the row and rowheader wrappers have display:contents", () => {
+      cy.get("#non-collapsible-group").shadow().find(".udex-table-group-header-row").then($row => {
+        expect(window.getComputedStyle($row[0]).display).to.equal("contents");
+      });
+      cy.get("#non-collapsible-group").shadow().find(".udex-table-group-header-cell").then($cell => {
+        expect(window.getComputedStyle($cell[0]).display).to.equal("contents");
+      });
+    });
+  });
+});

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

@@ -43,6 +43,7 @@ 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 UDExPagination from "../../instrumented/Pagination.js";
 import UDExPasswordField from "../../instrumented/PasswordField.js";
 import UDExPhoneNumberField from "../../instrumented/PhoneNumberField.js";
 import UDExPromoTile from "../../instrumented/PromoTile.js";
@@ -128,6 +129,7 @@ export {
   UDExModal,
   UDExMediaPlayer,
   UDExSearch,
+  UDExPagination,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

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

@@ -43,6 +43,7 @@ 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 UDExPagination from "../../src/Pagination.js";
 import UDExPasswordField from "../../src/PasswordField.js";
 import UDExPhoneNumberField from "../../src/PhoneNumberField.js";
 import UDExPromoTile from "../../src/PromoTile.js";
@@ -128,6 +129,7 @@ export {
   UDExModal,
   UDExMediaPlayer,
   UDExSearch,
+  UDExPagination,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

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