@sapudex/web-components 2.33.0 → 2.35.0

package/cypress/specs/MastheadMobileMenu.cy.tsx

@@ -0,0 +1,573 @@
+import { UDExMastheadMobileMenu } from "../support/component-imports.js";
+
+// Fixture: category with 3rd-level sub-items
+const categoryWithSubItems = {
+  category: "Cloud Products",
+  index: 0,
+  items: [
+    {
+      title: "Platform Services",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "SAP BTP",
+          url: "https://example.com/btp",
+          externalLink: false,
+        },
+        {
+          title: "SAP Integration Suite",
+          url: "https://example.com/integration",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "ERP Solutions",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "SAP S/4HANA Cloud",
+          url: "https://example.com/s4hana",
+          externalLink: false,
+        },
+      ],
+    },
+  ],
+};
+
+// Fixture: category with only flat items (no subItems)
+const categoryWithoutSubItems = {
+  category: "Services",
+  index: 0,
+  items: [
+    {
+      title: "Consulting",
+      url: "https://example.com/consulting",
+      externalLink: false,
+    },
+    {
+      title: "Training",
+      url: "https://example.com/training",
+      externalLink: false,
+    },
+  ],
+};
+
+// Fixture: mixed — one item with subItems, one without
+const categoryMixed = {
+  category: "Solutions",
+  index: 0,
+  items: [
+    {
+      title: "Cloud Solutions",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "SAP Analytics Cloud",
+          url: "https://example.com/analytics",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "Direct Link Item",
+      url: "https://example.com/direct",
+      externalLink: false,
+    },
+  ],
+};
+
+// Fixture: sub-category parent items all have urls (linked sub-categories)
+const categoryWithLinkedSubCategories = {
+  category: "AI Platform",
+  index: 0,
+  items: [
+    {
+      title: "Build",
+      url: "https://example.com/build",
+      externalLink: false,
+      subItems: [
+        {
+          title: "Develop",
+          url: "https://example.com/develop",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "Deploy",
+      url: "https://example.com/deploy",
+      externalLink: false,
+      subItems: [
+        {
+          title: "Staging",
+          url: "https://example.com/staging",
+          externalLink: false,
+        },
+        {
+          title: "Production",
+          url: "https://example.com/production",
+          externalLink: false,
+        },
+      ],
+    },
+  ],
+};
+
+// Fixture: mixed linked and unlinked sub-category parents
+const categoryMixedLinkedAndUnlinked = {
+  category: "Data Services",
+  index: 0,
+  items: [
+    {
+      title: "Integration",
+      url: "https://example.com/integration",
+      externalLink: false,
+      subItems: [
+        {
+          title: "API Management",
+          url: "https://example.com/api-mgmt",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "Analytics",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "Dashboards",
+          url: "https://example.com/dashboards",
+          externalLink: false,
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * Helper: mount the mobile menu and activate category-items view.
+ * Sets _showCategoryItems = true and _category to the provided fixture,
+ * which triggers the category-items inline partial template.
+ */
+function mountWithCategoryItems(category: typeof categoryWithSubItems) {
+  cy.mount(<UDExMastheadMobileMenu id="mobile-menu" />);
+  cy.get("[udex-masthead-mobile-menu]").then(($el) => {
+    const el = $el[0] as any;
+    el._category = category;
+    el._showCategoryItems = true;
+  });
+  // Wait for re-render after property changes
+  cy.get("[udex-masthead-mobile-menu]").shadow().as("shadow");
+}
+
+describe("UDExMastheadMobileMenu -- 3rd-level navigation (sub-items)", () => {
+  describe("Rendering sub-categories (no url — span)", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithSubItems);
+    });
+
+    it("renders a .udex-masthead-mobile-menu__sub-category span for each item with subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders sub-category as a <span> element when the item has no url", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("have.prop", "tagName", "SPAN");
+    });
+
+    it("displays the correct title text for each sub-category span", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .eq(0)
+        .should("have.text", "Platform Services");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .eq(1)
+        .should("have.text", "ERP Solutions");
+    });
+  });
+
+  describe("Rendering sub-list and sub-items", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithSubItems);
+    });
+
+    it("renders a .udex-masthead-mobile-menu__sub-list for each item with subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders udex-masthead-menu-item elements inside each sub-list with correct count", () => {
+      // First sub-list: "Platform Services" has 2 sub-items
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 2);
+
+      // Second sub-list: "ERP Solutions" has 1 sub-item
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1);
+    });
+
+    it("renders the correct label attribute for each sub-item menu-item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "label", "SAP BTP");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(1)
+        .should("have.attr", "label", "SAP Integration Suite");
+    });
+
+    it("sets the correct url attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/btp");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/s4hana");
+    });
+
+    it("sets third-level attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .first()
+        .should("have.attr", "third-level");
+    });
+
+    // Updated: has-border removed from sub-item menu-items in template
+    it("does not set has-border attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .first()
+        .should("not.have.attr", "has-border");
+    });
+  });
+
+  describe("Sub-list accessibility", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithSubItems);
+    });
+
+    it("sets aria-label on the sub-list matching the sub-category title", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .should("have.attr", "aria-label", "Platform Services");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .should("have.attr", "aria-label", "ERP Solutions");
+    });
+
+    it("wraps sub-items in a <ul> element for correct list semantics", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .first()
+        .should("have.prop", "tagName", "UL");
+    });
+  });
+
+  describe("Regression: items without subItems still render directly", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithoutSubItems);
+    });
+
+    it("does not render any .udex-masthead-mobile-menu__sub-category when no items have subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("not.exist");
+    });
+
+    it("does not render any .udex-masthead-mobile-menu__sub-list when no items have subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("not.exist");
+    });
+
+    it("renders udex-masthead-menu-item elements directly for flat items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .should("have.length", 2);
+    });
+
+    it("renders the correct labels for flat items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .eq(0)
+        .should("have.attr", "label", "Consulting");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .eq(1)
+        .should("have.attr", "label", "Training");
+    });
+
+    it("renders the correct url for flat items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/consulting");
+    });
+  });
+
+  describe("Mixed content: items with and without subItems in the same category", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryMixed);
+    });
+
+    it("renders a sub-category span only for the item that has subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 1)
+        .and("have.text", "Cloud Solutions");
+    });
+
+    it("renders a sub-list with the correct sub-item for the grouped item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "SAP Analytics Cloud");
+    });
+
+    it("renders the flat item as a direct udex-masthead-menu-item outside any sub-list", () => {
+      // The direct link item sits at top level in the main list, not inside a sub-list
+      cy.get("@shadow")
+        .find(
+          ".udex-masthead-mobile-menu__list > li > udex-masthead-menu-item[third-level]"
+        )
+        .should("have.length", 1)
+        .and("have.attr", "label", "Direct Link Item")
+        .and("have.attr", "url", "https://example.com/direct");
+    });
+  });
+
+  // Updated: linked sub-categories (with url) now have the
+  // .udex-masthead-mobile-menu__sub-category class restored. CSS variable
+  // remapping is done via the `udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category`
+  // rule (no padding/border — those only apply to the span variant).
+  describe("Rendering linked sub-categories (item has url + subItems)", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithLinkedSubCategories);
+    });
+
+    // Updated: linked sub-categories now carry the __sub-category class again
+    it("renders .udex-masthead-mobile-menu__sub-category for linked items (udex-masthead-menu-item, not span)", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders linked sub-category as a udex-masthead-menu-item (not a span) when the item has a url", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("have.prop", "tagName")
+        .then((tagName: string) => {
+          expect(tagName.toLowerCase()).to.include("udex-masthead-menu-item");
+        });
+    });
+
+    it("sets the correct label attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(0)
+        .should("have.attr", "label", "Build");
+
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(1)
+        .should("have.attr", "label", "Deploy");
+    });
+
+    it("sets the correct url attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/build");
+
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(1)
+        .should("have.attr", "url", "https://example.com/deploy");
+    });
+
+    it("sets the third-level attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("have.attr", "third-level");
+    });
+
+    // Updated: linked sub-category has the __sub-category class but does NOT
+    // have has-border — padding/border styles only apply to the span variant
+    it("does not set has-border attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("not.have.attr", "has-border");
+    });
+
+    it("still renders the sub-list beneath the linked sub-category", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders the correct sub-items inside the sub-list of a linked sub-category", () => {
+      // First sub-list (under "Build") has 1 sub-item: "Develop"
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Develop");
+
+      // Second sub-list (under "Deploy") has 2 sub-items: "Staging", "Production"
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 2);
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "label", "Staging");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .eq(1)
+        .should("have.attr", "label", "Production");
+    });
+
+    it("preserves aria-label on the sub-list matching the linked sub-category title", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .should("have.attr", "aria-label", "Build");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .should("have.attr", "aria-label", "Deploy");
+    });
+  });
+
+  describe("Mixed linked and unlinked sub-categories in the same category", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryMixedLinkedAndUnlinked);
+    });
+
+    // Updated: linked sub-category now has the __sub-category class restored;
+    // target it via udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category
+    it("renders the linked sub-category as a udex-masthead-menu-item with __sub-category class", () => {
+      // "Integration" has a url — should be a menu-item with the class
+      cy.get("@shadow")
+        .find(
+          "udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category"
+        )
+        .should("have.length", 1)
+        .and("have.attr", "label", "Integration")
+        .and("have.attr", "url", "https://example.com/integration");
+    });
+
+    it("renders the unlinked sub-category as a span", () => {
+      // "Analytics" has no url — should be a span
+      cy.get("@shadow")
+        .find("span.udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 1)
+        .and("have.text", "Analytics");
+    });
+
+    // Updated: both linked and unlinked sub-categories now have __sub-category class
+    it("renders two .udex-masthead-mobile-menu__sub-category elements (one linked, one unlinked)", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders sub-lists for both linked and unlinked sub-categories", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders the linked sub-category's sub-item correctly", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "API Management")
+        .and("have.attr", "url", "https://example.com/api-mgmt");
+    });
+
+    it("renders the unlinked sub-category's sub-item correctly", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Dashboards")
+        .and("have.attr", "url", "https://example.com/dashboards");
+    });
+
+    // Updated: linked sub-category has __sub-category class but NOT has-border;
+    // padding/border styles only apply to the span variant via CSS rule split
+    it("sets third-level but not has-border on the linked sub-category menu-item", () => {
+      cy.get("@shadow")
+        .find(
+          "udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category"
+        )
+        .first()
+        .should("have.attr", "third-level");
+
+      cy.get("@shadow")
+        .find(
+          "udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category"
+        )
+        .first()
+        .should("not.have.attr", "has-border");
+    });
+  });
+});

