@sapudex/web-components 2.32.1 → 2.34.0

package/cypress/specs/TabNavigation.cy.tsx

@@ -1,6 +1,25 @@
 import UDExTabNavigation, { UDExTabNavigationOrientation, UDExTabNavigationPlacement, UDExTabNavigationVerticalAlignment } from "../../src/TabNavigation.js";
 import UDExTab from "../../src/Tab.js";
 
+// ─── Process Tab fixtures ─────────────────────────────────────────────────────
+
+const processTabNavigation = (
+  <UDExTabNavigation id="process-tab-navigation" processTab>
+    <UDExTab text="Step 1" icon="home" itemCountText="1 of 4" selected>
+      <div>Step 1 Content</div>
+    </UDExTab>
+    <UDExTab text="Step 2" icon="action" itemCountText="2 of 4">
+      <div>Step 2 Content</div>
+    </UDExTab>
+    <UDExTab text="Step 3" icon="add" itemCountText="3 of 4">
+      <div>Step 3 Content</div>
+    </UDExTab>
+    <UDExTab text="Step 4" icon="delete">
+      <div>Step 4 Content</div>
+    </UDExTab>
+  </UDExTabNavigation>
+);
+
 // Test fixtures
 const verticalTabNavigation = (
   <UDExTabNavigation orientation="Vertical" id="verticalTabNav">
@@ -167,20 +186,28 @@ describe("Tab Navigation component", () => {
    * that don't work reliably in the component test environment. The overflow logic
    * triggers when tab widths exceed the container width, but in isolated component tests
    * the dimensions aren't calculated the same way as in a full page context.
-   * 
-   * The original WebDriver.io tests (TabNavigation.spec.js) that run in full page context
-   * successfully test the overflow behavior including:
-   * - More button visibility
-   * - Dropdown opening/closing
-   * - Keyboard navigation in dropdown (Arrow keys, Home, End, Enter, Escape, Tab, Shift+Tab)
-   * 
-   * These tests remain in the WebDriver.io suite and provide coverage for overflow functionality.
+   *
+   * When implementing overflow tests in the future, note that the More button is now a
+   * <udex-button class="udex-tab-navigation__button-more"> (not a native <button>).
+   * Key assertions should use:
+   *   - selector: `.udex-tab-navigation__button-more` (class-only, works for udex-button)
+   *   - visibility:  the element's `hidden` attribute controls show/hide
+   *   - toggled state: check the `toggled` boolean property/attribute on the udex-button
+   *     element (not a CSS class like `udex-tab-navigation__button-more--toggled`, which
+   *     was removed when the button was converted to udex-button)
+   *   - design/size: assert `design="Tertiary"` and `size="Medium"` on the udex-button
+   *   - icon: the down-arrow icon is now supplied via the `end-icon` prop on udex-button,
+   *     not a separate `.udex-tab-navigation__button-more-icon` element (which was removed)
+   *
+   * Overflow behaviour is covered by the WebDriver.io fixture in test/pages/tab-navigation.html
+   * (the #tab-navigation-overflow element with 20 tabs). WebdriverIO specs for overflow have
+   * not yet been written; when added they should live in test/specs/TabNavigation.spec.js.
    */
-  describe.skip("Horizontal Tabs - Overflow Behavior (tested in WebDriver.io)", () => {
+  describe.skip("Horizontal Tabs - Overflow Behavior", () => {
     // Tests skipped - see note above
   });
 
-  describe.skip("Overflow Tabs - Accessibility Keyboard Navigation (tested in WebDriver.io)", () => {
+  describe.skip("Overflow Tabs - Accessibility Keyboard Navigation", () => {
     // Tests skipped - see note above
   });
 
@@ -1585,4 +1612,398 @@ describe("Tab Navigation component", () => {
         .should("contain.text", "Tab 10");
     });
   });
+
+  // ── Process Tab variant ──────────────────────────────────────────────────────
+
+  describe("TabNavigation - Process Tab variant", () => {
+    describe("Propagation of _isProcessTab", () => {
+      it("sets the process-tab attribute on the host when processTab is true", () => {
+        cy.mount(processTabNavigation);
+
+        cy.get("[udex-tab-navigation]")
+          .should("have.attr", "process-tab");
+      });
+
+      it("applies .udex-tab-navigation__button-tab--process class to every tab button when processTab is active", () => {
+        cy.mount(processTabNavigation);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length", 4)
+          .each($btn => {
+            cy.wrap($btn).should("have.class", "udex-tab-navigation__button-tab--process");
+          });
+      });
+
+      it("does NOT apply .udex-tab-navigation__button-tab--process when processTab is false", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("not.have.class", "udex-tab-navigation__button-tab--process");
+      });
+    });
+
+    describe("Text block wrapper rendering", () => {
+      it("wraps label in .udex-tab-navigation__button-text-block when processTab is active", () => {
+        cy.mount(processTabNavigation);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .each($btn => {
+            cy.wrap($btn).find(".udex-tab-navigation__button-text-block").should("exist");
+          });
+      });
+
+      it("does NOT render .udex-tab-navigation__button-text-block when processTab is false", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-text-block")
+          .should("not.exist");
+      });
+    });
+
+    describe("Item count text rendering", () => {
+      it("renders .udex-tab-navigation__button-item-count inside the text block when itemCountText is set", () => {
+        cy.mount(processTabNavigation);
+
+        // First three tabs have itemCountText set
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .find(".udex-tab-navigation__button-text-block .udex-tab-navigation__button-item-count")
+          .should("exist")
+          .and("have.text", "1 of 4");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .find(".udex-tab-navigation__button-item-count")
+          .should("have.text", "2 of 4");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .find(".udex-tab-navigation__button-item-count")
+          .should("have.text", "3 of 4");
+      });
+
+      // Updated: item count span is now always rendered for process tabs; tabs without
+      // itemCountText show "0" via effectiveItemCountText (hasItemCountText no longer drives rendering).
+      it("renders .udex-tab-navigation__button-item-count with text '0' when itemCountText is absent but processTab is active", () => {
+        cy.mount(processTabNavigation);
+
+        // Fourth tab has no itemCountText — count span must exist and read "0"
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .find(".udex-tab-navigation__button-item-count")
+          .should("exist")
+          .and("have.text", "0");
+
+        // .udex-tab-navigation__button-text-block must still be present
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .find(".udex-tab-navigation__button-text-block")
+          .should("exist");
+      });
+
+      it("does NOT render .udex-tab-navigation__button-item-count when processTab is false even if itemCountText is set", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" itemCountText="70 of 123" selected>
+              <div>Content 1</div>
+            </UDExTab>
+            <UDExTab text="Tab 2" itemCountText="50 of 123">
+              <div>Content 2</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-item-count")
+          .should("not.exist");
+      });
+
+      it("item count text is inside the text block, which is inside the tab button", () => {
+        cy.mount(processTabNavigation);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .within(() => {
+            cy.get(".udex-tab-navigation__button-text-block").within(() => {
+              cy.get(".udex-tab-navigation__button-item-count").should("have.text", "1 of 4");
+              cy.get(".udex-tab-navigation__button-text").should("contain.text", "Step 1");
+            });
+          });
+      });
+    });
+
+    describe("Tab label rendering inside text block", () => {
+      it("renders the tab label inside .udex-tab-navigation__button-text-block in process tab mode", () => {
+        cy.mount(processTabNavigation);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .each(($btn, i) => {
+            cy.wrap($btn)
+              .find(".udex-tab-navigation__button-text-block .udex-tab-navigation__button-text")
+              .should("contain.text", `Step ${i + 1}`);
+          });
+      });
+    });
+
+    describe("Tab selection in process tab variant", () => {
+      beforeEach(() => {
+        cy.mount(processTabNavigation);
+      });
+
+      it("first tab is selected by default", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Step 1");
+      });
+
+      it("clicking a process tab selects it and updates aria-selected", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click();
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "true")
+          .and("have.class", "udex-tab-navigation__button-tab--active");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("have.attr", "aria-selected", "false");
+      });
+
+      it("selected process tab retains .udex-tab-navigation__button-tab--process class", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .click();
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("have.class", "udex-tab-navigation__button-tab--process");
+      });
+
+      it("fires tab-select event when a process tab is clicked", () => {
+        const tabSelectHandler = cy.stub().as("tabSelect");
+
+        cy.mount(
+          <UDExTabNavigation processTab onTabSelect={tabSelectHandler}>
+            <UDExTab text="Step 1" icon="home" itemCountText="1 of 2" selected>
+              <div>Content 1</div>
+            </UDExTab>
+            <UDExTab text="Step 2" icon="action" itemCountText="2 of 2">
+              <div>Content 2</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click();
+
+        cy.get("@tabSelect").should("have.been.called");
+      });
+    });
+
+    describe("Keyboard navigation in process tab variant", () => {
+      beforeEach(() => {
+        cy.mount(processTabNavigation);
+      });
+
+      it("navigates to next process tab with ArrowRight key", () => {
+        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(1)
+          .should("be.focused");
+      });
+
+      it("navigates to previous process tab with ArrowLeft key", () => {
+        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(1)
+          .should("be.focused");
+      });
+
+      it("activates a process tab with Enter key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .focus()
+          .realPress("Enter");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+      });
+
+      it("activates a process tab with Space key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("Space");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("have.attr", "aria-selected", "true");
+      });
+
+      it("moves focus to first tab with Home key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .focus()
+          .realPress("Home");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("moves focus to last tab with End key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("End");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .should("be.focused");
+      });
+    });
+
+    describe("Accessibility - process tab variant", () => {
+      beforeEach(() => {
+        cy.mount(processTabNavigation);
+      });
+
+      it("every process tab button has role=tab", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length", 4);
+      });
+
+      it("tablist has correct ARIA orientation for horizontal process tabs", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("[role='tablist']")
+          .should("have.attr", "aria-orientation", "horizontal");
+      });
+
+      it("selected process tab has tabindex 0, others have tabindex -1", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("have.attr", "tabindex", "0");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='false']")
+          .each($btn => {
+            cy.wrap($btn).should("have.attr", "tabindex", "-1");
+          });
+      });
+
+      it("process tab button has aria-controls pointing to the tab panel", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .each($btn => {
+            cy.wrap($btn).should("have.attr", "aria-controls");
+          });
+      });
+
+      it("item count text is inside the button so screen readers read it as part of the tab label", () => {
+        // .udex-tab-navigation__button-item-count must be a descendant of button[role='tab'],
+        // ensuring it is included in the accessible name computation.
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .find(".udex-tab-navigation__button-item-count")
+          .should("exist");
+      });
+
+      it("process tab buttons are focusable", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .focus()
+          .should("be.focused");
+      });
+    });
+  });
 });

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

