@sapudex/web-components 2.32.1 → 2.34.0

package/cypress/fixtures/masthead-shell.ts

@@ -0,0 +1,281 @@
+    export const subItemsProduct = [{
+      "subMenuLinkItems": [
+        {
+          "category": "CRM",
+          "url": "https://sap.com",
+          "items": [
+            {
+              "title": "SAP S/4HANA Cloud",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "CRM 2 and Customer Experience",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "Spend Management",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "Supply Chain Management",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "Human Capital Management",
+              "url": "https://sap.com"
+            }
+          ]
+        },
+        {
+          "category": "Learning",
+          "items": [
+            {
+              "title": "SAP Learning Journeys",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "Training Courses",
+              "url": "https://sap.com",
+              "externalLink": true
+            },
+            {
+              "title": "SAP Certification",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "SAP Learning Hub",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "SAP Training and Adoption",
+              "url": "https://sap.com"
+            }
+          ]
+        },
+        {
+          "category": "Community",
+          "url": "https://sap.com",
+          "items": [
+            {
+              "title": "Topics",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "Questions and Answers",
+              "url": "https://sap.com"
+            },
+            {
+              "title": "Blogs",
+              "url": "https://sap.com"
+            }
+          ]
+        },
+      ]}
+    ];
+
+    export const subItemsExplore = [
+      {
+        "subMenuLinkItems": [
+          {
+            "category":"Products",
+            "url":"//www.sap.com/products.html",
+            "items":[
+              {
+                "externalLink":false,
+                "title":"Business Network",
+                "url":"//www.sap.com/products/business-network.html"
+              },
+              {
+                "externalLink":false,
+                "title":"Business Technology Platform",
+                "url":"//www.sap.com/products/technology-platform.html",
+              },
+              {
+                "externalLink":false,
+                "title":"CRM and Customer Experience",
+                "url":"//www.sap.com/products/crm.html",
+              },
+              {
+                "externalLink":false,
+                "title":"Enterprise Resource Planning",
+                "url":"//www.sap.com/products/erp.html",
+              },
+              {
+                "externalLink":false,
+                "title":"Financial Management",
+                "url":"//www.sap.com/products/financial-management.html",
+              },
+              {
+                "externalLink":false,
+                "title":"Human Capital Management",
+                "url":"//www.sap.com/products/hcm.html",
+              },
+              {
+                "externalLink":false,
+                "title":"Small and Midsize Enterprises",
+                "url":"//www.sap.com/products/sme-business-software.html",
+              }
+            ],
+          },
+          {
+            "category": "Services",
+            "url": "https://sap.com",
+            "items": [
+              {
+                "title": "Devtoberfest",
+                "url": "https://sap.com"
+              },
+              {
+                "title": "TechEd",
+                "url": "https://sap.com"
+              },
+              {
+                "title": "SAP Learning",
+                "url": "https://sap.com"
+              },
+              {
+                "title": "New Coffee Corner",
+                "url": "https://sap.com"
+              }
+            ]
+          },
+          {
+            "category":"Learning and Support",
+            "items":[
+              {
+                "externalLink":false,
+                "title":"Learning and Certification",
+                "url":"https://learning.sap.com"
+              },
+              {
+                "externalLink":false,
+                "title":"Support",
+                "url":"https://support.sap.com"
+              },
+              {
+                "externalLink":false,
+                "title":"Documentation",
+                "url":"https://help.sap.com"
+              },
+              {
+                "externalLink":false,
+                "title":"Community",
+                "url":"https://community.sap.com/"
+              }
+            ],
+          },
+          {
+            "category":"About",
+            "items":[
+              {
+                "externalLink":false,
+                "navTitle":"Company Information",
+                "title":"Company Information",
+                "url":"//www.sap.com/about/company.html"
+              },
+              {
+                "externalLink":false,
+                "title":"Careers",
+                "url":"https://jobs.sap.com/?utm_source=CareerSite&utm_campaign=CorpSite_HD"
+              },
+              {
+                "externalLink":false,
+                "title":"Customer Stories",
+                "url":"//www.sap.com/about/customer-stories.html"
+              },
+              {
+                "externalLink":false,
+                "title":"Events",
+                "url":"//www.sap.com/events.html"
+              },
+              {
+                "externalLink":false,
+                "title":"Investor Relations",
+                "url":"https://www.sap.com/investors/en.html"
+              },
+              {
+                "externalLink":false,
+                "title":"News Center",
+                "url":"https://news.sap.com/"
+              },
+              {
+                "externalLink":false,
+                "title":"Security and Trust",
+                "url":"//www.sap.com/about/trust-center.html"
+              }
+            ],
+          }
+        ]
+      },
+    ];
+
+    export const profileLinks = [
+      {
+        category: "Group heading1",
+        items: [
+          {
+            "title": "Lorem ipsum",
+            "url": "https://sap.com",
+            "externalLink": true
+          },
+          {
+            "title": "Curabitur aliquam",
+            "url": "https://sap.com",
+            "badge": "72"
+          },
+          {
+            "title": "Sed sodales nisisuscipit",
+            "url": "https://sap.com"
+          },
+          {
+            "title": "Lorem ipsum dolor an example two lines",
+            "url": "https://sap.com",
+            "externalLink": true,
+            "badge": "73"
+          },
+          {
+            "title": "Lorem ipsum dolor sit anconsectetur",
+            "url": "https://sap.com",
+            "externalLink": true,
+            "badge": "37"
+          },
+        ],
+      },
+      {
+        category: "Group heading2",
+        items: [
+          {
+            title: "Manage my account",
+            url: "http://sap.com/myaccount",
+          },
+          {
+            title: "SAP Learning Journeys",
+            url: "https://sap.com",
+            externalLink: true,
+          },
+          {
+            title: "Training Courses",
+            url: "https://sap.com",
+          },
+          {
+            title: "SAP Learning Hub",
+            url: "https://sap.com",
+            badge: "72",
+            externalLink: true,
+          },
+          {
+            title: "SAP Training and Adoption",
+            url: "https://sap.com",
+            badge: "31"
+          },
+        ],
+      },
+    ];
+
+    export const profileLoggedInUser = {
+      name : "Damian Smith",
+      username : "damian.smith",
+      email : "damian.smith@sap.com",
+      avatarInitials: "JS",
+      avatarUrl: "./stories/list/image.png",
+    };

