@sapudex/web-components 2.54.0 → 2.56.0

package/cypress/specs/Breadcrumbs.cy.tsx

@@ -165,7 +165,9 @@ describe("Breadcrumbs", () => {
       cy.get("#breadcrumbs").shadow()
         .find("[udex-link].udex-breadcrumbs__item--hidden")
         .each($link => {
-          cy.wrap($link).parent("li").should("exist");
+          cy.wrap($link)
+            .parent("li")
+            .should("exist");
         });
     });
 

package/cypress/specs/FilterMenu.cy.tsx

@@ -279,12 +279,12 @@ describe("Filter Menu component", () => {
         trigger().should("have.attr", "aria-expanded", "true");
       });
 
-      it('popover exposes accessible-role="Dialog" when opened', () => {
+      it('popover exposes accessible-role="None" when opened', () => {
         trigger().click();
         trigger().should("have.attr", "aria-expanded", "true");
 
         cy.get("[udex-filter-menu]").shadow()
-          .find("ui5-popover").should("have.attr", "accessible-role", "Dialog");
+          .find("ui5-popover").should("have.attr", "accessible-role", "None");
       });
 
       it("trigger aria-controls points at the popover id", () => {
@@ -822,6 +822,38 @@ describe("Filter Menu component", () => {
 
       cy.get("#next-focus").should("have.focus");
     });
+
+    it("pressing Escape on Result button closes dropdown", () => {
+      cy.mount(filterMenuSelectAll);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.realPress("Tab");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").shadow().find("button")
+        .should("have.focus");
+
+      cy.realPress("Escape");
+
+      cy.get("@triggerBtn").should("not.have.class", "udex-filter-menu__trigger-active");
+    });
+
+    it("pressing Escape on Reset button closes dropdown", () => {
+      cy.mount(filterMenuSelectAll);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.realPress("Tab");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").shadow().find("button")
+        .should("have.focus");
+
+      cy.realPress("Tab");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").shadow().find("button")
+        .should("have.focus");
+
+      cy.realPress("Escape");
+
+      cy.get("@triggerBtn").should("not.have.class", "udex-filter-menu__trigger-active");
+    });
   });
 
   describe('Filter menu events tests',async () => {

package/cypress/specs/Footer.cy.tsx

@@ -1,6 +1,7 @@
 import { UDExFooter, UDExSocialMediaButton } from "../support/component-imports.js";
 import { quickLinks, trendingLinks, aboutLinks, siteInformationLinks, socialLinks } from "../fixtures/footer-links.js";
 import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import UDExFooterAskJoulePosition from "../../src/types/FooterAskJoulePosition.js";
 
 const taglineAlt = "SAP tagline alt";
 const chineseLogoUrl = "./stories/footer/chinese-logo.svg";
@@ -11,6 +12,7 @@ const chineseSecurityNetworkNumber = "Custom number";
 const chineseIcpNumber = "Custom ICP";
 const chineseIcpNumberLink = "https://custom-url.com";
 const url = 'http://test.com';
+const askJouleLink = "#";
 
 const defaultFooter = <UDExFooter
   id="footer"
@@ -196,6 +198,63 @@ describe("Footer", () => {
       cy.get("#footer").shadow().find(".udex-footer__logo a").should("have.attr", "aria-label", "SAP Homepage")
     });
 
+    it("does not render Ask Joule block when askJouleLink is not set", () => {
+      cy.get("#footer").shadow().find(".udex-footer__ask-joule").should("not.exist");
+    });
+
+    it("renders Ask Joule block at start position by default", () => {
+      cy.mount(
+        <UDExFooter id="footer" ask-joule-link={askJouleLink} chatWithUsLink="#" contactUsLink="#">
+        </UDExFooter>
+      );
+      cy.get("#footer").shadow().find(".udex-footer__ask-joule").should("exist");
+      cy.get("#footer").shadow().find(".udex-footer__ask-joule-link").should("have.attr", "href", askJouleLink);
+    });
+
+    it("renders Ask Joule link text", () => {
+      cy.mount(<UDExFooter id="footer" ask-joule-link={askJouleLink}></UDExFooter>);
+      cy.get("#footer").shadow().find(".udex-footer__ask-joule-link").should("have.text", "Ask Joule");
+    });
+
+    it("renders Ask Joule at start before phone numbers", () => {
+      cy.mount(
+        <UDExFooter
+          id="footer"
+          ask-joule-link={askJouleLink}
+          ask-joule-position={UDExFooterAskJoulePosition.Start}
+          contactNumbersList='[{"country":"France","number":"400-619-0727"}]'>
+        </UDExFooter>
+      );
+      cy.get("#footer").shadow().find(".udex-footer__contact > *").first().should("have.class", "udex-footer__ask-joule");
+    });
+
+    it("renders Ask Joule at end after other contact items", () => {
+      cy.mount(
+        <UDExFooter
+          id="footer"
+          ask-joule-link={askJouleLink}
+          ask-joule-position={UDExFooterAskJoulePosition.End}
+          contactNumbersList='[{"country":"France","number":"400-619-0727"}]'>
+        </UDExFooter>
+      );
+      cy.get("#footer").shadow().find(".udex-footer__contact > *").last().should("have.class", "udex-footer__ask-joule");
+    });
+
+    it("emits \"ui5-ask-joule-click\" when clicking the Ask Joule link", () => {
+      const askJouleClickHandler = cy.stub().as("askJouleClickHandler");
+      cy.mount(
+        <UDExFooter id="footer" ask-joule-link={askJouleLink}>
+        </UDExFooter>
+      );
+      cy.get("#footer").then($footer =>
+        $footer[0].addEventListener("ask-joule-click", askJouleClickHandler)
+      ).shadow().find(".udex-footer__ask-joule-link").then($link => {
+        $link[0].removeAttribute("href");
+      }).click();
+
+      cy.get("@askJouleClickHandler").should("have.been.called");
+    });
+
     it("emits \"ui5-logo-click\" when clicking on logo", () => {
       const logoClickHandler = cy.stub().as("logoClickHandler")
       cy.get("#footer").then($footer =>

package/cypress/specs/HeroBanner.cy.tsx

@@ -1,5 +1,7 @@
-import {UDExHeroBanner, UDExButton, UDExBreadcrumbs, UDExBreadcrumbsItem} from "../support/component-imports.js";
+import {UDExHeroBanner, UDExButton, UDExBreadcrumbs, UDExBreadcrumbsItem, UDExSearch} from "../support/component-imports.js";
 import UDExButtonDesign from "../../src/types/ButtonDesign.js";
+// The SearchSuggestionsPopover feature must be imported so the backdrop events are enabled.
+import "../../src/features/SearchSuggestionsPopover.js";
 
 const primaryContentHeader = "Grow your business through enterprise";
 const secondaryContentHeader = "Entertain an idea";
@@ -172,3 +174,35 @@ describe("Hero Banner component", () => {
     });
   });
 });
+
+const BACKDROP_SUGGESTION_LIST = JSON.stringify({
+  suggested: ["SAP HANA", "SAP BTP"],
+  recommended: ["What is SAP HANA"],
+});
+
+const heroBannerWithSearch = (
+  <UDExHeroBanner id="heroBannerSearchBackdrop">
+    <div slot="content">
+      <UDExSearch show-suggested-popover open-suggestion-popup />
+    </div>
+  </UDExHeroBanner>
+);
+
+describe("HeroBanner — search backdrop", () => {
+  beforeEach(() => {
+    cy.mount(heroBannerWithSearch);
+    cy.get("[udex-search]").invoke("attr", "suggestion-list", BACKDROP_SUGGESTION_LIST);
+  });
+
+  it("backdrop is rendered after search suggestions are opened", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+  });
+
+  it("backdrop is not visible after search dropdown is closed", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+    cy.get("[udex-search]").invoke("removeAttr", "open-suggestion-popup");
+    cy.get("[udex-search]").shadow().find("#search-input").focus();
+    cy.realPress("Escape");
+    cy.get(".udex-search-backdrop").should("not.be.visible");
+  });
+});

package/cypress/specs/List.cy.tsx

@@ -421,4 +421,66 @@ describe("List component - SingleContent accessible name", () => {
     );
     cy.get("[udex-list]").shadow().find(".udex-list").should("not.have.attr", "aria-label");
   });