@@ -34,8 +34,13 @@ import UDExLinkListItem from "../../instrumented/LinkListItem.js";
 import UDExList from "../../instrumented/List.js";
 import UDExListGroupHeader from "../../instrumented/ListGroupHeader.js";
 import UDExListItem from "../../instrumented/ListItem.js";
+import UDExMastheadItem from "../../instrumented/MastheadItem.js";
+import UDExMastheadMenu from "../../instrumented/MastheadMenu.js";
+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 UDExSearch from "../../instrumented/Search.js";
 import UDExMediaPlayer from "../../instrumented/MediaPlayer.js";
 import UDExPasswordField from "../../instrumented/PasswordField.js";
 import UDExPhoneNumberField from "../../instrumented/PhoneNumberField.js";
@@ -56,6 +61,8 @@ import UDExStatusBadge from "../../instrumented/StatusBadge.js";
 import UDExStatusMessage from "../../instrumented/StatusMessage.js";
 import UDExStepInput from "../../instrumented/StepInput.js";
 import UDExSwitch from "../../instrumented/Switch.js";
+import UDExTab from "../../instrumented/Tab.js";
+import UDExTabNavigation from "../../instrumented/TabNavigation.js";
 import UDExTable from "../../instrumented/Table.js";
 import UDExTableCell from "../../instrumented/TableCell.js";
 import UDExTableGroupRow from "../../instrumented/TableGroupRow.js";