package/cypress/specs/MastheadShell.cy.tsx

@@ -407,6 +407,85 @@ describe("MastheadShell Default component", () => {
       cy.realPress(["Shift", "Tab"]);
       cy.get("#support-item").should("be.focused");
     });
+
+    // Added: verifies Safari Tab-into-dropdown fix — when dropdown is open, Tab moves focus into the first menu item
+    it("Tab moves focus into the first dropdown menu item when dropdown is open", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+      cy.realPress("Tab");
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    // Updated: unified handleKeyDown uses composedPath() guard to let Tab within dropdown advance normally
+    it("Tab on first dropdown item moves focus to second item, not back to first", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+      // Tab into the dropdown — focuses first item
+      cy.realPress("Tab");
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+      // Tab again — should advance to second item (not reset to first)
+      cy.realPress("Tab");
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .eq(1)
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    // Added: verifies Tab on last dropdown item exits dropdown instead of looping back to first item
+    it("Tab on last dropdown item exits dropdown and moves focus to the next top-level menu item", () => {
+      cy.get("#product-item").realClick();
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("be.visible");
+
+      // Focus the last focusable menu item in the dropdown (items with url only)
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .filter((_, el) => !!el.getAttribute("url"))
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+
+      // Verify we are on the last item before pressing Tab
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .filter((_, el) => !!el.getAttribute("url"))
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+
+      // Tab should exit the dropdown — NOT loop back to the first item
+      cy.realPress("Tab");
+
+      // The first dropdown item should NOT be focused (no looping)
+      cy.get("#product-menu")
+        .shadow()
+        .find("[udex-masthead-menu-item]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("not.be.focused");
+
+      // The dropdown should close because focus left the masthead item
+      cy.get("#product-item").shadow().find(".udex-masthead-item__dropdown").should("not.exist");
+    });
   });
 
   describe("Component events", () => {

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -329,6 +329,20 @@ describe("Desktop", () => {
       .its("lastCall.args.0.detail").should("not.have.property", "isMore");
   });
 
+  it("sets CSS variable when dropdown opens on desktop", () => {
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
+      .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
+
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .then($item => {
+        const item = $item[0] as HTMLElement;
+        const dropdown = item.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
+        const { top } = dropdown.getBoundingClientRect();
+        const expected = `${window.innerHeight - top - 24}px`;
+        expect(item.style.getPropertyValue("--udex-secondary-navigation-item-dropdown-desktop-max-height")).to.eq(expected);
+      });
+  });
+
   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)