@sapudex/web-components 2.43.0 → 2.45.0

package/cypress/specs/DatePicker.cy.tsx

@@ -0,0 +1,259 @@
+import { UDExDatePicker } from "../support/component-imports.js";
+
+describe("Date Picker", () => {
+  describe("formatPattern as native placeholder", () => {
+    // Updated: TextField now only renders the placeholder on the native input while active (focused),
+    // to avoid overlap with the floating label. Each test asserts absent before focus, present after focus.
+    // The placeholder is derived from `_effectivePlaceholder` — which returns
+    // `getFormat().oFormatOptions.pattern || formatPattern`. With the default
+    // `formatPattern = "MMM dd, yyyy"`, UI5's DateFormat honors that pattern, so the
+    // resolved value matches the property value.
+    it("passes the default formatPattern as the inner text field's native input placeholder when active", () => {
+      cy.mount(<UDExDatePicker id="defaultDatePicker" label="Date"></UDExDatePicker>);
+
+      // Before focus: placeholder is not rendered on the native input.
+      cy.get("#defaultDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .then($input => {
+          const placeholder = $input.attr("placeholder");
+          expect(placeholder === undefined || placeholder === "").to.equal(true);
+        });
+
+      // Focus the native input to switch the field to active state.
+      cy.get("#defaultDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      // After focus: the default formatPattern is exposed as the native placeholder.
+      cy.get("#defaultDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+    });
+
+    // Updated: same active-gate applies for explicit formatPattern.
+    it("passes an explicit formatPattern to the inner text field's native input placeholder when active", () => {
+      cy.mount(
+        <UDExDatePicker
+          id="customPatternDatePicker"
+          label="Date"
+          formatPattern="MM/dd/yyyy"
+        ></UDExDatePicker>,
+      );
+
+      // Before focus: placeholder is absent.
+      cy.get("#customPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .then($input => {
+          const placeholder = $input.attr("placeholder");
+          expect(placeholder === undefined || placeholder === "").to.equal(true);
+        });
+
+      // Focus, then assert the explicit pattern is rendered.
+      cy.get("#customPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#customPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MM/dd/yyyy");
+    });
+
+    // Updated: reactive update is only observable while the field is active.
+    it("updates the native input placeholder when formatPattern changes (while active)", () => {
+      cy.mount(
+        <UDExDatePicker
+          id="reactivePatternDatePicker"
+          formatPattern="MMM dd, yyyy"
+        ></UDExDatePicker>,
+      );
+
+      // Focus so the placeholder is actually rendered on the native input.
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+
+      cy.get("#reactivePatternDatePicker").then($el => {
+        ($el[0] as unknown as { formatPattern: string }).formatPattern = "MM/dd/yyyy";
+      });
+
+      // Keep focus so the field remains active, then assert the updated pattern is reflected.
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#reactivePatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MM/dd/yyyy");
+    });
+
+    // Added: DatePicker forwards its resolved placeholder to the inner UDExTextField, which
+    // now renders the native placeholder without focus when no label is set. Assert visible
+    // before focus so the no-label branch of `active || !this.label` is exercised.
+    it("renders the default formatPattern as the native input placeholder without focus when no label is set", () => {
+      cy.mount(<UDExDatePicker id="noLabelDatePicker"></UDExDatePicker>);
+
+      // DatePicker has no `label` set, so the inner TextField skips the active gate.
+      cy.get("#noLabelDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+    });
+
+    // Updated: `_effectivePlaceholder` now falls back to `UDExDatePicker.DEFAULT_FORMAT_PATTERN`
+    // ("MMM dd, yyyy") whenever `formatPattern` is falsy — covers both the "never set" case and
+    // the Storybook case where clearing the control sets `format-pattern=""` on the attribute,
+    // which would otherwise override the class-level default of the property.
+    it("uses the default formatPattern as placeholder when formatPattern is not explicitly set", () => {
+      cy.mount(<UDExDatePicker id="defaultPatternDatePicker" label="Date"></UDExDatePicker>);
+
+      cy.get("#defaultPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#defaultPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+
+      // Case 2: explicit empty-string attribute (Storybook's cleared-control behavior).
+      // Mount with `format-pattern=""` set via the attribute so it overrides the class default,
+      // and confirm the getter still surfaces "MMM dd, yyyy" as the native placeholder.
+      cy.mount(
+        <UDExDatePicker
+          id="emptyPatternDatePicker"
+          label="Date"
+          format-pattern=""
+        ></UDExDatePicker>,
+      );
+
+      // Sanity check: the attribute is truly the empty string on the host, so the property
+      // is falsy and the fallback branch of `_effectivePlaceholder` is what's being exercised.
+      cy.get("#emptyPatternDatePicker").should("have.attr", "format-pattern", "");
+      cy.get("#emptyPatternDatePicker").then($el => {
+        const dp = $el[0] as unknown as { formatPattern: string };
+        expect(dp.formatPattern).to.equal("");
+      });
+
+      cy.get("#emptyPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .focus();
+
+      cy.get("#emptyPatternDatePicker")
+        .shadow()
+        .find("[udex-text-field]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "placeholder", "MMM dd, yyyy");
+    });
+  });
+
+  describe("calendar timestamp navigation", () => {
+    // Regression coverage for the fix that forwards `_calendarTimestamp` to the inner
+    // `udex-calendar`. UI5's Calendar guards `timestamp` behind an internal
+    // `_valueIsProcessed` flag after first render — without this forwarding, the calendar
+    // stays on the initial (empty) month when the popover opens after a date is typed.
+    // The visual month is a CSS/render concern, so these tests assert the JS-observable
+    // contract: the getter and the property flow-through to the child element.
+
+    it("_calendarTimestamp returns a non-zero UTC seconds timestamp for a valid value", () => {
+      cy.mount(
+        <UDExDatePicker id="tsDatePicker" value="May 16, 2026"></UDExDatePicker>,
+      );
+
+      cy.get("#tsDatePicker").then($el => {
+        const dp = $el[0] as unknown as { _calendarTimestamp: number | undefined };
+        expect(dp._calendarTimestamp).to.be.a("number");
+        expect(dp._calendarTimestamp).to.be.greaterThan(0);
+      });
+    });
+
+    it("_calendarTimestamp is undefined when value is empty", () => {
+      cy.mount(<UDExDatePicker id="emptyTsDatePicker"></UDExDatePicker>);
+
+      cy.get("#emptyTsDatePicker").then($el => {
+        const dp = $el[0] as unknown as { _calendarTimestamp: number | undefined };
+        // `_extractFirstTimestamp` returns undefined for empty/invalid values.
+        // eslint-disable-next-line no-unused-expressions
+        expect(dp._calendarTimestamp).to.be.undefined;
+      });
+    });
+
+    it("forwards _calendarTimestamp as the `timestamp` property on the inner udex-calendar", () => {
+      cy.mount(
+        <UDExDatePicker
+          id="forwardTsDatePicker"
+          value="May 16, 2026"
+        ></UDExDatePicker>,
+      );
+
+      // Open the popover via the public API so the calendar is rendered into the tree.
+      // Avoids coupling to the icon-button shadow DOM shape of the inner TextField.
+      cy.get("#forwardTsDatePicker").then($el => {
+        ($el[0] as unknown as { showCalendar: () => void }).showCalendar();
+      });
+
+      // Read the DatePicker's `_calendarTimestamp` first, then assert the inner
+      // udex-calendar's `timestamp` property matches.
+      cy.get("#forwardTsDatePicker").then($el => {
+        const dp = $el[0] as unknown as { _calendarTimestamp: number | undefined };
+        const expected = dp._calendarTimestamp;
+        expect(expected, "DatePicker should expose a numeric _calendarTimestamp").to.be.a(
+          "number",
+        );
+
+        cy.get("#forwardTsDatePicker")
+          .shadow()
+          .find("udex-calendar")
+          .should("exist")
+          .then($cal => {
+            const cal = $cal[0] as unknown as { timestamp: number | undefined };
+            expect(cal.timestamp).to.equal(expected);
+          });
+      });
+    });
+  });
+});

package/cypress/specs/FilterMenu.cy.tsx

@@ -1145,4 +1145,100 @@ describe("Filter Menu component", () => {
         .should("have.text", "No matches found.");
     });
   });
+
+  describe("Dropdown scroll on close", () => {
+    const filterMenuSingleSelectScrollFixture = <UDExFilterMenu
+      id="filter-menu"
+      filter-name="Languages"
+      height="200px">
+      <UDExFilterMenuItem label="A"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="B"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="C"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="D"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="E"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="F"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="G"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="H"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="I"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="J"></UDExFilterMenuItem>
+      <UDExFilterMenuItem selected label="K"></UDExFilterMenuItem>
+    </UDExFilterMenu>
+
+    const filterMenuScrollFixture = <UDExFilterMenu
+      id="filter-menu"
+      filter-name="Filter Name"
+      mode={UDExListMode.MultiSelect}
+      height="200px">
+      <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="C++" supporting-text="Efficient and flexible language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="R" supporting-text="Language for statistical computing"></UDExFilterMenuItem>
+    </UDExFilterMenu>
+
+    it("SingleSelect mode - selected item is scrolled into view after closing and reopening the dropdown", () => {
+      cy.mount(filterMenuSingleSelectScrollFixture);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__list")
+        .find("udex-list-item").last()
+        .shadow().find(".udex-list__item")
+        .click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "false");
+
+      cy.get("@trigger").click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "true");
+
+      cy.get("#filter-menu").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("be.greaterThan", 0);
+    });
+
+    it("MultiSelect mode - scroll position resets to top after closing and reopening the dropdown", () => {
+      cy.mount(filterMenuScrollFixture);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("#filter-menu").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]").as("content");
+
+      cy.get("@content").then($el => {
+        $el[0].scrollTop = 9999;
+      });
+
+      cy.get("@content").invoke("prop", "scrollTop").should("be.greaterThan", 0);
+
+      cy.get("@trigger").click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "false");
+
+      cy.get("@trigger").click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "true");
+
+      cy.get("#filter-menu").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("equal", 0);
+    });
+  });
 });