@@ -111,9 +118,14 @@ export {
   UDExList,
   UDExListItem,
   UDExListGroupHeader,
+  UDExMastheadItem,
+  UDExMastheadMenu,
+  UDExMastheadMobileMenu,
   UDExMastheadProfileMenu,
+  UDExMastheadShell,
   UDExMessageStrip,
   UDExMediaPlayer,
+  UDExSearch,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,
@@ -133,6 +145,8 @@ export {
   UDExStatusMessage,
   UDExStepInput,
   UDExSwitch,
+  UDExTab,
+  UDExTabNavigation,
   UDExTable,
   UDExTableCell,
   UDExTableGroupRow,

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

@@ -34,8 +34,13 @@ import UDExLinkListItem from "../../src/LinkListItem.js";
 import UDExList from "../../src/List.js";
 import UDExListGroupHeader from "../../src/ListGroupHeader.js";
 import UDExListItem from "../../src/ListItem.js";
+import UDExMastheadItem from "../../src/MastheadItem.js";
+import UDExMastheadMenu from "../../src/MastheadMenu.js";
+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 UDExSearch from "../../src/Search.js";
 import UDExMediaPlayer from "../../src/MediaPlayer.js";
 import UDExPasswordField from "../../src/PasswordField.js";
 import UDExPhoneNumberField from "../../src/PhoneNumberField.js";
@@ -113,9 +118,14 @@ export {
   UDExList,
   UDExListItem,
   UDExListGroupHeader,
+  UDExMastheadItem,
+  UDExMastheadMenu,
+  UDExMastheadMobileMenu,
   UDExMastheadProfileMenu,
+  UDExMastheadShell,
   UDExMessageStrip,
   UDExMediaPlayer,
+  UDExSearch,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

package/dist/Breadcrumbs.d.ts

@@ -6,6 +6,7 @@ import "@ui5/webcomponents-icons/dist/home.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 type UDExBreadcrumbsItemClickEventDetail = {
     item: UDExBreadcrumbsItem;
     altKey?: boolean;
@@ -48,6 +49,15 @@ declare class UDExBreadcrumbs extends UI5Element {
      * @public
      */
     showItems: number;
+    /**
+     * Defines whether the current page item is displayed in the main navigation path.
+     * When set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.
+     * By default, the current page is hidden from the main path and only visible in the dropdown.
+     *
+     * @default false
+     * @public
+     */
+    showCurrentPage: boolean;
     /**
      * Indicates if dropdown is opened
      *
@@ -97,10 +107,12 @@ declare class UDExBreadcrumbs extends UI5Element {
     get _linksData(): Array<UDExBreadcrumbsItem>;
     get _visibleItems(): Array<UDExBreadcrumbsItem>;
     get _dropdownItems(): Array<UDExBreadcrumbsItem>;
+    get _triggerAccessibilityAttributes(): Pick<AccessibilityAttributes, "hasPopup" | "expanded">;
     get _triggerClass(): string;
     get _breadcrumbsAccessibleNameText(): string;
     get _dropdownArrowAccessibleNameText(): string;
     get _dropdownAccessibleNameText(): string;
+    get _ofText(): string;
 }
 export default UDExBreadcrumbs;
 export type { UDExBreadcrumbsItemClickEventDetail };

package/dist/Breadcrumbs.js

@@ -11,7 +11,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { isTabNext, isTabPrevious, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import UI5BreadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
@@ -21,7 +21,7 @@ import BreadcrumbsTemplate from "./BreadcrumbsTemplate.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExLink from "./Link.js";
-import { AVAILABLE_VALUES, BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
+import { AVAILABLE_VALUES, BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL, OF, } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -58,6 +58,22 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
          * @public
          */
         this.showItems = 3;
+        /**
+         * Defines whether the current page item is displayed in the main navigation path.
+         * When set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.
+         * By default, the current page is hidden from the main path and only visible in the dropdown.
+         *
+         * @default false
+         * @public
+         */
+        this.showCurrentPage = false;
+        /**
+         * Indicates if dropdown is opened
+         *
+         * @default false
+         * @private
+         */
+        this._dropdownOpened = false;
         this._rootClass = "udex-breadcrumbs";
     }
     onBeforeRendering() {
@@ -143,10 +159,6 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
             e.preventDefault();
             this._dropdownArrowLink.focus();
             this._toggleDropdown();
-            return;
-        }
-        if (isEscape(e)) {
-            this._toggleDropdown();
         }
     }
     _handleOutsideClick() {
@@ -196,6 +208,12 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
     get _dropdownItems() {
         return this._getItems().filter(i => this._isItemVisible(i));
     }
+    get _triggerAccessibilityAttributes() {
+        return {
+            hasPopup: "listbox",
+            expanded: this._dropdownOpened ? "true" : "false",
+        };
+    }
     get _triggerClass() {
         const rootClass = "udex-breadcrumbs";
         return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
@@ -209,10 +227,16 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
     get _dropdownAccessibleNameText() {
         return translate(UDExBreadcrumbs_1, AVAILABLE_VALUES);
     }
+    get _ofText() {
+        return translate(UDExBreadcrumbs_1, OF);
+    }
 };
 __decorate([
     property({ type: Number })
 ], UDExBreadcrumbs.prototype, "showItems", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExBreadcrumbs.prototype, "showCurrentPage", void 0);
 __decorate([
     property({ noAttribute: true, type: Boolean })
 ], UDExBreadcrumbs.prototype, "_dropdownOpened", void 0);