-});
+});
+
+// SingleContent is purely informational (no selection), so the inner list container must
+// expose the generic list/listitem semantics instead of the listbox/option selection-widget
+// semantics. listbox/option compute the option's accessible name from its whole subtree, which
+// pulls a nested udex-button (e.g. an info icon) label into the option name AND announces it
+// again when focused — a double announcement.
+describe("List component - SingleContent uses list/listitem role", () => {
+  const innerList = () =>
+    cy.get("[udex-list]").shadow().find(".udex-list");
+
+  it("SingleContent: inner list container has role=\"list\" by default", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-name="Info list">
+        <UDExListItem id="sc-item">Cloud Solution</UDExListItem>
+      </UDExList>
+    );
+    innerList().should("have.attr", "role", "list");
+  });
+
+  it("SingleContent list item: shadow [part=item] has role=\"listitem\" by default", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-name="Info list">
+        <UDExListItem id="sc-item">Cloud Solution</UDExListItem>
+      </UDExList>
+    );
+    cy.get("#sc-item").shadow().find("[part=item]").should("have.attr", "role", "listitem");
+  });
+
+
+  it("SingleContent: an explicit non-listbox accessible-role is respected (not forced to \"list\")", () => {
+    cy.mount(
+      <UDExList mode="SingleContent" accessible-role="menu" accessible-name="Info list">
+        <UDExListItem>Cloud Solution</UDExListItem>
+      </UDExList>
+    );
+    innerList().should("have.attr", "role", "menu");
+  });
+});
+
+// The SingleContent fix must not alter the selection modes. SingleSelect / MultiSelect /
+// RadioGroup lists (without collapsible group headers, so no tree pattern) still render the
+// listbox/option selection-widget semantics.
+describe("List component - selection modes keep listbox/option role", () => {
+  const listboxFixture = (mode: string) => (
+    <UDExList id="selection-list" mode={mode as "SingleSelect" | "MultiSelect" | "RadioGroup"}>
+      <UDExListItem id="selection-item">Item 1</UDExListItem>
+      <UDExListItem>Item 2</UDExListItem>
+    </UDExList>
+  );
+
+  ["SingleSelect", "MultiSelect", "RadioGroup"].forEach(mode => {
+    it(`${mode}: inner #udex-list div keeps role="listbox"`, () => {
+      cy.mount(listboxFixture(mode));
+      cy.get("#selection-list").shadow().find("#udex-list").should("have.attr", "role", "listbox");
+    });
+
+    it(`${mode}: list item shadow [part=item] keeps role="option"`, () => {
+      cy.mount(listboxFixture(mode));
+      cy.get("#selection-item").shadow().find("[part=item]").should("have.attr", "role", "option");
+    });
+  });
+});

