@sapudex/web-components 2.40.0 → 2.42.0

package/cypress/specs/Search.cy.tsx

@@ -15,26 +15,40 @@ const SUGGESTION_LIST_RECOMMENDED_ONLY = JSON.stringify({
 const SEARCH_SHADOW = "[udex-search]";
 const SEARCH_INPUT = "#search-input";
 const SUGGESTIONS_LIST = ".udex-search-suggestions__list";
+const ITEM_BUTTON = "[ui5-button]";
+const SUBMIT_BUTTON = "#submit-button";
 
 const focusInputThroughShadow = () => {
   cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).focus();
 };
 
-// Cypress's should("be.focused") traverses activeElement through shadow roots
-// but fails for elements that are light-DOM children of a nested custom element
-// (ui5-popover inside udex-search's shadow root). Use the native :focus
-// pseudo-class match which the browser applies directly to the focused element.
-const assertListFocused = (index: number) => {
-  cy.get(SEARCH_SHADOW).shadow().find(SUGGESTIONS_LIST).eq(index).should($el => {
-    expect($el[0].matches(":focus")).to.be.true;
-  });
+// Items are focused via item.focus() inside the popover (light-DOM children of
+// ui5-popover that lives inside the search shadow root). Cypress's
+// should("be.focused") fails on such cross-shadow chains, so use the native
+// :focus pseudo-class which the browser applies to the actually-focused node.
+const assertNthFlatItemFocused = (flatIndex: number) => {
+  cy.get(SEARCH_SHADOW)
+    .shadow()
+    .find(`${SUGGESTIONS_LIST} ${ITEM_BUTTON}`)
+    .eq(flatIndex)
+    .should($el => {
+      expect($el[0].matches(":focus")).to.be.true;
+    });
+};
+
+const assertNthFlatItemAriaSelected = (flatIndex: number) => {
+  cy.get(SEARCH_SHADOW)
+    .shadow()
+    .find(`${SUGGESTIONS_LIST} ${ITEM_BUTTON}`)
+    .eq(flatIndex)
+    .should("have.attr", "aria-selected", "true");
 };
 
 // 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
+// _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);
@@ -51,18 +65,31 @@ const renderAlwaysOpen = () => (
   </div>
 );
 
-const renderAlwaysOpenSingleList = () => (
+const renderAlwaysOpenWithSubmit = () => (
   <div>
     <UDExSearch
       id="search"
       show-suggested-popover
       open-suggestion-popup
+      show-submit-button
     />
     <a id="next-focus" href="#">Next focus</a>
   </div>
 );
 
-describe("UDExSearch — keyboard focus management with openSuggestionPopup", () => {
+const renderAlwaysOpenWithPrev = () => (
+  <div>
+    <a id="prev-focus" href="#">Previous focus</a>
+    <UDExSearch
+      id="search"
+      show-suggested-popover
+      open-suggestion-popup
+    />
+    <a id="next-focus" href="#">Next focus</a>
+  </div>
+);
+
+describe("UDExSearch — keyboard focus management (rewritten)", () => {
   describe("Always-open popover with two lists (suggested + recommended)", () => {
     beforeEach(() => {
       cy.mount(renderAlwaysOpen());
@@ -70,211 +97,290 @@ describe("UDExSearch — keyboard focus management with openSuggestionPopup", ()
       // 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);
+      // 2 + 2 = 4 items across both lists.
+      cy.get(SEARCH_SHADOW).shadow().find(`${SUGGESTIONS_LIST} ${ITEM_BUTTON}`).should("have.length", 4);
     });
 
-    it("Tab traverses input -> lists[0] -> lists[1] -> input -> exits the component", () => {
+    it("ArrowDown from the input opens the dropdown and focuses the first item", () => {
       focusInputThroughShadow();
-      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.realPress("ArrowDown");
 
-      // Tab 1: input -> lists[0]
-      cy.realPress("Tab");
-      assertListFocused(0);
+      assertNthFlatItemFocused(0);
+      assertNthFlatItemAriaSelected(0);
+    });
 
-      // Tab 2: lists[0] -> lists[1]
-      cy.realPress("Tab");
-      assertListFocused(1);
+    it("ArrowDown navigates a flat list across both suggested and recommended items", () => {
+      focusInputThroughShadow();
+      // Arrow down four times moves through index 0, 1, 2, 3.
+      cy.realPress("ArrowDown"); // -> first item of suggested
+      assertNthFlatItemFocused(0);
 
-      // Tab 3: lists[1] -> input (escape flag is set; popover stays open)
-      cy.realPress("Tab");
+      cy.realPress("ArrowDown"); // -> second item of suggested
+      assertNthFlatItemFocused(1);
+
+      cy.realPress("ArrowDown"); // -> first item of recommended
+      assertNthFlatItemFocused(2);
+
+      cy.realPress("ArrowDown"); // -> second item of recommended (last)
+      assertNthFlatItemFocused(3);
+    });
+
+    it("ArrowDown on the last item wraps to the first item (circular)", () => {
+      focusInputThroughShadow();
+      cy.realPress("ArrowDown");
+      cy.realPress("ArrowDown");
+      cy.realPress("ArrowDown");
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(3);
+
+      // Wrap forward: last -> first.
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
+      assertNthFlatItemAriaSelected(0);
+    });
+
+    it("ArrowUp on the first item wraps to the last item (circular)", () => {
+      focusInputThroughShadow();
+      // Initial state: selectedItemIndex = -1. ArrowUp wraps to last.
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
+
+      // From first item, ArrowUp wraps to last item.
+      cy.realPress("ArrowUp");
+      assertNthFlatItemFocused(3);
+      assertNthFlatItemAriaSelected(3);
+    });
+
+    it("ArrowUp navigates backward across both lists as one flat sequence", () => {
+      focusInputThroughShadow();
+      // Move to last item.
+      cy.realPress("ArrowDown");
+      cy.realPress("ArrowDown");
+      cy.realPress("ArrowDown");
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(3);
+
+      // Step backward: last -> 2 -> 1 -> 0.
+      cy.realPress("ArrowUp");
+      assertNthFlatItemFocused(2);
+      cy.realPress("ArrowUp");
+      assertNthFlatItemFocused(1);
+      cy.realPress("ArrowUp");
+      assertNthFlatItemFocused(0);
+    });
+
+    it("Escape from a focused dropdown item returns focus to the input", () => {
+      focusInputThroughShadow();
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
+
+      cy.realPress("Escape");
+      // With openSuggestionPopup=true the popover re-opens immediately after close,
+      // so we only verify that focus returned to the input.
       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("aria-selected is removed from items after the dropdown closes", () => {
+      focusInputThroughShadow();
+      cy.realPress("ArrowDown");
+      assertNthFlatItemAriaSelected(0);
+
+      cy.realPress("Escape");
+
+      // After close, no item should retain aria-selected.
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(`${SUGGESTIONS_LIST} ${ITEM_BUTTON}[aria-selected="true"]`)
+        .should("have.length", 0);
     });
+  });
 
-    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.
+  describe("Tab / Shift+Tab no-trap behaviour from the input", () => {
+    it("Tab from the input while dropdown is open closes the dropdown and proceeds to the next focusable", () => {
+      // Use a search WITHOUT openSuggestionPopup so handleTabKey actually closes.
       cy.mount(
         <div>
-          <a id="prev-focus" href="#">Previous focus</a>
           <UDExSearch
             id="search"
             show-suggested-popover
-            open-suggestion-popup
+            value="SAP hana"
           />
+          <a id="next-focus" href="#">Next focus</a>
         </div>,
       );
       setSuggestionList(SUGGESTION_LIST_BOTH);
+      // Open the popover by focusing the input and triggering ArrowDown,
+      // which calls handleDownKey -> onOpenPopover.
+      focusInputThroughShadow();
+      cy.realPress("ArrowDown");
       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);
 
+      // Move focus back to the input (the popover stays open).
       focusInputThroughShadow();
       cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
 
-      // Shift+Tab 1: input -> lists[1] (last list)
-      cy.realPress(["Shift", "Tab"]);
-      assertListFocused(1);
-
-      // Shift+Tab 2: lists[1] -> lists[0]
-      cy.realPress(["Shift", "Tab"]);
-      assertListFocused(0);
-
-      // 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");
+      // Tab from input: handleTabKey calls onClosePopover (no preventDefault),
+      // so default Tab moves focus to the next focusable in the document.
+      cy.realPress("Tab");
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "false");
+      // Default Tab proceeded — the input is no longer the focused element.
       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)", () => {
+    it("Shift+Tab from the input while dropdown is open closes the dropdown and proceeds backward", () => {
       cy.mount(
         <div>
+          <a id="prev-focus" href="#">Previous focus</a>
           <UDExSearch
             id="search"
             show-suggested-popover
-            open-suggestion-popup
-            value="SAP"
+            value="SAP hana"
           />
-          <a id="next-focus" href="#">Next focus</a>
         </div>,
       );
       setSuggestionList(SUGGESTION_LIST_BOTH);
+      focusInputThroughShadow();
+      cy.realPress("ArrowDown");
       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);
 
+      // Return focus to the input.
       focusInputThroughShadow();
       cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
 
-      // Navigate through popover lists with Tab and return to input via escape flag.
-      cy.realPress("Tab");
-      assertListFocused(0);
-      cy.realPress("Tab");
-      assertListFocused(1);
-      cy.realPress("Tab");
-      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      // Shift+Tab from input: handleTabKey closes (no preventDefault), default
+      // Shift+Tab proceeds backward to the previous focusable.
+      cy.realPress(["Shift", "Tab"]);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "false");
+      cy.get("#prev-focus").should("be.focused");
+    });
+
+    it("with openSuggestionPopup=true, Tab from the input does not close the popover (no preventDefault)", () => {
+      cy.mount(renderAlwaysOpen());
+      setSuggestionList(SUGGESTION_LIST_BOTH);
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
 
-      // Tab again: escape flag is consumed, natural Tab moves to reset button.
+      focusInputThroughShadow();
       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");
+      // handleTabKey returned early because openSuggestionPopup is true.
+      // The popover remains open (or is re-opened by handleOpenSuggestionPopover on next render).
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("have.attr", "aria-expanded", "true");
     });
+  });
+
+  describe("Tab / Shift+Tab from a focused dropdown item", () => {
+    it("Tab from a focused item closes the dropdown and moves focus to #submit-button when present", () => {
+      cy.mount(renderAlwaysOpenWithSubmit());
+      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} ${ITEM_BUTTON}`).should("have.length", 4);
+      cy.get(SEARCH_SHADOW).shadow().find(SUBMIT_BUTTON).should("exist");
 
-    it("Down arrow from a focused list moves focus into individual item buttons; Up arrow reverses it", () => {
       focusInputThroughShadow();
-      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
 
-      // Tab into lists[0].
       cy.realPress("Tab");
-      assertListFocused(0);
 
-      // 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");
+      // Focus moved to submit button (programmatic focus by onKeyTabList).
+      cy.get(SEARCH_SHADOW).shadow().find(SUBMIT_BUTTON).should($el => {
+        expect($el[0].matches(":focus")).to.be.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");
+    it("Tab from a focused item closes the dropdown and falls back to the input when there is no submit button", () => {
+      cy.mount(renderAlwaysOpen());
+      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} ${ITEM_BUTTON}`).should("have.length", 4);
+      cy.get(SEARCH_SHADOW).shadow().find(SUBMIT_BUTTON).should("not.exist");
 
-      // ArrowDown from the LAST item of lists[0] hops focus to lists[1] (selectedItemIndex resets to -1).
+      focusInputThroughShadow();
       cy.realPress("ArrowDown");
-      assertListFocused(1);
+      assertNthFlatItemFocused(0);
+
+      cy.realPress("Tab");
+
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+    });
+
+    it("Shift+Tab from a focused item closes the dropdown and moves focus to the input", () => {
+      cy.mount(renderAlwaysOpenWithSubmit());
+      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} ${ITEM_BUTTON}`).should("have.length", 4);
 
-      // ArrowDown inside lists[1]: focuses first item there.
+      focusInputThroughShadow();
       cy.realPress("ArrowDown");
-      cy.get(SEARCH_SHADOW)
-        .shadow()
-        .find(SUGGESTIONS_LIST)
-        .eq(1)
-        .find("[ui5-button]")
-        .eq(0)
-        .should("have.attr", "aria-selected", "true");
+      assertNthFlatItemFocused(0);
 
-      // ArrowUp from the FIRST item of lists[1] hops focus back to lists[0].
-      cy.realPress("ArrowUp");
-      assertListFocused(0);
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
     });
   });
 
   describe("Always-open popover with a single list (recommended only)", () => {
     beforeEach(() => {
-      cy.mount(renderAlwaysOpenSingleList());
+      cy.mount(renderAlwaysOpen());
       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);
+      cy.get(SEARCH_SHADOW).shadow().find(`${SUGGESTIONS_LIST} ${ITEM_BUTTON}`).should("have.length", 2);
     });
 
-    it("Tab traverses input -> lists[0] -> input -> exits the component", () => {
+    it("ArrowDown moves through the single list, ArrowDown on last item wraps to first", () => {
       focusInputThroughShadow();
-      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
 
-      // Tab 1: input -> lists[0]
-      cy.realPress("Tab");
-      assertListFocused(0);
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
 
-      // 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");
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(1);
 
-      // 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");
+      // Last item -> wrap to first.
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
     });
 
-    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);
-
+    it("ArrowUp from the first item wraps to the last item", () => {
       focusInputThroughShadow();
-      cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
 
-      // Shift+Tab 1: input -> lists[0] (the only / last list)
-      cy.realPress(["Shift", "Tab"]);
-      assertListFocused(0);
+      cy.realPress("ArrowUp");
+      assertNthFlatItemFocused(1);
+    });
 
-      // Shift+Tab 2: lists[0] -> input (escape flag set)
-      cy.realPress(["Shift", "Tab"]);
+    it("Tab from a focused item closes the dropdown and returns focus to the input (no submit button)", () => {
+      focusInputThroughShadow();
+      cy.realPress("ArrowDown");
+      assertNthFlatItemFocused(0);
+
+      cy.realPress("Tab");
+      // With openSuggestionPopup=true the popover re-opens immediately after close,
+      // so we only verify that focus returned to the input.
       cy.get(SEARCH_SHADOW).shadow().find(SEARCH_INPUT).should("be.focused");
+    });
+  });
+
+  describe("Suggestion list divs are no longer Tab-reachable", () => {
+    it("the list divs do not carry tabindex=0 and are skipped in the Tab order", () => {
+      cy.mount(renderAlwaysOpenWithPrev());
+      setSuggestionList(SUGGESTION_LIST_BOTH);
       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");
+      // Confirm the lists themselves are not exposed in the Tab order.
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SUGGESTIONS_LIST)
+        .each($el => {
+          // Either no tabindex attribute at all, or not a positive/zero value.
+          const tabindex = $el.attr("tabindex");
+          if (tabindex !== undefined) {
+            expect(Number(tabindex)).to.be.lessThan(0);
+          }
+        });
     });
   });
 });