@sapudex/web-components 2.40.0 → 2.41.0

package/cypress/specs/Dropdown.cy.tsx

@@ -0,0 +1,90 @@
+import {
+  UDExDropdown,
+  UDExButton,
+  UDExList,
+  UDExListItem,
+  UDExSearch,
+} from "../support/component-imports.js";
+
+const dropdownFixture = (
+  <div style="position:relative; padding: 24px;">
+    <a id="prev-link" href="#">Previous focusable element</a>
+    {" "}
+    <UDExButton id="opener">Open dropdown</UDExButton>
+    {" "}
+    <a id="next-link" href="#">Next focusable element</a>
+    <UDExDropdown id="dropdown" opener="opener">
+      <div slot="header">
+        <UDExSearch id="dropdown-search"></UDExSearch>
+      </div>
+      <UDExList id="dropdown-list">
+        <UDExListItem id="item-1">List Item 1</UDExListItem>
+        <UDExListItem id="item-2">List Item 2</UDExListItem>
+        <UDExListItem id="item-3">List Item 3</UDExListItem>
+      </UDExList>
+      <div slot="footer">
+        <UDExButton id="footer-button" design="Tertiary">Apply</UDExButton>
+      </div>
+    </UDExDropdown>
+  </div>
+);
+
+const openDropdown = () => {
+  cy.get("#dropdown").then($el => {
+    ($el[0] as any).open = true;
+  });
+  cy.get("[udex-dropdown]").should("have.attr", "open");
+};
+
+describe("UDExDropdown", () => {
+  describe("Rendering", () => {
+    it("registers the udex-dropdown custom element", () => {
+      cy.mount(dropdownFixture);
+      cy.get("[udex-dropdown]").should("exist");
+    });
+  });
+
+  describe("Dropdown keyboard navigation", () => {
+    it("Shift+Tab from first focusable element closes dropdown and returns focus to opener", () => {
+      cy.mount(dropdownFixture);
+      openDropdown();
+
+      // Opening the dropdown auto-focuses the search input in the header.
+      // forwardToLast() (Shift+Tab from the first focusable element) calls
+      // closePopup() which resets focus back to the opener.
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("[udex-dropdown]").should("not.have.attr", "open");
+      cy.get("#opener").should("be.focused");
+    });
+
+    it("Tab from last focusable element closes dropdown and moves focus past opener", () => {
+      cy.mount(dropdownFixture);
+      openDropdown();
+
+      // Directly focus the last-fe sentinel — this is exactly what the browser
+      // does when Tab is pressed from the last focusable element inside the
+      // popover. The sentinel's onFocusIn calls forwardToFirst(), which closes
+      // the dropdown and moves focus to the next element after the opener.
+      cy.get("[udex-dropdown]").shadow().find(".last-fe").then($el => {
+        $el[0].focus();
+      });
+
+      cy.get("[udex-dropdown]").should("not.have.attr", "open");
+      cy.get("#next-link").should("be.focused");
+    });
+
+    it("Tab navigates forward through focusable elements without closing the dropdown", () => {
+      cy.mount(dropdownFixture);
+      openDropdown();
+
+      // The search input is auto-focused on open. A single forward Tab should
+      // move focus to the next focusable element inside the popover (list /
+      // footer) — the dropdown should remain open because we have not yet
+      // crossed the last-fe sentinel.
+      cy.realPress("Tab");
+
+      cy.get("[udex-dropdown]").should("have.attr", "open");
+    });
+  });
+});

package/cypress/specs/PasswordField.cy.tsx

@@ -237,6 +237,43 @@ describe("passwordVisible property", () => {
   });
 });
 
+describe("activeButtonTooltip", () => {
+  const controlBtn = () =>
+    cy.get("[udex-password-field]")
+      .shadow().find("[udex-text-field]")
+      .shadow().find("[udex-control-button]");
+
+  it("uses showButtonTooltip when password is hidden", () => {
+    cy.mount(<UDExPasswordField show-button-enabled show-button-tooltip="Show it" hide-button-tooltip="Hide it"></UDExPasswordField>);
+    controlBtn().should("have.attr", "accessible-name", "Show it");
+    controlBtn().shadow().find("[data-sap-focus-ref]").should("have.attr", "title", "Show it");
+  });
+
+  it("uses hideButtonTooltip when password is visible", () => {
+    cy.mount(<UDExPasswordField show-button-enabled show-button-tooltip="Show it" hide-button-tooltip="Hide it"></UDExPasswordField>);
+    controlBtn().click();
+    controlBtn().should("have.attr", "accessible-name", "Hide it");
+    controlBtn().shadow().find("[data-sap-focus-ref]").should("have.attr", "title", "Hide it");
+  });
+
+  it("falls back to showButtonTooltip when hideButtonTooltip is not set", () => {
+    cy.mount(<UDExPasswordField show-button-enabled show-button-tooltip="Show it"></UDExPasswordField>);
+    controlBtn().click();
+    controlBtn().should("have.attr", "accessible-name", "Hide password");
+  });
+
+  it("falls back to i18n default 'Show password' when no tooltips are set and password is hidden", () => {
+    cy.mount(<UDExPasswordField show-button-enabled></UDExPasswordField>);
+    controlBtn().should("have.attr", "accessible-name", "Show password");
+  });
+
+  it("falls back to i18n default 'Hide password' when no tooltips are set and password is visible", () => {
+    cy.mount(<UDExPasswordField show-button-enabled></UDExPasswordField>);
+    controlBtn().click();
+    controlBtn().should("have.attr", "accessible-name", "Hide password");
+  });
+});
+
 describe("Events", () => {
   it("fires input event on typing", () => {
     const inputHandler = cy.stub().as("inputHandler");

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);
+          }
+        });
     });
   });
 });