package/cypress/specs/ListItem.cy.tsx

@@ -511,4 +511,48 @@ describe("ListItem", () => {
           .and("not.have.attr", "aria-checked");
       });
     });
+
+    // SingleContent is informational, not a selection widget, so the item's shadow
+    // [part=item] renders role="listitem" (not "option").
+    describe("SingleContent role", () => {
+      it("SingleContent item: [part=item] has role=\"listitem\" by default", () => {
+        cy.mount(<UDExListItem
+          id="sc-role-item"
+          mode={UDExListMode.SingleContent}
+          label="Cloud Solution">
+        </UDExListItem>);
+
+        cy.get("#sc-role-item").shadow()
+          .find("[part=item]").should("have.attr", "role", "listitem");
+      });
+
+      // Regression: the selection modes keep role="option" (roleItem returns the "option"
+      // fallback for every mode except SingleContent).
+      [UDExListMode.SingleSelect, UDExListMode.MultiSelect, UDExListMode.RadioGroup].forEach(mode => {
+        it(`${mode} item: [part=item] keeps role="option" by default`, () => {
+          cy.mount(<UDExListItem
+            id="sel-role-item"
+            mode={mode}
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#sel-role-item").shadow()
+            .find("[part=item]").should("have.attr", "role", "option");
+        });
+      });
+
+      // An explicit accessible-role always wins over the SingleContent default (getter
+      // returns accessibleRole before falling through to the mode-based default).
+      it("explicit accessible-role overrides the SingleContent \"listitem\" default", () => {
+        cy.mount(<UDExListItem
+          id="sc-role-override"
+          accessible-role="option"
+          mode={UDExListMode.SingleContent}
+          label="Cloud Solution">
+        </UDExListItem>);
+
+        cy.get("#sc-role-override").shadow()
+          .find("[part=item]").should("have.attr", "role", "option");
+      });
+    });
 });

