@sapudex/web-components 2.60.0 → 2.62.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/SecondaryNavigationDesktop.cy.tsx

@@ -26,9 +26,34 @@ const secondaryNavigationWithoutBreadcrumbs = <UDExSecondaryNavigation
 </UDExSecondaryNavigation>
 
 describe("Desktop", () => {
-  beforeEach( () => {
+  // The overflow split (which items are visible vs. moved under "More") is computed by
+  // measuring item-label widths against the rendered web font ('72 Brand Variable') in
+  // reflowItems(). If reflowItems() runs before that font has finished loading, it measures
+  // with fallback metrics and produces a different split — making index-based selectors
+  // (eq(5), eq(6)) and ".udex-secondary-navigation__list-item" counts nondeterministic.
+  // Wait for the font to finish loading, then re-run reflowItems() directly so the split is
+  // recomputed with the final metrics. We call the method rather than resizing the viewport
+  // because a resize fires the component's ResizeObserver asynchronously, and that callback
+  // (via _handleResize) can land after a test opens a dropdown and close it mid-test.
+  const waitForDeterministicReflow = () => {
+    cy.document().then(doc => doc.fonts.ready);
+    cy.get("#secondary-nav").then($nav => {
+      ($nav[0] as unknown as { reflowItems: () => void }).reflowItems();
+    });
+  };
+
+  // The dropdown auto-focuses its first sub-item asynchronously in onAfterRendering.
+  // Keyboard tests that press a key immediately after opening must wait for that focus to
+  // land, otherwise the key is dispatched to whatever element happens to be active.
+  const firstSubItemFocused = () =>
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").first()
+      .shadow().find(".udex-secondary-navigation__dropdown-item").should("be.focused");
+
+  beforeEach(() => {
     cy.viewport(1920, 1080)
     cy.mount(defaultSecondaryNavigation)
+    waitForDeterministicReflow();
     const itemClickHandler = cy.stub().as("itemClickHandler");
     cy.get("#secondary-nav").then($navigation => {
       $navigation[0].addEventListener("item-click", itemClickHandler)
@@ -217,6 +242,9 @@ describe("Desktop", () => {
     cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").first()
     .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
+    // Wait for auto-focus to land on the first sub-item before driving the keyboard.
+    firstSubItemFocused();
+
     cy.realPress(["Shift", "Tab"]); // closes dropdown, returns focus to trigger button
     cy.realPress(["Shift", "Tab"]); // moves focus to heading title
 
@@ -234,7 +262,10 @@ describe("Desktop", () => {
   it("moves focus to next item on `More option`", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6)
     .shadow().find(".udex-secondary-navigation__item").click().realPress("Enter").realPress("Tab").realPress("Enter")
-    cy.get("#secondary-nav").find("udex-button").then($button => {
+    // Use .should (retried) instead of .then (evaluated once): the focus-ring style is
+    // applied after the keyboard navigation settles, so a single read can observe a
+    // transient state.
+    cy.get("#secondary-nav").find("udex-button").should($button => {
         const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after")
         expect(buttonBorder).to.eq('rgb(0, 100, 217)');
       })
@@ -299,6 +330,9 @@ describe("Desktop", () => {
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible");
 
+    // Wait for the auto-focus to land on the first sub-item before pressing Tab.
+    firstSubItemFocused();
+
     // Tab through all 3 sub-items; Tab on the last one (index 2) triggers closeDropdown().
     // No preventDefault() is called, so the browser moves focus to the next nav item (eq(1)).
     cy.realPress("Tab").realPress("Tab").realPress("Tab");
@@ -334,7 +368,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
-      .then($item => {
+      .should($item => {
         const item = $item[0] as HTMLElement;
         const dropdown = item.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
         const { top } = dropdown.getBoundingClientRect();
@@ -364,6 +398,8 @@ describe("Desktop", () => {
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
+      firstSubItemFocused();
+
       cy.realPress("Tab");
 
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -375,6 +411,8 @@ describe("Desktop", () => {
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
+      firstSubItemFocused();
+
       cy.realPress("Escape");
 
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -389,6 +427,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // Two ArrowDown presses advance from index 0 to index 2 (secondary nested 3 — the last sub-item).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}");
 
       // Tab on the last sub-item triggers closeDropdown() in the keydown handler.
@@ -410,6 +449,7 @@ describe("Desktop", () => {
       // Shift+Tab on index 0 triggers closeDropdown() in the keydown handler.
       // No preventDefault() is called, so the browser completes Shift+Tab and returns focus to the
       // trigger button that opened the dropdown.
+      firstSubItemFocused();
       cy.realPress(["Shift", "Tab"]);
 
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -425,6 +465,7 @@ describe("Desktop", () => {
 
       // Dropdown opens with focus on first sub-item (secondary nested 1, index 0).
       // Two ArrowDown presses move focus to secondary nested 3 (index 2).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -438,6 +479,7 @@ describe("Desktop", () => {
 
       // Two ArrowDown presses reach secondary nested 3 (index 2),
       // one ArrowUp moves back to secondary nested 2 (index 1).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}").realPress("{uparrow}").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -450,6 +492,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // ArrowDown moves off the first item, then End jumps to the last sub-item (secondary nested 3).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("End").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -466,6 +509,7 @@ describe("Desktop", () => {
 
       // Two ArrowDown presses move focus away from the first item,
       // then Home jumps back to secondary nested 1 (index 0).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}").realPress("Home").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -485,6 +529,7 @@ describe("Desktop", () => {
 
       // Focus starts on secondary nested 1 (index 0), which has nested items.
       // ArrowRight drills into its nested level without firing sub-item-click.
+      firstSubItemFocused();
       cy.realPress("{rightarrow}");
 
       // The nested level is displayed: back button (index 0) + nested children.
@@ -502,6 +547,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // Reset after the click that opened the dropdown, so we only capture ArrowRight side-effects.
+      firstSubItemFocused();
       cy.get("@itemClickHandler").invoke("reset");
 
       cy.realPress("{rightarrow}");
@@ -525,6 +571,7 @@ describe("Desktop", () => {
 
       // Focus is on first sub-item (secondary nested 1, index 0, has nested items).
       // Press Enter to navigate into its nested level via handleEnterAndSpace → handleSubItemClick.
+      firstSubItemFocused();
       cy.realPress("Enter");
 
       // The nested level is displayed: back button (index 0) + nested children.
@@ -542,6 +589,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // Press Enter on first sub-item (secondary nested 1, index 0, has nested items).
+      firstSubItemFocused();
       cy.realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -556,6 +604,7 @@ describe("Desktop", () => {
       // ArrowRight from secondary nested 1 drills into its nested level (no event, just navigation).
       // ArrowLeft on the back button restores the previous level and focuses secondary nested 1.
       // Enter then activates secondary nested 1, firing item-click.
+      firstSubItemFocused();
       cy.realPress("{rightarrow}").realPress("{leftarrow}").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")