package/cypress/specs/MastheadItem.cy.tsx

@@ -0,0 +1,88 @@
+import {
+  UDExMastheadItem,
+  UDExMastheadMenu,
+  UDExMastheadMobileMenu,
+} from "../support/component-imports.js";
+import { subItemsProduct } from "../fixtures/masthead-shell.js";
+
+describe("Masthead item dropdown scroll behavior", () => {
+  beforeEach(() => {
+    cy.viewport(800, 900);
+    cy.mount(
+      <UDExMastheadItem id="test-item" accessible-name="Products">
+        Products
+        <UDExMastheadMenu
+          id="test-menu"
+          slot="dropdown"
+          menu-title="Menu"
+          subItems={JSON.stringify(subItemsProduct)}
+        />
+      </UDExMastheadItem>,
+    );
+  });
+
+  it("scrolls dropdown-holder to top when item is deselected on mobile", () => {
+    cy.get("#test-item").then($item => {
+      ($item[0] as any).selected = true;
+    });
+
+    cy.get("#test-item")
+      .shadow()
+      .find(".udex-masthead-item__dropdown-holder")
+      .should("exist");
+
+    cy.get("#test-item").then($item => {
+      const item = $item[0] as any;
+      const holder = item.shadowRoot.querySelector(
+        ".udex-masthead-item__dropdown-holder",
+      ) as HTMLElement;
+      const scrollToSpy = cy.spy(holder, "scrollTo");
+      holder.scrollTop = 200;
+
+      item.selected = false;
+
+      expect(scrollToSpy).to.have.been.calledOnce;
+      expect(scrollToSpy).to.have.been.calledWith({ top: 0 });
+    });
+  });
+
+  it("does not scroll when item is deselected on desktop", () => {
+    cy.viewport(1920, 1080);
+
+    cy.get("#test-item").then($item => {
+      const item = $item[0] as any;
+      const scrollSpy = cy.spy(item, "dropdownScrollToTop");
+
+      item.selected = true;
+      item.selected = false;
+
+      expect(scrollSpy).to.not.have.been.called;
+    });
+  });
+
+  it("calls mobileMenuScrollToTop on the slotted mobile menu when deselected on mobile", () => {
+    cy.viewport(800, 900);
+
+    cy.mount(
+      <UDExMastheadItem id="menu-btn-item" accessible-name="menu" icon="menu2">
+        <UDExMastheadMobileMenu id="mobile-menu" slot="dropdown" />
+      </UDExMastheadItem>,
+    );
+
+    cy.get("#menu-btn-item").invoke("attr", "_is-menu-open-btn", "");
+
+    cy.get("#menu-btn-item").then($item => {
+      ($item[0] as any).selected = true;
+    });
+
+    cy.get("#mobile-menu").then($menu => {
+      const mobileMenu = $menu[0] as any;
+      const scrollSpy = cy.spy(mobileMenu, "mobileMenuScrollToTop");
+
+      const item = document.querySelector<any>("#menu-btn-item");
+      item.selected = false;
+
+      expect(scrollSpy).to.have.been.calledOnce;
+    });
+  });
+});