package/cypress/specs/Breadcrumbs.cy.tsx

@@ -41,6 +41,25 @@ const breadcrumbsShowItemsHigher = <UDExBreadcrumbs
   <UDExBreadcrumbsItem>Current Page</UDExBreadcrumbsItem>
 </UDExBreadcrumbs>
 
+const breadcrumbsShowCurrentPage = <UDExBreadcrumbs
+  id="breadcrumbs-show-current-page"
+  show-current-page
+  class="udex-breadcrumbs">
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">First Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Second Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem>Current Page</UDExBreadcrumbsItem>
+</UDExBreadcrumbs>
+
+const breadcrumbsHideCurrentPage = <UDExBreadcrumbs
+  id="breadcrumbs-hide-current-page"
+  show-items="10"
+  class="udex-breadcrumbs">
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">First Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Second Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem href="https://www.sap.com" target="_blank">Third Level</UDExBreadcrumbsItem>
+  <UDExBreadcrumbsItem>Current Page</UDExBreadcrumbsItem>
+</UDExBreadcrumbs>
+
 describe("Breadcrumbs", () => {
   beforeEach(() => {
     cy.mount(breadcrumbs);
@@ -90,7 +109,8 @@ describe("Breadcrumbs", () => {
     cy.get("#breadcrumbs").shadow().find("[udex-dropdown]").should("have.attr", "open");
   });
 
-  it("tests if the first arrow item is focused after pressing \"Escape\" key inside the dropdown on the first dropdown item", () => {
+  // Updated: description corrected — focus is on the trigger when Escape fires (not inside the dropdown); Escape is now handled by UI5 Popover natively, not by a custom _handleKeydown branch
+  it("returns focus to the trigger when the dropdown is closed with Escape", () => {
     cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
     cy.get("body").realType("{esc}");
     cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").should("be.focused");
@@ -100,4 +120,179 @@ describe("Breadcrumbs", () => {
     cy.mount(breadcrumbsShowItemsHigher);
     cy.get("#breadcrumbs-show-items-higher").shadow().find(".udex-breadcrumbs__item--visible").should("have.length", 9);
   });
+
+  describe("aria-expanded on dropdown trigger", () => {
+    // Updated: aria-expanded is now written by _setCustomAttributes() onto the inner <a>
+    // inside the udex-link shadow DOM, not on the udex-link host element itself.
+    it("has aria-expanded='false' on the trigger when the dropdown is closed", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger")
+        .shadow().find("a")
+        .should("have.attr", "aria-expanded", "false");
+    });
+
+    it("has aria-expanded='true' on the trigger when the dropdown is open", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger")
+        .shadow().find("a")
+        .should("have.attr", "aria-expanded", "true");
+    });
+
+    it("resets aria-expanded to 'false' after closing the dropdown with Escape", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger")
+        .shadow().find("a")
+        .should("have.attr", "aria-expanded", "true");
+      cy.get("body").realType("{esc}");
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger")
+        .shadow().find("a")
+        .should("have.attr", "aria-expanded", "false");
+    });
+  });
+
+  // Updated: dropdown list changed from <ul> to <ol>; selectors updated accordingly
+  describe("dropdown <ol>/<li> structure", () => {
+    beforeEach(() => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+    });
+
+    it("wraps dropdown items in an <ol> inside the nav", () => {
+      cy.get("#breadcrumbs").shadow()
+        .find(".udex-breadcrumbs__popover-content ol")
+        .should("exist");
+    });
+
+    it("wraps each focusable dropdown link in a <li> element", () => {
+      // Exclude the current-page <li aria-hidden="true"> which holds a <span>, not a link.
+      cy.get("#breadcrumbs").shadow()
+        .find(".udex-breadcrumbs__popover-content ol > li:not([aria-hidden])")
+        .each($li => {
+          cy.wrap($li).find("[udex-link]").should("exist");
+        });
+    });
+
+    it("wraps the current-page dropdown entry in a <li> with aria-hidden='true'", () => {
+      cy.get("#breadcrumbs").shadow()
+        .find("li[aria-hidden='true']")
+        .find(".udex-breadcrumbs__item--current")
+        .should("exist");
+    });
+  });
+
+  describe("aria-current='page' on dropdown current page item", () => {
+    it("marks the current page span inside the dropdown with aria-current='page'", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__item--current")
+        .should("have.attr", "aria-current", "page");
+    });
+
+    it("renders the current page entry inside the dropdown as a span, not a link", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__item--current")
+        .should("not.have.attr", "udex-link");
+    });
+  });
+
+  // Added: position-aware accessible names on dropdown links (posLabel feature)
+  describe("position-aware accessible names on dropdown links", () => {
+    beforeEach(() => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__trigger").click();
+    });
+
+    it("sets aria-label on the first focusable dropdown link ending with ', 1 of 9'", () => {
+      cy.get("#breadcrumbs").shadow()
+        .find("[udex-link].udex-breadcrumbs__item--hidden").first()
+        .shadow().find("a")
+        .should("have.attr", "aria-label")
+        .and("match", /, 1 of 9$/);
+    });
+
+    it("sets aria-label on the second focusable dropdown link ending with ', 2 of 9'", () => {
+      cy.get("#breadcrumbs").shadow()
+        .find("[udex-link].udex-breadcrumbs__item--hidden").eq(1)
+        .shadow().find("a")
+        .should("have.attr", "aria-label")
+        .and("match", /, 2 of 9$/);
+    });
+
+    it("includes the item's own accessible name at the start of the aria-label for the first link", () => {
+      // Item 1 has accessible-name="Home page", so posLabel = "Home page, 1 of 9"
+      cy.get("#breadcrumbs").shadow()
+        .find("[udex-link].udex-breadcrumbs__item--hidden").first()
+        .shadow().find("a")
+        .should("have.attr", "aria-label", "Home page, 1 of 9");
+    });
+
+    it("uses textContent as the label prefix when accessible-name is not set", () => {
+      // Item 2 has no accessible-name; textContent is "Second Level", so posLabel = "Second Level, 2 of 9"
+      cy.get("#breadcrumbs").shadow()
+        .find("[udex-link].udex-breadcrumbs__item--hidden").eq(1)
+        .shadow().find("a")
+        .should("have.attr", "aria-label", "Second Level, 2 of 9");
+    });
+
+    it("does not set aria-label on the current-page span in the dropdown", () => {
+      cy.get("#breadcrumbs").shadow()
+        .find(".udex-breadcrumbs__item--current")
+        .should("not.have.attr", "aria-label");
+    });
+  });
+
+  describe("showCurrentPage property", () => {
+    it("does not render the current page item in the main path by default", () => {
+      cy.get("#breadcrumbs").shadow().find(".udex-breadcrumbs__item--current-page")
+        .should("not.exist");
+    });
+
+    // Regression: when showCurrentPage is false the current-page <li> must not be rendered
+    // at all, so screen readers announce the correct list item count
+    it("does not render a <li> for the current page item when showCurrentPage is false", () => {
+      cy.mount(breadcrumbsHideCurrentPage);
+      // 4 items total (3 links + 1 current page), show-items="10" so no overflow.
+      // Fix skips the current-page entry → main nav ol should have 1 trigger + 3 link = 4 <li>s
+      cy.get("#breadcrumbs-hide-current-page").shadow().find("nav.ui5-breadcrumbs-root > ol > li")
+        .should("have.length", 4);
+      cy.get("#breadcrumbs-hide-current-page").shadow().find(".udex-breadcrumbs__item--current-page")
+        .should("not.exist");
+    });
+
+    it("renders the current page item in the main path when showCurrentPage is true", () => {
+      cy.mount(breadcrumbsShowCurrentPage);
+      cy.get("#breadcrumbs-show-current-page").shadow().find(".udex-breadcrumbs__item--current-page")
+        .should("exist")
+        .and("be.visible");
+    });
+
+    it("reflects the show-current-page attribute on the host element", () => {
+      cy.mount(breadcrumbsShowCurrentPage);
+      cy.get("#breadcrumbs-show-current-page")
+        .should("have.attr", "show-current-page");
+    });
+
+    it("renders the current page item in the main path as a span, not a link", () => {
+      cy.mount(breadcrumbsShowCurrentPage);
+      cy.get("#breadcrumbs-show-current-page").shadow().find(".udex-breadcrumbs__item--current-page")
+        .should("match", "span")
+        .and("not.have.attr", "udex-link");
+    });
+
+    it("sets aria-current='page' on the current page span in the main path", () => {
+      cy.mount(breadcrumbsShowCurrentPage);
+      cy.get("#breadcrumbs-show-current-page").shadow().find(".udex-breadcrumbs__item--current-page")
+        .should("have.attr", "aria-current", "page");
+    });
+
+    it("sets role='presentation' on the current-page <li> so it is excluded from the list count", () => {
+      cy.mount(breadcrumbsShowCurrentPage);
+      cy.get("#breadcrumbs-show-current-page").shadow()
+        .find(".udex-breadcrumbs__item--current-page")
+        .parent("li")
+        .should("have.attr", "role", "presentation");
+    });
+
+    it("displays the correct text for the current page span in the main path", () => {
+      cy.mount(breadcrumbsShowCurrentPage);
+      cy.get("#breadcrumbs-show-current-page").shadow().find(".udex-breadcrumbs__item--current-page")
+        .should("contain.text", "Current Page");
+    });
+  });
 });

