@sapudex/web-components 2.51.0 → 2.53.0

package/cypress/specs/Avatar.cy.tsx

@@ -69,3 +69,106 @@ describe("Avatar", () => {
     cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.be.disabled");
   });
 });
+
+describe("Avatar - fallback icon on image error", () => {
+  // A valid 1x1 transparent PNG so the browser does not auto-fire `error`;
+  // the error/load events are dispatched manually to keep tests deterministic.
+  const VALID_IMAGE =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+  it("shows the explicit fallback icon and hides the broken image when the slotted <img> errors", () => {
+    // Use a non-default icon ("camera") so the assertion proves the explicit
+    // fallbackIcon is honoured rather than the "employee" default.
+    cy.mount(
+      <UDExAvatar fallbackIcon="camera">
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("exist");
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("error"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "icon", "camera");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+
+  it("shows the default 'employee' fallback icon on error when no fallbackIcon is set", () => {
+    // fallbackIcon defaults to "employee"; a broken image with no explicit
+    // fallbackIcon should surface the default icon.
+    cy.mount(
+      <UDExAvatar>
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("error"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "icon", "employee");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+
+  it("keeps the image and shows no fallback icon when the slotted <img> loads successfully", () => {
+    cy.mount(
+      <UDExAvatar fallbackIcon="camera">
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("load"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.attr", "icon", "camera");
+  });
+
+  it("recovers and shows the image again when a new valid image loads after an error", () => {
+    cy.mount(
+      <UDExAvatar fallbackIcon="camera">
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("error"));
+    });
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].setAttribute("src", VALID_IMAGE);
+      $img[0].dispatchEvent(new Event("load"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.attr", "icon", "camera");
+  });
+
+  it("shows the fallback icon immediately when the slotted image is already errored on mount", () => {
+    cy.mount(<UDExAvatar fallbackIcon="camera"></UDExAvatar>);
+
+    cy.get("[udex-avatar]").then($host => {
+      const img = document.createElement("img");
+      Object.defineProperty(img, "complete", { value: true });
+      Object.defineProperty(img, "naturalWidth", { value: 0 });
+      img.setAttribute("src", "broken.png");
+      img.setAttribute("alt", "Profile");
+      $host[0].appendChild(img);
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "icon", "camera");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+});

package/cypress/specs/CountrySelector.cy.tsx

@@ -235,4 +235,25 @@ describe("CountrySelector component", () => {
     cy.get("[udex-country-selector]").shadow().find("[udex-list-item]").first().click();
     cy.get("@selectionHandler").should("have.been.called");
   });
+
+  // Added: covers aria-required wiring on the combobox input in SelectBoxTemplate
+  // (shared template). The `required` boolean (inherited from SelectBase) drives
+  // aria-required={this.required} on the inner input[role="combobox"].
+  describe("aria-required accessibility", () => {
+    it("does not set aria-required=\"true\" on the combobox input by default (required not set)", () => {
+      cy.mount(<UDExCountrySelector id="country-selector-required" label="Countries"></UDExCountrySelector>);
+
+      cy.get("#country-selector-required").shadow()
+        .find('input[role="combobox"]')
+        .should("not.have.attr", "aria-required", "true");
+    });
+
+    it("sets aria-required=\"true\" on the combobox input when required is set", () => {
+      cy.mount(<UDExCountrySelector id="country-selector-required" label="Countries" required></UDExCountrySelector>);
+
+      cy.get("#country-selector-required").shadow()
+        .find('input[role="combobox"]')
+        .should("have.attr", "aria-required", "true");
+    });
+  });
 });

package/cypress/specs/List.cy.tsx

@@ -44,6 +44,16 @@ const collapsibleListRadioGroup = <UDExList id="list-group-header-collapsible" m
 </UDExListGroupHeader>
 </UDExList>;
 
+// Regression fixture: grouped MultiSelect list WITHOUT any collapsible group header.
+// This must stay on the listbox pattern (role="listbox", no aria-multiselectable, items
+// role="option") because _hasCollapsibleGroups is false.
+const nonCollapsibleList = <UDExList id="list-group-header-non-collapsible" mode="MultiSelect">
+<UDExListGroupHeader id="group-header-non-collapsible" supporting-text="Supporting text" label="Group Header">
+  <UDExListItem>List Item1</UDExListItem>
+  <UDExListItem>List Item2</UDExListItem>
+</UDExListGroupHeader>
+</UDExList>;
+
 describe("List component - collapsible group header", () => {
   it("MultiSelect - collapse and expand the group when pressing arrow keys on grouping header", () => {
     cy.mount(collapsibleList);
@@ -171,12 +181,14 @@ describe("List component - collapsible group header", () => {
 });
 
 // Added: covers the fix for a collapsible SingleSelect group header being incorrectly
-// selectable via click/Enter. Because UDExList does not opt into the tree structure
-// (supportsTreeStructure stays false), a collapsible SingleSelect header here renders
-// the plain `single-group-header-collapsible` <div> with role="button" (non-tree branch
-// of singleCollapsibleHeaderRole). The <div> has no @click handler and only a
-// Left/Right arrow @keydown handler — so it can never be selected, only collapsed via
-// the arrows or the arrow <udex-button>.
+// selectable via click/Enter. A collapsible SingleSelect header renders the plain
+// `single-group-header-collapsible` <div> (NOT a udex-list-item). The <div> has no
+// @click handler and only a Left/Right arrow @keydown handler — so it can never be
+// selected, only collapsed via the arrows or the arrow <udex-button>.
+// Updated: standalone UDExList now enters the WAI-ARIA tree pattern whenever it has a
+// collapsible group header (via its own `_hasCollapsibleGroups` getter, which drives
+// `_treeMode=true` on the group headers). So the header div's `singleCollapsibleHeaderRole`
+// resolves to "treeitem" (was "button") — it is a non-selectable parent tree node.
 describe("List - SingleSelect collapsible group header is never selectable", () => {
   const headerDiv = () =>
     cy.get("#group-header-collapsible").shadow().find(".udex-list__group-content");
@@ -188,10 +200,14 @@ describe("List - SingleSelect collapsible group header is never selectable", ()
     cy.mount(collapsibleListSingleSelect);
   });
 
-  it("renders the header as a plain div with role=\"button\" (non-tree mode)", () => {
+  // Updated: role is now "treeitem" (tree mode) instead of "button". A standalone
+  // collapsible list activates the tree pattern, so singleCollapsibleHeaderRole="treeitem".
+  // The header still renders as a plain div (no udex-list-item), so it is a non-selectable
+  // parent node with no aria-selected/aria-checked.
+  it("renders the header as a plain div with role=\"treeitem\" (tree mode)", () => {
     headerDiv()
       .should("exist")
-      .and("have.attr", "role", "button")
+      .and("have.attr", "role", "treeitem")
       .and("have.attr", "tabindex", "0");
     cy.get("#group-header-collapsible").shadow()
       .find("udex-list-item").should("not.exist");
@@ -201,8 +217,9 @@ describe("List - SingleSelect collapsible group header is never selectable", ()
   // freshly-queried `.should()` calls. The doubled `.and("not.have.attr", ...)` after a
   // shadow `.find()` re-yielded the subject as undefined (chai-jQuery "attr on undefined").
   // The standalone-List SingleSelect collapsible header renders the plain
-  // `single-group-header-collapsible` <div> (.udex-list__group-content) with role="button"
-  // (non-tree branch), aria-expanded, and no selection-state attribute.
+  // `single-group-header-collapsible` <div> (.udex-list__group-content) with role="treeitem"
+  // (tree mode), aria-expanded, and no selection-state attribute (parent tree nodes are not
+  // themselves selectable — only leaf items carry aria-selected).
   it("exposes aria-expanded but no selection-state attribute", () => {
     headerDiv().should("have.attr", "aria-expanded", "true");
     headerDiv().should("not.have.attr", "aria-selected");
@@ -276,6 +293,98 @@ describe("List - SingleSelect collapsible group header is never selectable", ()
   });
 });
 
+// Added: covers the WAI-ARIA tree pattern that the standalone <udex-list> activates
+// automatically whenever it has at least one collapsible <udex-list-group-header>.
+// The trigger is UDExList's own `_hasCollapsibleGroups` getter (independent of
+// SearchableListBase.supportsTreeStructure), which sets `_treeMode=true` on the group
+// headers and `accessibleRole="treeitem"` on the leaf items. In that mode the inner
+// `#udex-list` div gets role="tree" (aria-multiselectable="true" only in MultiSelect).
+describe("List - collapsible group header uses tree pattern", () => {
+  const innerList = () =>
+    cy.get("[udex-list]").shadow().find("#udex-list");
+
+  it("MultiSelect: inner #udex-list div has role=\"tree\"", () => {
+    cy.mount(collapsibleList);
+    innerList().should("have.attr", "role", "tree");
+  });
+
+  it("SingleSelect: inner #udex-list div has role=\"tree\"", () => {
+    cy.mount(collapsibleListSingleSelect);
+    innerList().should("have.attr", "role", "tree");
+  });
+
+  it("MultiSelect collapsible: inner #udex-list has aria-multiselectable=\"true\"", () => {
+    cy.mount(collapsibleList);
+    innerList().should("have.attr", "aria-multiselectable", "true");
+  });
+
+  it("SingleSelect collapsible: inner #udex-list does NOT have aria-multiselectable", () => {
+    cy.mount(collapsibleListSingleSelect);
+    innerList().should("not.have.attr", "aria-multiselectable");
+  });
+
+  it("group header host gets the _tree-mode attribute", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").should("have.attr", "_tree-mode");
+  });
+
+  it("MultiSelect collapsible header: inner udex-list-item exposes accessible-role=\"treeitem\"", () => {
+    cy.mount(collapsibleList);
+    // MultiSelect => useListItemHeader=true => the header renders a <udex-list-item>.
+    cy.get("#group-header-collapsible").shadow()
+      .find("udex-list-item").should("have.attr", "accessible-role", "treeitem");
+  });
+
+  it("MultiSelect collapsible header: shadow [part=item] has role=\"treeitem\" and aria-expanded", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").shadow()
+      .find("udex-list-item").shadow()
+      .find("[part=item]")
+      .should("have.attr", "role", "treeitem")
+      .and("have.attr", "aria-expanded", "true");
+  });
+
+  it("SingleSelect collapsible header: plain div gets role=\"treeitem\"", () => {
+    cy.mount(collapsibleListSingleSelect);
+    // SingleSelect => useListItemHeader=false => plain .udex-list__group-content <div>,
+    // whose role comes from singleCollapsibleHeaderRole => "treeitem" in tree mode.
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-content").should("have.attr", "role", "treeitem");
+  });
+
+  it("child items expose accessible-role=\"treeitem\" on the host", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").find("udex-list-item")
+      .each($item => {
+        cy.wrap($item).should("have.attr", "accessible-role", "treeitem");
+      });
+  });
+
+  it("child items render role=\"treeitem\" on their shadow [part=item]", () => {
+    cy.mount(collapsibleList);
+    cy.get("#group-header-collapsible").find("udex-list-item").eq(0).shadow()
+      .find("[part=item]").should("have.attr", "role", "treeitem");
+  });
+
+  // Regression: a grouped list WITHOUT any collapsible header must NOT enter tree mode.
+  it("non-collapsible grouped list keeps role=\"listbox\" (no tree pattern)", () => {
+    cy.mount(nonCollapsibleList);
+    innerList().should("have.attr", "role", "listbox");
+  });
+
+  it("non-collapsible grouped list has no aria-multiselectable and no _tree-mode", () => {
+    cy.mount(nonCollapsibleList);
+    innerList().should("not.have.attr", "aria-multiselectable");
+    cy.get("#group-header-non-collapsible").should("not.have.attr", "_tree-mode");
+  });
+
+  it("non-collapsible list: child items render role=\"option\" on shadow [part=item]", () => {
+    cy.mount(nonCollapsibleList);
+    cy.get("#group-header-non-collapsible").find("udex-list-item").eq(0).shadow()
+      .find("[part=item]").should("have.attr", "role", "option");
+  });
+});
+
 describe("List component - SingleContent accessible name", () => {
   it("uses accessible-name as aria-label when only accessible-name is set", () => {
     cy.mount(