package/cypress/specs/MastheadShell.cy.tsx

@@ -577,7 +577,9 @@ describe("MastheadShell Default component", () => {
     });
 
     it("'ui5-profile-click' emits when clicking profile item", () => {
-      cy.get("#profile-item").click();
+      cy.get("#profile-item").then($el => {
+        $el[0].dispatchEvent(new CustomEvent("click-default", { bubbles: true, composed: true }));
+      });
       cy.get("#eventComp").should("have.text", "ui5-profile-click");
     });
 

package/cypress/specs/SelectBox.cy.tsx

@@ -2222,4 +2222,86 @@ describe("SelectBox", () => {
       });
     });
   });
+
+  describe("Dropdown scroll", () => {
+    const singleSelectScrollFixture = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" height="200px" label="Languages">
+        <UDExSelectBoxItem label="A"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="B"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="C"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="D"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="E"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="F"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="G"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="H"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="I"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="J"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="K" selected></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    it("MultiSelect mode - scroll position resets to top after closing and reopening the dropdown", () => {
+      cy.mount(multiSelect);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]").as("content");
+
+      cy.get("@content").then($el => {
+        $el[0].scrollTop = 9999;
+      });
+
+      cy.get("@content").invoke("prop", "scrollTop").should("be.greaterThan", 0);
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("equal", 0);
+    });
+
+    it("SingleSelect mode - selected item is scrolled into view after closing and reopening the dropdown", () => {
+      cy.mount(singleSelectScrollFixture);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("be.greaterThan", 0);
+    });
+  });
 });