package/cypress/specs/FilterMenu.cy.tsx

@@ -1,6 +1,18 @@
 import {UDExFilterMenu, UDExFilterMenuItem, UDExFilterMenuGroupHeader, UDExFilterMenuSelectAll} from "../support/component-imports.js";
 import {UDExListMode} from "../../src/types/List.js";
 
+const filterMenuWithRating = <UDExFilterMenu
+  id="filter-menu-rating"
+  filter-name="Rating"
+  show-search-input="true"
+  mode={UDExListMode.MultiSelect}>
+  <UDExFilterMenuItem rating="5" ratingCount="5.0" totalCount="23"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="4" ratingCount="4.0" totalCount="17"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="3" ratingCount="3.0" totalCount="34"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="2" ratingCount="2.0" totalCount="40"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="1" ratingCount="1.0" totalCount="73"></UDExFilterMenuItem>
+</UDExFilterMenu>
+
 const filterMenu = <>
   <div id="resetClick"></div>
   <div id="resultClick"></div>
@@ -911,4 +923,45 @@ describe("Filter Menu component", () => {
       cy.get("#resultSelectAll").should("have.text", "ui5-select-all");
     });
   });
+
+  describe("Filter Menu Rating Indicator", () => {
+    it("renders rating indicator in dropdown items when rating is set", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find("[udex-rating-indicator]")
+        .should("exist");
+    });
+
+    it("passes correct rating attributes to dropdown list items", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0)
+        .should("have.attr", "rating", "5")
+        .and("have.attr", "rating-count", "5.0")
+        .and("have.attr", "total-count", "23");
+    });
+
+    it("renders correct number of rating items", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item")
+        .should("have.length", 5);
+    });
+
+    it("selects a rating item on click", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item")
+        .should("have.attr", "data-selected", "true");
+    });
+  });
 });