package/cypress/specs/MastheadShell.cy.tsx

@@ -8,6 +8,8 @@ import {
   UDExSearch,
 } from "../support/component-imports.js";
 import { profileLoggedInUser, profileLinks, subItemsExplore, subItemsProduct } from "../fixtures/masthead-shell.js";
+// The SearchSuggestionsPopover feature must be imported so the backdrop events are enabled.
+import "../../src/features/SearchSuggestionsPopover.js";
 
 const logoUrl = "https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/sap-logo.svg";
 const homeUrl = "https://sap.com";
@@ -724,3 +726,40 @@ describe("MastheadShell Search-Focused", () => {
     });
   });
 });
+
+const BACKDROP_SUGGESTION_LIST = JSON.stringify({
+  suggested: ["SAP HANA", "SAP BTP"],
+  recommended: ["What is SAP HANA"],
+});
+
+const mastheadWithSuggestionsSearch = (
+  <UDExMastheadShell
+    id="mastheadBackdropTest"
+    show-search-by-default
+    logo-url={logoUrl}
+    site-label="Test"
+    homepage-aria-label="SAP Homepage"
+    close-button-accessible-name="Close Search">
+    <UDExSearch slot="search" show-suggested-popover open-suggestion-popup />
+  </UDExMastheadShell>
+);
+
+describe("MastheadShell — search backdrop", () => {
+  beforeEach(() => {
+    cy.viewport(1440, 900);
+    cy.mount(mastheadWithSuggestionsSearch);
+    cy.get("[udex-search]").invoke("attr", "suggestion-list", BACKDROP_SUGGESTION_LIST);
+  });
+
+  it("backdrop is rendered after search suggestions are opened", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+  });
+
+  it("backdrop is not visible after search dropdown is closed", () => {
+    cy.get(".udex-search-backdrop").should("be.visible");
+    cy.get("[udex-search]").invoke("removeAttr", "open-suggestion-popup");
+    cy.get("[udex-search]").shadow().find("#search-input").focus();
+    cy.realPress("Escape");
+    cy.get(".udex-search-backdrop").should("not.be.visible");
+  });
+});

package/cypress/specs/MediaPlayer.cy.tsx

@@ -6,6 +6,14 @@ import { UDExMediaPlayer } from "../support/component-imports.js";
 const BLANK_SOURCE = "about:blank";
 const BLANK_TYPE = "video/mp4";
 
+// Minimal structural type for driving the embed (YouTube/Vimeo) code path
+// directly, without a real iframe player. Extend as more embed handlers are
+// exercised by tests.
+type EmbedPlayer = HTMLElement & {
+  handleEmbedVideoPlaying: (embedEvent: CustomEvent) => void;
+  handleEmbedVideoEnded: () => void;
+};
+
 const basicPlayer = (
   <UDExMediaPlayer
     id="test-media-player"
@@ -239,3 +247,53 @@ describe("MediaPlayer — custom plugin support", () => {
     });
   });
 });
