@sapudex/web-components 2.61.0 → 2.63.0

package/cypress/specs/ListItem.cy.tsx

@@ -222,6 +222,56 @@ describe("ListItem", () => {
       });
     });
 
+    describe("Standalone rated MultiSelect preservation", () => {
+      it("keeps real focus and selection on the inner option while retaining the standalone checkbox and rating names", () => {
+        cy.mount(
+          <div>
+            <button id="before-rated-list-item">Previous</button>
+            <UDExListItem id="standalone-rated-item" mode={UDExListMode.MultiSelect}
+              label="Rated choice" rating="4" ratingCount="4.0" totalCount="20"></UDExListItem>
+          </div>
+        );
+        const UDExItem = () => cy.get("#standalone-rated-item");
+        const UDExRow = () => UDExItem().shadow().find('[part="item"]');
+        const UDExAssertStandaloneState = (UDExSelected: boolean) => {
+          UDExRow().should("be.focused").should($row => {
+            expect($row).to.have.attr("role", "option");
+            expect($row).to.have.attr("tabindex", "0");
+            expect($row).to.have.attr("aria-selected", String(UDExSelected));
+            expect($row).not.to.have.attr("aria-checked");
+          });
+          UDExItem().should($host => {
+            expect($host[0]).to.have.property("_useHostAriaRole", false);
+            expect($host).not.to.have.attr("aria-selected");
+            expect($host[0]).to.have.property("selected", UDExSelected);
+          });
+          UDExItem().shadow().find("[udex-checkbox]").should($checkbox => {
+            expect($checkbox).to.have.attr("aria-hidden", "true");
+            expect($checkbox).to.have.attr("tabindex", "-1");
+            expect($checkbox[0]).to.have.property("checked", UDExSelected);
+            // Standalone real-focus items retain the existing name, including its trailing space.
+            const UDExName = `checkbox ${UDExSelected ? "Selected" : "Unselected"} `;
+            expect($checkbox[0]).to.have.property("accessibleName", UDExName);
+            expect($checkbox).to.have.attr("accessible-name", UDExName);
+          });
+          UDExItem().shadow().find(".udex-list__content-wrap").should("have.attr", "aria-label", "Rated choice");
+          UDExItem().shadow().find("[udex-rating-indicator]").should($rating => {
+            expect($rating).to.have.attr("aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
+            expect($rating).to.have.attr("disabled");
+            expect($rating).to.have.attr("readonly");
+          });
+        };
+
+        cy.get("#before-rated-list-item").realClick();
+        cy.realPress("Tab");
+        UDExAssertStandaloneState(false);
+        cy.realPress("Enter");
+        UDExAssertStandaloneState(true);
+        cy.realPress("Space");
+        UDExAssertStandaloneState(false);
+      });
+    });
+
     // Added: unit-level coverage for the WCAG 4.1.2 Treeview Checkbox pattern getter
     // (ariaCheckedValue). It only activates when the item's accessible-role ===
     // "treeitem" (set by SearchableListBase in the tree pattern). The inner checkbox

package/cypress/specs/MastheadCountrySelector.cy.tsx

@@ -0,0 +1,177 @@
+import { UDExMastheadCountrySelector } from "../support/component-imports.js";
+
+const singleRegion = JSON.stringify([
+  {
+    title: "Europe",
+    countries: [
+      { displayTitle: "Germany", countryCode: "DE", url: "/germany/store.html" },
+      { displayTitle: "France", countryCode: "FR", url: "/france/store.html" },
+      { displayTitle: "Poland", countryCode: "PL", url: "/poland/store.html" },
+    ],
+  },
+]);
+
+const multiRegion = JSON.stringify([
+  {
+    title: "Americas",
+    countries: [
+      { displayTitle: "Canada", countryCode: "CA", url: "/canada/store.html" },
+      { displayTitle: "Brazil", countryCode: "BR", url: "/brazil/store.html" },
+    ],
+  },
+  {
+    title: "Europe",
+    countries: [
+      { displayTitle: "Germany", countryCode: "DE", url: "/germany/store.html" },
+      { displayTitle: "France", countryCode: "FR", url: "/france/store.html" },
+    ],
+  },
+]);
+
+describe("MastheadCountrySelector", () => {
+  describe("accessibleNameSearch property", () => {
+    it("passes accessible-name to the search field when set", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector"
+          accessible-name-search="Search countries"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("have.attr", "accessible-name", "Search countries");
+    });
+
+    it("applies accessible-name as aria-label on the search input", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-aria"
+          accessible-name-search="Find a country"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .shadow()
+        .find("input")
+        .should("have.attr", "aria-label", "Find a country");
+    });
+
+    it("does not set accessible-name on search when property is empty", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-no-a11y-name"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("not.have.attr", "accessible-name");
+    });
+  });
+
+  describe("accessibleNameSearchResetIcon property", () => {
+    it("passes accessible-name-reset-icon to the search field when set", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-reset-icon"
+          accessible-name-search-reset-icon="Clear search"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("have.attr", "accessible-name-reset-icon", "Clear search");
+    });
+
+    it("does not set accessible-name-reset-icon on search when property is empty", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-no-reset-icon-name"
+          search-label="Search"
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("not.have.attr", "accessible-name-reset-icon");
+    });
+  });
+
+  describe("regions view", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-multi"
+          region-title="Choose your Region"
+          country-title="Choose your Country"
+          search-label="Search"
+          regions={multiRegion}>
+        </UDExMastheadCountrySelector>
+      );
+      cy.get("[udex-masthead-country-selector]").shadow().as("shadow");
+    });
+
+    it("renders region title", () => {
+      cy.get("@shadow").find(".udex-masthead-country-selector__title").should("have.text", "Choose your Region");
+    });
+
+    it("renders region items", () => {
+      cy.get("@shadow").find(".udex-masthead-country-selector__item_region").should("have.length", 2);
+    });
+
+    it("opens country list on region item click", () => {
+      cy.get("@shadow").find(".udex-masthead-country-selector__item_region").first().click();
+      cy.get("@shadow").find(".udex-masthead-country-selector__list_countries").should("exist");
+    });
+  });
+
+  describe("single region mode", () => {
+    it("shows the country list directly without region selection", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-single"
+          country-title="Choose your Country"
+          search-label="Search"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find(".udex-masthead-country-selector__list_countries")
+        .should("exist");
+    });
+  });
+
+  describe("hideSearch property", () => {
+    it("hides the search field when hideSearch is true", () => {
+      cy.mount(
+        <UDExMastheadCountrySelector
+          id="country-selector-no-search"
+          hide-search
+          country-title="Choose your Country"
+          regions={singleRegion}>
+        </UDExMastheadCountrySelector>
+      );
+
+      cy.get("[udex-masthead-country-selector]").shadow()
+        .find("[udex-search]")
+        .should("not.exist");
+    });
+  });
+});