package/cypress/specs/ListItem.cy.tsx

@@ -4,6 +4,7 @@ import { UDExAvatarShape } from "../../dist/Avatar.js";
 import { UDExAvatarSize } from "../../src/Avatar.js";
 import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
+import { UDExDisplayType } from "../../src/RatingIndicator.js";
 
 const defaultListItem = <UDExListItem
   id="listItem"
@@ -73,6 +74,13 @@ const listItemWithIcons = <UDExListItem
   <UDExButton accessible-name='Action' slot='secondIcon' design='Tertiary' icon='decline' size='Small'></UDExButton>
 </UDExListItem>
 
+const listItemWithRating = <UDExListItem
+  id="listItemRating"
+  rating="4"
+  ratingCount="4.0"
+  totalCount="20">
+</UDExListItem>
+
 describe("ListItem", () => {
     describe("Default rendering", () => {
       it("should render the component", () => {
@@ -169,4 +177,44 @@ describe("ListItem", () => {
         cy.get("#listItemWarning").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(141, 42, 0)");
       });
     });
+
+    describe("RatingIndicator", () => {
+      beforeEach(() => {
+        cy.mount(listItemWithRating);
+        cy.get("#listItemRating").shadow().find("[udex-rating-indicator]").as("rating");
+      });
+
+      it("renders rating indicator when rating is set", () => {
+        cy.get("@rating").should("exist");
+      });
+
+      it("passes correct value to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "value", "4");
+      });
+
+      it("passes correct rating-count to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "rating-count", "4.0");
+      });
+
+      it("passes correct total-count to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "total-count", "20");
+      });
+
+      it("sets max to 5 by default", () => {
+        cy.get("@rating").should("have.attr", "max", "5");
+      });
+
+      it("sets display to Desktop by default", () => {
+        cy.get("@rating").should("have.attr", "display", UDExDisplayType.Desktop);
+      });
+
+      it("sets disabled and readonly states by default", () => {
+        cy.get("@rating").should("have.attr", "disabled");
+        cy.get("@rating").should("have.attr", "readonly");
+      });
+
+      it("sets correct aria-label on rating indicator", () => {
+        cy.get("@rating").should("have.attr", "aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
+      });
+    });
 });