@sapudex/web-components 2.36.0 → 2.38.0

package/cypress/specs/List.cy.tsx

@@ -168,4 +168,42 @@ describe("List component - collapsible group header", () => {
     cy.get("@grouping-header").find('.udex-list__group-heading__icon').realClick();
     cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
   });
+});
+
+describe("List component - SingleContent accessible name", () => {
+  it("uses accessible-name as aria-label when only accessible-name is set", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-name="My list">
+        <UDExListItem>Item 1</UDExListItem>
+      </UDExList>
+    );
+    cy.get("[udex-list]").shadow().find(".udex-list").should("have.attr", "aria-label", "My list");
+  });
+
+  it("uses header-text as aria-label when only header-text is set", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" header-text="My header">
+        <UDExListItem>Item 1</UDExListItem>
+      </UDExList>
+    );
+    cy.get("[udex-list]").shadow().find(".udex-list").should("have.attr", "aria-label", "My header");
+  });
+
+  it("prioritizes accessible-name over header-text when both are set", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-name="My accessible name" header-text="My header">
+        <UDExListItem>Item 1</UDExListItem>
+      </UDExList>
+    );
+    cy.get("[udex-list]").shadow().find(".udex-list").should("have.attr", "aria-label", "My accessible name");
+  });
+
+  it("does not have aria-label when neither accessible-name nor header-text is set", () => {
+    cy.mount(
+      <UDExList mode="SingleContent">
+        <UDExListItem>Item 1</UDExListItem>
+      </UDExList>
+    );
+    cy.get("[udex-list]").shadow().find(".udex-list").should("not.have.attr", "aria-label");
+  });
 });

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/PasswordField.cy.tsx

@@ -89,3 +89,39 @@ describe("General interaction",  () => {
   });
 });
 
+describe("Events", () => {
+  it("fires input event on typing", () => {
+    const inputHandler = cy.stub().as("inputHandler");
+    cy.mount(<UDExPasswordField onInput={inputHandler}></UDExPasswordField>);
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("input").type("a");
+    cy.get("@inputHandler").should("have.been.called");
+  });
+
+  it("fires change event on Enter", () => {
+    const changeHandler = cy.stub().as("changeHandler");
+    cy.mount(<UDExPasswordField onChange={changeHandler}></UDExPasswordField>);
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("input").type("test{enter}");
+    cy.get("@changeHandler").should("have.been.called");
+  });
+
+  it("fires blur event on focus out", () => {
+    const blurHandler = cy.stub().as("blurHandler");
+    cy.mount(<UDExPasswordField onBlur={blurHandler}></UDExPasswordField>);
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("input").focus().blur();
+    cy.get("@blurHandler").should("have.been.called");
+  });
+
+  it("fires click-icon event when show/hide button is clicked", () => {
+    const clickIconHandler = cy.stub().as("clickIconHandler");
+    cy.mount(<UDExPasswordField onClickIcon={clickIconHandler} show-button-enabled></UDExPasswordField>);
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("[udex-control-button]").click();
+    cy.get("@clickIconHandler").should("have.been.called");
+  });
+
+  it("updates value property on input", () => {
+    cy.mount(<UDExPasswordField></UDExPasswordField>);
+    cy.get("[udex-password-field]").shadow().find("[udex-text-field]").shadow().find("input").type("secret");
+    cy.get("[udex-password-field]").should("have.prop", "value", "secret");
+  });
+});
+

package/cypress/specs/Search.cy.tsx

