@sapudex/web-components 2.32.1 → 2.34.0

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -168,39 +168,24 @@ describe("Desktop", () => {
     .should("not.exist");
   });
 
-  it("moves focus to next item with ArrowRight", () => {
+  // Updated: Disclosure Navigation pattern — Tab moves between top-level items (no more ArrowRight)
+  it("moves focus to next item with Tab", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
-    .click().realPress("{rightarrow}").realPress("Enter");
+    .shadow().find(".udex-secondary-navigation__item").click().realPress("Tab").realPress("Enter");
 
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include", {title: "Secondary Navigation 3"})
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", {clickedIndex: 2})
   });
 
-  it("moves focus to previous item with ArrowLeft", () => {
+  // Updated: Disclosure Navigation pattern — Shift+Tab moves backwards between top-level items (no more ArrowLeft)
+  it("moves focus to previous item with Shift+Tab", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
-    .click().realPress("{leftarrow}").realPress("Enter");
+    .shadow().find(".udex-secondary-navigation__item").click().realPress(["Shift", "Tab"]).realPress("Enter");
 
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "Secondary Navigation 1"})
     cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", {clickedIndex: 0})
   });
 
-  it("navigates right into nested item", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
-    .click()
-    .realPress("{downarrow}").realPress("Enter")
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 2"})
-  });
-
-  it("navigates left back from nested item", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
-    .click().shadow().find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("{downarrow}").realPress("{rightarrow}").realPress("{leftarrow}").realPress("Enter")
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 2"})
-  });
-
   it("renders button when path is missing", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find(".udex-secondary-navigation__item")
     .should("have.prop", "tagName").and("eq", "BUTTON");
@@ -224,20 +209,31 @@ describe("Desktop", () => {
     .should("have.attr", "active")
   });
 
+  // Disclosure Navigation pattern — open dropdown, Shift+Tab returns focus to trigger button, second Shift+Tab reaches heading title
   it("closes navigation and focuses Secondary title on Shift+Tab", () => {
-    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(5)
-    .click().realPress("{downarrow}").realPress("{downarrow}").realPress(["Shift", "Tab"]);
+    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find(".udex-secondary-navigation__item").click();
+
+    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+    cy.realPress(["Shift", "Tab"]); // closes dropdown, returns focus to trigger button
+    cy.realPress(["Shift", "Tab"]); // moves focus to heading title
 
     cy.get("udex-secondary-navigation").shadow().find(".udex-secondary-navigation__title").should("be.focused");
   });
 
+  // Disclosure Navigation pattern — Tab from last visible nav item skips More button and reaches Buy Now button
   it("moves focus to Buy now button on Tab", () => {
-    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(5).click().realPress("Tab");
+    cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").eq(5)
+    .shadow().find(".udex-secondary-navigation__item").click().realPress("Tab").realPress("Tab");
     cy.get("#buy-now").should("be.focused");
   });
 
+  // Updated: Disclosure Navigation pattern — open More dropdown with Enter, Tab to first sub-item, Enter to select
   it("moves focus to next item on `More option`", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6).click().realPress("{downarrow}").realPress("Tab").realPress("Enter")
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6)
+    .shadow().find(".udex-secondary-navigation__item").click().realPress("Enter").realPress("Tab").realPress("Enter")
     cy.get("#secondary-nav").find("udex-button").then($button => {
         const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after")
         expect(buttonBorder).to.eq('rgb(0, 100, 217)');
@@ -284,6 +280,8 @@ describe("Desktop", () => {
 
   it("emits analyticsPath with full ancestor chain when clicking a deeply nested sub-item", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
       .shadow().find("udex-secondary-navigation-sub-item").first().click();
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -294,81 +292,21 @@ describe("Desktop", () => {
       .its("lastCall.args.0.detail.analyticsPath").should("deep.equal", ["Secondary Navigation 1", "secondary nested 1", "tertiary nested 2", "quaternary nested 1"]);
   });
 
-  it("closes dropdown and focuses buy now button", () => {
+  // Disclosure Navigation pattern — Tab through all sub-items (3) closes the dropdown and moves focus to the next nav item
+  it("closes dropdown and moves focus to next nav item on Tab", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
     .shadow()
     .find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("Tab")
-
-    cy.get("#buy-now").should("be.focused");
-  });
-
-  it("navigates deep dropdown and focuses buy now button", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
-    .shadow()
-    .find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("{downarrow}")
-    .realPress("{rightarrow}")
-    .realPress("{downarrow}")
-    .realPress("{downarrow}")
-    .realPress("{rightarrow}")
-    .realPress("{downarrow}")
-    .realPress("{downarrow}")
-    .realPress("Tab");
-
-    cy.get("#buy-now").should("be.focused");
-  });
-
-  it("focuses last dropdown item with End key", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
-    .shadow()
-    .find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("{downarrow}")
-    .realPress("End")
-    .realPress("{enter}");
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 3", path: "#secondary_nested_3" })
-  });
-
-  it("focuses first dropdown item on Home key", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
-    .shadow()
-    .find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("{downarrow}")
-    .realPress("{downarrow}")
-    .realPress("Home")
-    .realPress("{enter}");
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 1", path: "#secondary_nested_1"})
-  });
-
-  it("moves focus down in dropdown with ArrowDown", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
-    .shadow()
-    .find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("{downarrow}")
-    .realPress("{downarrow}")
-    .realPress("{enter}");
+    .should("be.visible");
 
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 3", path: "#secondary_nested_3"})
-  });
+    // Tab through all 3 sub-items; Tab on the last one (index 2) triggers closeDropdown().
+    // No preventDefault() is called, so the browser moves focus to the next nav item (eq(1)).
+    cy.realPress("Tab").realPress("Tab").realPress("Tab");
 
-  it("moves focus up in dropdown with ArrowUp", () => {
-    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
-    .shadow()
-    .find(".udex-secondary-navigation__dropdown")
-    .should("be.visible")
-    .realPress("{downarrow}")
-    .realPress("{downarrow}")
-    .realPress("{uparrow}")
-    .realPress("{enter}");
-
-    cy.get("@itemClickHandler").should("have.been.called").its("lastCall.args.0.detail.clickedItem").should("include",{ title: "secondary nested 2", path: "#secondary_nested_2"})
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+    .shadow().find(".udex-secondary-navigation__dropdown").should("not.exist");
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
+    .shadow().find(".udex-secondary-navigation__item").should("be.focused");
   });
 
   it("emits isMore: true when clicking the More button", () => {
@@ -391,6 +329,262 @@ describe("Desktop", () => {
       .its("lastCall.args.0.detail").should("not.have.property", "isMore");
   });
 
+  describe("Keyboard Navigation (Disclosure pattern)", () => {
+    it("Tab key moves focus to the next top-level item", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2)
+      .shadow().find(".udex-secondary-navigation__item").then($el => { $el[0].removeAttribute("href"); }).click();
+      cy.realPress("Tab");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(3)
+      .shadow().find(".udex-secondary-navigation__item").should("be.focused");
+    });
+
+    it("Shift+Tab moves focus to the previous top-level item", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(3)
+      .shadow().find(".udex-secondary-navigation__item").then($el => { $el[0].removeAttribute("href"); }).click();
+      cy.realPress(["Shift", "Tab"]);
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2)
+      .shadow().find(".udex-secondary-navigation__item").should("be.focused");
+    });
+
+    it("Tab navigates through dropdown sub-items when dropdown is open", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      cy.realPress("Tab");
+
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(1)
+      .shadow().find(".udex-secondary-navigation__dropdown-item").should("be.focused");
+    });
+
+    it("Escape closes the dropdown and returns focus to the trigger button", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      cy.realPress("Escape");
+
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("not.exist");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find(".udex-secondary-navigation__item").should("be.focused");
+    });
+
+    it("Tab on last dropdown item closes dropdown and moves focus to next element", () => {
+      // Open dropdown — auto-focus lands on index 0 (secondary nested 1).
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Two ArrowDown presses advance from index 0 to index 2 (secondary nested 3 — the last sub-item).
+      cy.realPress("{downarrow}").realPress("{downarrow}");
+
+      // Tab on the last sub-item triggers closeDropdown() in the keydown handler.
+      // No preventDefault() is called, so the browser completes Tab and focuses the next
+      // nav item (eq(1) — Secondary Navigation 2), which follows item[0] in document order.
+      cy.realPress("Tab");
+
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("not.exist");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
+      .shadow().find(".udex-secondary-navigation__item").should("be.focused");
+    });
+
+    it("Shift+Tab on first dropdown item closes dropdown and moves focus to previous element", () => {
+      // Open dropdown — auto-focus lands on index 0 (secondary nested 1, the first sub-item).
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Shift+Tab on index 0 triggers closeDropdown() in the keydown handler.
+      // No preventDefault() is called, so the browser completes Shift+Tab and returns focus to the
+      // trigger button that opened the dropdown.
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("not.exist");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find(".udex-secondary-navigation__item").should("be.focused");
+    });
+
+    // Restored: arrow key navigation applies to dropdown sub-items only (not top-level items)
+    it("moves focus down in dropdown with ArrowDown", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Dropdown opens with focus on first sub-item (secondary nested 1, index 0).
+      // Two ArrowDown presses move focus to secondary nested 3 (index 2).
+      cy.realPress("{downarrow}").realPress("{downarrow}").realPress("Enter");
+
+      cy.get("@itemClickHandler").should("have.been.called")
+        .its("lastCall.args.0.detail.clickedItem").should("include", { title: "secondary nested 3" });
+    });
+
+    // Restored: arrow key navigation applies to dropdown sub-items only (not top-level items)
+    it("moves focus up in dropdown with ArrowUp", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Two ArrowDown presses reach secondary nested 3 (index 2),
+      // one ArrowUp moves back to secondary nested 2 (index 1).
+      cy.realPress("{downarrow}").realPress("{downarrow}").realPress("{uparrow}").realPress("Enter");
+
+      cy.get("@itemClickHandler").should("have.been.called")
+        .its("lastCall.args.0.detail.clickedItem").should("include", { title: "secondary nested 2" });
+    });
+
+    // Restored: arrow key navigation applies to dropdown sub-items only (not top-level items)
+    it("focuses last dropdown item with End key", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // ArrowDown moves off the first item, then End jumps to the last sub-item (secondary nested 3).
+      cy.realPress("{downarrow}").realPress("End").realPress("Enter");
+
+      cy.get("@itemClickHandler").should("have.been.called")
+        .its("lastCall.args.0.detail.clickedItem").should("include", {
+          title: "secondary nested 3",
+          path: "#secondary_nested_3",
+        });
+    });
+
+    // Restored: arrow key navigation applies to dropdown sub-items only (not top-level items)
+    it("focuses first dropdown item on Home key", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Two ArrowDown presses move focus away from the first item,
+      // then Home jumps back to secondary nested 1 (index 0).
+      cy.realPress("{downarrow}").realPress("{downarrow}").realPress("Home").realPress("Enter");
+
+      cy.get("@itemClickHandler").should("have.been.called")
+        .its("lastCall.args.0.detail.clickedItem").should("include", {
+          title: "secondary nested 1",
+          path: "#secondary_nested_1",
+        });
+
+      // Close the dropdown to leave a clean state for subsequent tests.
+      cy.realPress("Escape");
+    });
+
+    // Updated: ArrowRight navigates into nested sub-items WITHOUT firing sub-item-click/item-click (bug fix)
+    it("navigates right into nested sub-items with ArrowRight without firing sub-item-click", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Focus starts on secondary nested 1 (index 0), which has nested items.
+      // ArrowRight drills into its nested level without firing sub-item-click.
+      cy.realPress("{rightarrow}");
+
+      // The nested level is displayed: back button (index 0) + nested children.
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "is-back");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(1).should("have.attr", "label", "tertiary nested 1");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(2).should("have.attr", "label", "tertiary nested 2");
+    });
+
+    // Updated: ArrowRight must not fire item-click event (previously caused a TypeError)
+    it("does not fire sub-item-click on ArrowRight into nested sub-items", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Reset after the click that opened the dropdown, so we only capture ArrowRight side-effects.
+      cy.get("@itemClickHandler").invoke("reset");
+
+      cy.realPress("{rightarrow}");
+
+      // Verify nested level appeared (navigation succeeded).
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "is-back");
+
+      // ArrowRight only navigates — must NOT fire item-click.
+      cy.get("@itemClickHandler").should("not.have.been.called");
+    });
+
+    // Fix: Enter on a sub-item with nested items navigates into nested level without crash (handleSubItemClick accepts KeyboardEvent)
+    it("Enter on sub-item with nested items navigates to nested level without console error", () => {
+      cy.on("uncaught:exception", () => {
+        throw new Error("Uncaught exception detected — handleSubItemClick likely crashed on KeyboardEvent");
+      });
+
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Focus is on first sub-item (secondary nested 1, index 0, has nested items).
+      // Press Enter to navigate into its nested level via handleEnterAndSpace → handleSubItemClick.
+      cy.realPress("Enter");
+
+      // The nested level is displayed: back button (index 0) + nested children.
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(0).should("have.attr", "is-back");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(1).should("have.attr", "label", "tertiary nested 1");
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").eq(2).should("have.attr", "label", "tertiary nested 2");
+    });
+
+    // Fix: Enter on sub-item with nested items fires item-click with KeyboardEvent as originalEvent
+    it("fires sub-item-click with KeyboardEvent originalEvent when Enter is pressed on nested sub-item", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // Press Enter on first sub-item (secondary nested 1, index 0, has nested items).
+      cy.realPress("Enter");
+
+      cy.get("@itemClickHandler").should("have.been.called")
+        .its("lastCall.args.0.detail.originalEvent").should("be.instanceOf", KeyboardEvent);
+    });
+
+    // Updated: ArrowRight navigates without firing sub-item-click; ArrowLeft on back button restores previous level
+    it("navigates back from nested level with ArrowLeft", () => {
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+      // ArrowRight from secondary nested 1 drills into its nested level (no event, just navigation).
+      // ArrowLeft on the back button restores the previous level and focuses secondary nested 1.
+      // Enter then activates secondary nested 1, firing item-click.
+      cy.realPress("{rightarrow}").realPress("{leftarrow}").realPress("Enter");
+
+      cy.get("@itemClickHandler").should("have.been.called")
+        .its("lastCall.args.0.detail.clickedItem").should("include", { title: "secondary nested 1" });
+    });
+  });
+
+  describe("Navigation landmark", () => {
+    it("wraps the nav list in a <nav> element", () => {
+      cy.get("#secondary-nav").shadow().find("nav.udex-secondary-navigation__wrap").should("exist");
+    });
+  });
+
+  // Fix: tabindex="0" on interactive elements ensures Safari Tab reachability without Full Keyboard Access
+  describe("Safari Tab focus (tabindex attributes)", () => {
+    it("heading link has tabindex='0'", () => {
+      cy.get("#secondary-nav").shadow().find("a.udex-secondary-navigation__title")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("nav item button has tabindex='0' when path is missing", () => {
+      // First item (Secondary Navigation 1) renders as <button> because it has sub-items and path is "#test1"
+      // but Second item (Secondary Navigation 2) has no path, so renders as <button>
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(1)
+        .shadow().find("button.udex-secondary-navigation__item")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("nav item link has tabindex='0' when path is present and no sub-items", () => {
+      // Third item (Secondary Navigation 3) has path="#test3" and no sub-items, so renders as <a>
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(2)
+        .shadow().find("a.udex-secondary-navigation__item")
+        .should("have.attr", "tabindex", "0");
+    });
+
+    it("nav item button has tabindex='0' when item has sub-items", () => {
+      // First item (Secondary Navigation 1) has sub-items, so renders as <button>
+      cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+        .shadow().find("button.udex-secondary-navigation__item")
+        .should("have.attr", "tabindex", "0");
+    });
+  });
+
   describe("Direction attributes", () => {
     beforeEach(() => {
       cy.mount(secondaryNavigationWithoutBreadcrumbs)

package/cypress/specs/SecondaryNavigationMobile.cy.tsx

@@ -104,6 +104,48 @@ describe("SecondaryNavigation", () => {
       });
     });
 
+    describe("Outside click behavior", () => {
+      // Updated: mobile buttons wrapper in shadow DOM has @click="handleMobileButtonsClick" which
+      // calls closeMobileDropdown(). Slotted button clicks bubble through the <slot> to this handler.
+      // The document-level outsideClickListener only handles clicks outside the component.
+      it("fires click event on slotted button and closes dropdown", () => {
+        // Open the mobile dropdown
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav")
+          .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+        // Stub the click handler on the slotted button
+        const buttonClickHandler = cy.stub().as("buttonClickHandler");
+        cy.get("#buy-now").then($button => {
+          $button[0].addEventListener("click", buttonClickHandler);
+        });
+
+        // Click the slotted button inside the mobile dropdown
+        cy.get("#buy-now").click();
+
+        // The button's click event should have fired
+        cy.get("@buttonClickHandler").should("have.been.calledOnce");
+
+        // The dropdown should now close after the button click
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav")
+          .shadow().find(".udex-secondary-navigation__dropdown").should("not.exist");
+      });
+
+      it("closes mobile dropdown when clicking outside the component", () => {
+        // Open the mobile dropdown
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav").click();
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav")
+          .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+        // Click outside the component (on the document body)
+        cy.get("body").click("bottomRight");
+
+        // The dropdown should close
+        cy.get("#secondary-nav").shadow().find(".udex-secondary-navigation__mobile-nav")
+          .shadow().find(".udex-secondary-navigation__dropdown").should("not.exist");
+      });
+    });
+
     describe("mobile-menu-opener-click event", () => {
       beforeEach(() => {
         const mobileMenuOpenerClickHandler = cy.stub().as("mobileMenuOpenerClickHandler");

package/cypress/specs/SelectBox.cy.tsx

@@ -1,6 +1,17 @@
 import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem, UDExButton } from  "../support/component-imports.js";
 import { UDExListMode } from "../../src/types/List.js";
 
+const selectBoxWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
+  id="select-box"
+  mode={UDExListMode.MultiSelect}
+  label="Rating">
+  <UDExSelectBoxItem rating="5" ratingCount="5.0" totalCount="23"></UDExSelectBoxItem>
+  <UDExSelectBoxItem rating="4" ratingCount="4.0" totalCount="17"></UDExSelectBoxItem>
+  <UDExSelectBoxItem rating="3" ratingCount="3.0" totalCount="34"></UDExSelectBoxItem>
+  <UDExSelectBoxItem rating="2" ratingCount="2.0" totalCount="40"></UDExSelectBoxItem>
+  <UDExSelectBoxItem rating="1" ratingCount="1.0" totalCount="73"></UDExSelectBoxItem>
+</UDExSelectBox></div>
+
 const fullComponent = <UDExSelectBox
   id="select-box"
   height="400px"
@@ -1071,4 +1082,56 @@ describe("SelectBox", () => {
       });
     });
   });
+
+  describe("Select Box Rating Indicator", () => {
+    it("renders rating indicator in dropdown items when rating is set", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0).shadow()
+        .find("[udex-rating-indicator]")
+        .should("exist");
+    });
+
+    it("passes correct rating value to dropdown list items", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0)
+        .should("have.attr", "rating", "5");
+
+      cy.get("#select-box").shadow().find("udex-list-item").eq(1)
+        .should("have.attr", "rating", "4");
+    });
+
+    it("passes correct rating-count and total-count to dropdown list items", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0)
+        .should("have.attr", "rating-count", "5.0")
+        .and("have.attr", "total-count", "23");
+    });
+
+    it("MultiSelect mode - renders tag with rating text when selecting a rating item", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow().find("udex-list-item").eq(0).click();
+
+      cy.get("#select-box").shadow()
+        .find("udex-tag-group").shadow()
+        .find("udex-tag")
+        .should("exist");
+    });
+
+    it("filters rating items by ratingCount when searching", () => {
+      cy.mount(selectBoxWithRating);
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+      cy.realType("5.0");
+
+      cy.get("#select-box").shadow().find("udex-list-item")
+        .should("have.length", 1);
+    });
+  });
 });