package/cypress/specs/TagGroup.cy.tsx

@@ -95,4 +95,119 @@ describe("TagGroup", () => {
     cy.get("@tagClick").should("have.been.called");
   });
 
+  it("tooltip accessible name is set on the tooltip element", () => {
+    cy.mount(
+      <UDExTagGroup tooltipAccessibleName="Hidden tags">
+        {Array.from({ length: 16 }, (_, i) => <UDExTag text={`Tag ${i + 1}`}></UDExTag>)}
+      </UDExTagGroup>
+    );
+    const nMore = cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").shadow().find(".ui5-tokenizer-more-text");
+    nMore.click();
+    cy.get("[udex-tag-group]").shadow().find("[udex-tooltip]").should("have.attr", "accessible-name", "Hidden tags");
+  });
+
+  describe("Keyboard focus with hidden tags", () => {
+    it("keeps the 'n more' button visible when a visible tag receives focus (overflow case)", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      // Wait until TagGroup has processed overflow state before navigating
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+    });
+
+    it("keeps the 'n more' button reachable across successive focus moves between tags", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+
+      cy.realPress("Tab");
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+    });
+
+    it("does not collapse the tokenizer on focusin when there are no hidden tags (no regression)", () => {
+      cy.mount(<div><button id="before">before</button>{expandedTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("@tokenizer").should("have.attr", "expanded");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").should("have.attr", "expanded");
+    });
+
+    it("Tab on the last visible tag moves focus to the 'n more' button (overflow case)", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.visible");
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const visibleCount = totalCount - nMoreCount;
+        cy.get("#before").focus();
+        // Tab to enter group (1) + Tab through each visible tag to reach the last
+        Cypress._.times(visibleCount, () => cy.realPress("Tab"));
+      });
+
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.focused");
+    });
+
+    it("Shift+Tab on the 'n more' button moves focus back to the last visible tag", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const visibleCount = totalCount - nMoreCount;
+        cy.get("#before").focus();
+        // Tab through all visible tags + 1 to land on "n more"
+        Cypress._.times(visibleCount + 1, () => cy.realPress("Tab"));
+      });
+
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("be.focused");
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("@tokenizer").then($tokenizer => {
+        const nMoreCount = ($tokenizer[0] as any)._nMoreCount as number;
+        const totalCount = ($tokenizer[0] as any)._tokens.length as number;
+        const lastVisibleToken = ($tokenizer[0] as any)._tokens[totalCount - nMoreCount - 1];
+        cy.wrap(lastVisibleToken).shadow().find("a, [tabindex='0']").first().should("be.focused");
+      });
+    });
+
+    it("keeps the 'n more' button present in shadow DOM whenever a visible tag is focused", () => {
+      cy.mount(<div><button id="before">before</button>{defaultTagGroup}</div>);
+
+      cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").as("tokenizer");
+      cy.get("[udex-tag-group]").should("have.attr", "_is-hidden-tags");
+
+      cy.get("#before").focus();
+      cy.realPress("Tab");
+
+      cy.get("@tokenizer").should("not.have.attr", "expanded");
+      cy.get("@tokenizer").shadow().find(".ui5-tokenizer-more-text").should("exist").and("be.visible");
+    });
+  });
+
 });