@@ -0,0 +1,265 @@
+import { UDExSearch } from "../support/component-imports.js";
+// The SearchSuggestionsPopover feature must be imported so the popover is enabled.
+import "../../src/features/SearchSuggestionsPopover.js";
+
+const SUGGESTION_LIST_BOTH = JSON.stringify({
+  suggested: ["SAP hana", "SAP hana Enterprise Cloud"],
+  recommended: ["What is SAP hana", "SAP hana in Community"],
+});
+
+const SUGGESTION_LIST_RECOMMENDED_ONLY = JSON.stringify({
+  suggested: [],
+  recommended: ["What is SAP hana", "SAP hana in Community"],
+});
+
+const SEARCH_SHADOW = "[udex-search]";
+const SEARCH_INPUT = "#search-input";
+const SUGGESTIONS_LIST = ".udex-search-suggestions__list";
+
+const focusInputThroughShadow = () => {
+  cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).focus();
+};
+
+// suggestion-list must be set dynamically after mount.
+// UI5Element._suppressInvalidation is true until after the first render, so
+// attributes set by the JSX renderer never reach onInvalidation and the lists
+// are never populated. Setting the attribute after mount (when
+// _suppressInvalidation is false) allows onInvalidation → setSuggestedRecommendedLists
+// to run and populate suggestedList / recommendedList.
+const setSuggestionList = (list: string) => {
+  cy.get(SEARCH_SHADOW).invoke("attr", "suggestion-list", list);
+};
+
+const renderAlwaysOpen = () => (
+  <div>
+    <UDExSearch
+      id="search"
+      show-suggested-popover
+      open-suggestion-popup
+    />
+    <a id="next-focus" href="#">Next focus</a>
+  </div>
+);
+
+const renderAlwaysOpenSingleList = () => (
+  <div>
+    <UDExSearch
+      id="search"
+      show-suggested-popover
+      open-suggestion-popup
+    />
+    <a id="next-focus" href="#">Next focus</a>
+  </div>
+);
+
+describe("UDExSearch — keyboard focus management with openSuggestionPopup", () => {
+  describe("Always-open popover with two lists (suggested + recommended)", () => {
+    beforeEach(() => {
+      cy.mount(renderAlwaysOpen());
+      setSuggestionList(SUGGESTION_LIST_BOTH);
+      // Wait for the popover to be opened by onAfterRendering -> handleOpenSuggestionPopover.
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).should("have.length", 2);
+    });
+
+    it("Tab traverses input -> lists[0] -> lists[1] -> input -> exits the component", () => {
+      focusInputThroughShadow();
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+
+      // Tab 1: input -> lists[0]
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+
+      // Tab 2: lists[0] -> lists[1]
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(1).should("be.focused");
+
+      // Tab 3: lists[1] -> input (escape flag is set; popover stays open)
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+
+      // Tab 4: input + flag -> focus leaves the search component entirely
+      cy.realPress("Tab");
+      cy.get("#next-focus").should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("not.be.focused");
+    });
+
+    it("Shift+Tab traverses input -> lists[1] -> lists[0] -> input -> exits the component backward", () => {
+      // Place a focusable element BEFORE the search so Shift+Tab past the input has somewhere to go.
+      cy.mount(
+        <div>
+          <a id="prev-focus" href="#">Previous focus</a>
+          <UDExSearch
+            id="search"
+            show-suggested-popover
+            open-suggestion-popup
+          />
+        </div>,
+      );
+      setSuggestionList(SUGGESTION_LIST_BOTH);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).should("have.length", 2);
+
+      focusInputThroughShadow();
+
+      // Shift+Tab 1: input -> lists[1] (last list)
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(1).should("be.focused");
+
+      // Shift+Tab 2: lists[1] -> lists[0]
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+
+      // Shift+Tab 3: lists[0] -> input (escape flag is set; popover stays open)
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+
+      // Shift+Tab 4: input + flag -> focus leaves the search component backward
+      cy.realPress(["Shift", "Tab"]);
+      cy.get("#prev-focus").should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("not.be.focused");
+    });
+
+    it("Shift+Tab from reset button while popup is open moves focus to input (not trapped)", () => {
+      cy.mount(
+        <div>
+          <UDExSearch
+            id="search"
+            show-suggested-popover
+            open-suggestion-popup
+            value="SAP"
+          />
+          <a id="next-focus" href="#">Next focus</a>
+        </div>,
+      );
+      setSuggestionList(SUGGESTION_LIST_BOTH);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).should("have.length", 2);
+
+      focusInputThroughShadow();
+
+      // Navigate through popover lists with Tab and return to input via escape flag.
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(1).should("be.focused");
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+
+      // Tab again: escape flag is consumed, natural Tab moves to reset button.
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("not.be.focused");
+
+      // Shift+Tab from reset button must return to input — not get trapped.
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+    });
+
+    it("Down arrow from a focused list moves focus into individual item buttons; Up arrow reverses it", () => {
+      focusInputThroughShadow();
+
+      // Tab into lists[0].
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+
+      // ArrowDown: first item in lists[0] receives focus & aria-selected.
+      cy.realPress("ArrowDown");
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SUGGESTIONS_LIST)
+        .eq(0)
+        .find("[ui5-button]")
+        .eq(0)
+        .should("have.attr", "aria-selected", "true");
+
+      // ArrowDown: focus moves to the second item in lists[0].
+      cy.realPress("ArrowDown");
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SUGGESTIONS_LIST)
+        .eq(0)
+        .find("[ui5-button]")
+        .eq(1)
+        .should("have.attr", "aria-selected", "true");
+
+      // ArrowDown from the LAST item of lists[0] hops focus to lists[1] (selectedItemIndex resets to -1).
+      cy.realPress("ArrowDown");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(1).should("be.focused");
+
+      // ArrowDown inside lists[1]: focuses first item there.
+      cy.realPress("ArrowDown");
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SUGGESTIONS_LIST)
+        .eq(1)
+        .find("[ui5-button]")
+        .eq(0)
+        .should("have.attr", "aria-selected", "true");
+
+      // ArrowUp from the FIRST item of lists[1] hops focus back to lists[0].
+      cy.realPress("ArrowUp");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+    });
+  });
+
+  describe("Always-open popover with a single list (recommended only)", () => {
+    beforeEach(() => {
+      cy.mount(renderAlwaysOpenSingleList());
+      setSuggestionList(SUGGESTION_LIST_RECOMMENDED_ONLY);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).should("have.length", 1);
+    });
+
+    it("Tab traverses input -> lists[0] -> input -> exits the component", () => {
+      focusInputThroughShadow();
+
+      // Tab 1: input -> lists[0]
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+
+      // Tab 2: lists[0] -> input (escape flag set; popover stays open)
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+
+      // Tab 3: input + flag -> exits component
+      cy.realPress("Tab");
+      cy.get("#next-focus").should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("not.be.focused");
+    });
+
+    it("Shift+Tab traverses input -> lists[0] -> input -> exits the component backward", () => {
+      cy.mount(
+        <div>
+          <a id="prev-focus" href="#">Previous focus</a>
+          <UDExSearch
+            id="search"
+            show-suggested-popover
+            open-suggestion-popup
+          />
+        </div>,
+      );
+      setSuggestionList(SUGGESTION_LIST_RECOMMENDED_ONLY);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).should("have.length", 1);
+
+      focusInputThroughShadow();
+
+      // Shift+Tab 1: input -> lists[0] (the only / last list)
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(0).should("be.focused");
+
+      // Shift+Tab 2: lists[0] -> input (escape flag set)
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
+
+      // Shift+Tab 3: input + flag -> exits component backward
+      cy.realPress(["Shift", "Tab"]);
+      cy.get("#prev-focus").should("be.focused");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("not.be.focused");
+    });
+  });
+});

package/cypress/specs/SelectBox.cy.tsx

@@ -505,6 +505,24 @@ describe("SelectBox", () => {
       .should("have.text", "Python");
   });
 
+  it("MultiSelect mode - navigation label is cleared from input after Tab closes the dropdown", () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__search")
+      .click()
+      .realPress("ArrowDown");
+
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("have.text", "JavaScript");
+
+    cy.realPress("Tab");
+
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
+
   it("MultiSelect mode - after clicking on the item dropdown is opened", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
@@ -1155,7 +1173,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", () => {