+
+describe("Embedded video – replay detection", () => {
+  // A YouTube source + poster forces onAfterRendering() to early-return
+  // (no video.js import) and renders only the poster, so we can drive the
+  // embed progress/ended handlers directly without a real iframe player.
+  const YT_SOURCE = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+
+  const embedPlayer = (
+    <UDExMediaPlayer
+      id="embed-media-player"
+      source={YT_SOURCE}
+      poster={BLANK_SOURCE}
+    />
+  );
+
+  it("re-fires video25/video50/video75 milestones on replay after the video ends", () => {
+    const video25 = cy.stub().as("video25");
+    const video50 = cy.stub().as("video50");
+    const video75 = cy.stub().as("video75");
+
+    cy.mount(embedPlayer);
+
+    // First play: a single progress update past 75% crosses all three
+    // milestones, so each event fires exactly once.
+    cy.get("#embed-media-player").then(($el) => {
+      const el = $el[0] as unknown as EmbedPlayer;
+      el.addEventListener("video25", video25);
+      el.addEventListener("video50", video50);
+      el.addEventListener("video75", video75);
+
+      el.handleEmbedVideoPlaying({ detail: { percentPlayed: 80 } } as CustomEvent);
+    });
+
+    cy.get("@video25").should("have.been.calledOnce");
+    cy.get("@video50").should("have.been.calledOnce");
+    cy.get("@video75").should("have.been.calledOnce");
+
+    // Ending the video resets the milestone flags so the events can re-fire.
+    // Replaying past 75% again must fire each milestone a second time.
+    cy.get("#embed-media-player").then(($el) => {
+      const el = $el[0] as unknown as EmbedPlayer;
+      el.handleEmbedVideoEnded();
+      el.handleEmbedVideoPlaying({ detail: { percentPlayed: 80 } } as CustomEvent);
+    });
+
+    cy.get("@video25").should("have.been.calledTwice");
+    cy.get("@video50").should("have.been.calledTwice");
+    cy.get("@video75").should("have.been.calledTwice");
+  });
+});

package/cypress/specs/PhoneNumberField.cy.tsx

@@ -116,6 +116,34 @@ describe("PhoneNumberField", () => {
       cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
     });
 
+    it("country flag is automatically updated when value is set programmatically", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").then($el => {
+        ($el[0] as any).value = "+38012345678"
+      })
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+      cy.get("#default").shadow().find("input").should("have.attr", "placeholder", "+380 XXXXX XXXXX")
+    });
+
+    it("country flag is updated when value is set programmatically after manual country selection", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click().realPress("d").realPress("Enter")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "DK")
+      cy.get("#default").then($el => {
+        ($el[0] as any).value = "+38012345678"
+      })
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+    });
+
+    it("changing country from dropdown updates flag and resets value to new prefix", () => {
+      cy.mount(defaultPhoneNumberField)
+      cy.get("#default").shadow().find("input").type("38012345")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "UA")
+      cy.get("#default").shadow().find(".udex-phone-number-field__input-wrapper").find(".udex-phone-number-field__open-button").click().realPress("d").realPress("Enter")
+      cy.get("#default").shadow().find("udex-list-item[selected]").should("have.attr", "id", "DK")
+      cy.get("#default").shadow().find("input").should("have.value", "+45")
+    });
+
     it("check that the maxlength and formatting is applied correctly", () => {
       cy.mount(defaultPhoneNumberField)
       cy.get("#default").shadow().find("input").type("+380123456789123456").should("have.value", "+380 12345 6789123")
@@ -192,4 +220,4 @@ describe("PhoneNumberField", () => {
       cy.get("#default").shadow().find("input").type("123-abc-456!@#").should("have.value", "+1 (234) 56")
     });
   });
-});
+});

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -67,8 +67,8 @@ describe("Desktop", () => {
   });
 
   it("item component renders dropdown after clicking", () => {
-    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().click();
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
   });
 
   it("emits 'item-click' event and displays item info", () => {