@sapudex/web-components 2.48.0 → 2.50.0

package/cypress/specs/List.cy.tsx

@@ -170,6 +170,112 @@ 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>.
+describe("List - SingleSelect collapsible group header is never selectable", () => {
+  const headerDiv = () =>
+    cy.get("#group-header-collapsible").shadow().find(".udex-list__group-content");
+
+  const childItems = () =>
+    cy.get("#group-header-collapsible").find("udex-list-item");
+
+  beforeEach(() => {
+    cy.mount(collapsibleListSingleSelect);
+  });
+
+  it("renders the header as a plain div with role=\"button\" (non-tree mode)", () => {
+    headerDiv()
+      .should("exist")
+      .and("have.attr", "role", "button")
+      .and("have.attr", "tabindex", "0");
+    cy.get("#group-header-collapsible").shadow()
+      .find("udex-list-item").should("not.exist");
+  });
+
+  // Updated: split the chained `.and("not.have.attr", ...)` assertions into separate
+  // 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.
+  it("exposes aria-expanded but no selection-state attribute", () => {
+    headerDiv().should("have.attr", "aria-expanded", "true");
+    headerDiv().should("not.have.attr", "aria-selected");
+    headerDiv().should("not.have.attr", "aria-checked");
+  });
+
+  it("clicking the header body does NOT select it and does NOT collapse it", () => {
+    headerDiv().realClick();
+
+    // Updated: separate assertions — chaining `.and("not.have.attr", ...)` after a
+    // value-form `.should("have.attr", name, value)` re-yields the attribute string, not
+    // the element, causing "attr on undefined".
+    headerDiv().should("have.attr", "aria-expanded", "true");
+    headerDiv().should("not.have.attr", "aria-selected");
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed");
+    cy.get("#group-header-collapsible").then($gh => {
+      expect(($gh[0] as HTMLElement & { selected: boolean }).selected).to.not.equal(true);
+    });
+  });
+
+  it("clicking the header body does NOT select any child item", () => {
+    headerDiv().realClick();
+
+    childItems().each($item => {
+      cy.wrap($item).should("not.have.attr", "selected");
+    });
+  });
+
+  it("pressing Enter on the focused header does NOT select it and does NOT collapse it", () => {
+    headerDiv().focus();
+    cy.realPress("Enter");
+
+    // Updated: separate assertions (see note above on chained `.and("not.have.attr", ...)`).
+    headerDiv().should("have.attr", "aria-expanded", "true");
+    headerDiv().should("not.have.attr", "aria-selected");
+    cy.get("#group-header-collapsible").then($gh => {
+      expect(($gh[0] as HTMLElement & { selected: boolean }).selected).to.not.equal(true);
+    });
+  });
+
+  it("ArrowLeft collapses the expanded group (aria-expanded=false, host collapsed)", () => {
+    headerDiv().should("have.attr", "aria-expanded", "true");
+
+    headerDiv().focus();
+    cy.realPress("ArrowLeft");
+
+    headerDiv().should("have.attr", "aria-expanded", "false");
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+  });
+
+  it("ArrowRight expands the collapsed group again", () => {
+    headerDiv().focus();
+    cy.realPress("ArrowLeft");
+    headerDiv().should("have.attr", "aria-expanded", "false");
+
+    headerDiv().focus();
+    cy.realPress("ArrowRight");
+    headerDiv().should("have.attr", "aria-expanded", "true");
+  });
+
+  it("clicking the arrow button collapses/expands without selecting", () => {
+    cy.get("#group-header-collapsible").shadow()
+      .find(".udex-list__group-header-wrap").as("grouping-header");
+
+    cy.get("@grouping-header").find(".udex-list__group-heading__icon").realClick();
+    cy.get("#group-header-collapsible").should("have.attr", "collapsed", "");
+    headerDiv().should("not.have.attr", "aria-selected");
+
+    cy.get("@grouping-header").find(".udex-list__group-heading__icon").realClick();
+    cy.get("#group-header-collapsible").should("not.have.attr", "collapsed", "");
+  });
+});
+
 describe("List component - SingleContent accessible name", () => {
   it("uses accessible-name as aria-label when only accessible-name is set", () => {
     cy.mount(

package/cypress/specs/ListItem.cy.tsx

@@ -2,7 +2,7 @@ import { UDExListItem } from "../support/component-imports.js";
 import UDExButton from "../../src/Button.js"
 import { UDExAvatarShape } from "../../dist/Avatar.js";
 import { UDExAvatarSize } from "../../src/Avatar.js";
-import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
+import { UDExAdditionalTextState, UDExListMode, UDExListStyleType } from "../../src/types/List.js";
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
 import { UDExDisplayType } from "../../src/RatingIndicator.js";
 
@@ -221,4 +221,294 @@ describe("ListItem", () => {
         cy.get("@rating").should("have.attr", "aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
       });
     });
+
+    // Added: unit-level coverage for the WCAG 4.1.2 Treeview Checkbox pattern getters
+    // (ariaCheckedValue / checkboxAriaHidden). These only activate when the item's
+    // accessible-role === "treeitem" (set by SearchableListBase in the tree pattern).
+    describe("Tree accessibility pattern (accessible-role=\"treeitem\")", () => {
+      it("[part=item] has role=\"treeitem\" and aria-checked=\"false\" when unselected", () => {
+        cy.mount(<UDExListItem
+          id="tree-item"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item").shadow()
+          .find("[part=item]")
+          .should("have.attr", "role", "treeitem")
+          .and("have.attr", "aria-checked", "false");
+      });
+
+      it("aria-checked=\"true\" when selected", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-selected"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          selected
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item-selected").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "true");
+      });
+
+      it("aria-checked=\"mixed\" when indeterminate", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-mixed"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          indeterminate
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item-mixed").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "mixed");
+      });
+
+      it("inner udex-checkbox is aria-hidden (JAWS double-announce guard)", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-checkbox"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item-checkbox").shadow()
+          .find("udex-checkbox").should("have.attr", "aria-hidden");
+      });
+
+      it("aria-checked reflects reactive update from unselected -> selected", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-toggle"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item-toggle").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "false");
+
+        cy.get("#tree-item-toggle").then($el => {
+          ($el[0] as UDExListItem).selected = true;
+        });
+
+        cy.get("#tree-item-toggle").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "true");
+      });
+
+      it("indeterminate takes precedence over selected", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-precedence"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          selected
+          indeterminate
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item-precedence").shadow()
+          .find("[part=item]").should("have.attr", "aria-checked", "mixed");
+      });
+
+      // Added: aria-expanded is emitted on the shadow [part="item"] div (the same
+      // element that carries role/aria-checked). Previously it was only on the host,
+      // which has role="none" and is therefore invisible to AT.
+      it("[part=item] has aria-expanded=\"true\" when collapsible and expanded (not collapsed)", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-expanded"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          collapsible
+          label="Programming Languages">
+        </UDExListItem>);
+
+        cy.get("#tree-item-expanded").shadow()
+          .find("[part=item]").should("have.attr", "aria-expanded", "true");
+      });
+
+      it("[part=item] has aria-expanded=\"false\" when collapsible and collapsed", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-collapsed"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          collapsible
+          collapsed
+          label="Programming Languages">
+        </UDExListItem>);
+
+        cy.get("#tree-item-collapsed").shadow()
+          .find("[part=item]").should("have.attr", "aria-expanded", "false");
+      });
+
+      it("[part=item] has NO aria-expanded when the item is not collapsible", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-leaf"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#tree-item-leaf").shadow()
+          .find("[part=item]").should("not.have.attr", "aria-expanded");
+      });
+
+      // Regression: ariaExpandedValue getter guards on `collapsible`. A non-collapsible
+      // treeitem must not surface aria-expanded even though `expanded` (a derived getter,
+      // `!collapsed`) is truthy by default.
+      it("non-collapsible treeitem: aria-expanded absent (getter guards on collapsible)", () => {
+        cy.mount(<UDExListItem
+          id="tree-item-leaf-guard"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        // sanity: the derived `expanded` getter is truthy on a fresh item (collapsed defaults false)
+        cy.get("#tree-item-leaf-guard").should($el => {
+          expect(($el[0] as UDExListItem).expanded).to.equal(true);
+        });
+
+        // ...but the shadow attr is still absent because collapsible is false
+        cy.get("#tree-item-leaf-guard").shadow()
+          .find("[part=item]").should("not.have.attr", "aria-expanded");
+      });
+
+      // Added: SingleSelect treeitem exposes aria-selected (not aria-checked).
+      // The tree-pattern getters split by mode:
+      //   - MultiSelect treeitem -> aria-checked (true|false|mixed)
+      //   - SingleSelect treeitem -> aria-selected (true|false)
+      // Both getters return undefined for the wrong mode, so the attribute is absent.
+      describe("SingleSelect treeitem exposes aria-selected (not aria-checked)", () => {
+        it("aria-selected=\"false\" when unselected", () => {
+          cy.mount(<UDExListItem
+            id="single-tree-item"
+            accessible-role="treeitem"
+            mode={UDExListMode.SingleSelect}
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#single-tree-item").shadow()
+            .find("[part=item]")
+            .should("have.attr", "role", "treeitem")
+            .and("have.attr", "aria-selected", "false");
+        });
+
+        it("aria-selected=\"true\" when selected", () => {
+          cy.mount(<UDExListItem
+            id="single-tree-item-selected"
+            accessible-role="treeitem"
+            mode={UDExListMode.SingleSelect}
+            selected
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#single-tree-item-selected").shadow()
+            .find("[part=item]").should("have.attr", "aria-selected", "true");
+        });
+
+        it("no aria-checked in SingleSelect tree mode (ariaCheckedValue undefined)", () => {
+          cy.mount(<UDExListItem
+            id="single-tree-item-no-checked"
+            accessible-role="treeitem"
+            mode={UDExListMode.SingleSelect}
+            selected
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#single-tree-item-no-checked").shadow()
+            .find("[part=item]").should("not.have.attr", "aria-checked");
+        });
+
+        it("aria-selected reflects reactive update from unselected -> selected", () => {
+          cy.mount(<UDExListItem
+            id="single-tree-item-toggle"
+            accessible-role="treeitem"
+            mode={UDExListMode.SingleSelect}
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#single-tree-item-toggle").shadow()
+            .find("[part=item]").should("have.attr", "aria-selected", "false");
+
+          cy.get("#single-tree-item-toggle").then($el => {
+            ($el[0] as UDExListItem).selected = true;
+          });
+
+          cy.get("#single-tree-item-toggle").shadow()
+            .find("[part=item]").should("have.attr", "aria-selected", "true");
+        });
+
+        // Regression: aria-selected must be absent when the item is NOT a treeitem
+        // (default listbox/option role). ariaSelectedValue guards on roleItem === "treeitem".
+        it("no aria-selected when accessible-role is not \"treeitem\" (SingleSelect default option)", () => {
+          cy.mount(<UDExListItem
+            id="single-opt-item"
+            mode={UDExListMode.SingleSelect}
+            selected
+            label="JavaScript">
+          </UDExListItem>);
+
+          cy.get("#single-opt-item").shadow()
+            .find("[part=item]").should("not.have.attr", "aria-selected");
+        });
+      });
+
+      // Added: cross-mode isolation — the tree-pattern getters are strictly split by
+      // mode, so a MultiSelect treeitem must NOT surface aria-selected, mirroring the
+      // SingleSelect-must-not-surface-aria-checked invariant above.
+      it("MultiSelect treeitem: aria-selected absent (ariaSelectedValue guards on !modeMultiSelect)", () => {
+        cy.mount(<UDExListItem
+          id="multi-tree-item-no-selected"
+          accessible-role="treeitem"
+          mode={UDExListMode.MultiSelect}
+          selected
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#multi-tree-item-no-selected").shadow()
+          .find("[part=item]").should("not.have.attr", "aria-selected");
+      });
+    });
+
+    // Added: regression - the tree-pattern getters must be silent when the item is
+    // rendered with the default role (i.e. everywhere the tree pattern is NOT active).
+    describe("Non-tree role (default listbox/option) regression", () => {
+      it("no aria-checked attribute when accessible-role is not \"treeitem\"", () => {
+        cy.mount(<UDExListItem
+          id="opt-item"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#opt-item").shadow()
+          .find("[part=item]").should("not.have.attr", "aria-checked");
+      });
+
+      it("inner udex-checkbox is NOT aria-hidden when not in tree mode", () => {
+        cy.mount(<UDExListItem
+          id="opt-item-checkbox"
+          mode={UDExListMode.MultiSelect}
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#opt-item-checkbox").shadow()
+          .find("udex-checkbox").should("not.have.attr", "aria-hidden");
+      });
+
+      it("explicit non-tree accessible-role (e.g. \"option\") still suppresses aria-checked", () => {
+        cy.mount(<UDExListItem
+          id="opt-item-explicit"
+          accessible-role="option"
+          mode={UDExListMode.MultiSelect}
+          selected
+          label="JavaScript">
+        </UDExListItem>);
+
+        cy.get("#opt-item-explicit").shadow()
+          .find("[part=item]")
+          .should("have.attr", "role", "option")
+          .and("not.have.attr", "aria-checked");
+      });
+    });
 });

package/cypress/specs/MediaPlayer.cy.tsx

@@ -170,6 +170,38 @@ describe("MediaPlayer — custom plugin support", () => {
     });
   });
 
+  describe("busy indicator injection", () => {
+    it("injects an active udex-busy-indicator inside the loading spinner after init", () => {
+      cy.mount(basicPlayer);
+
+      // The busy indicator is injected in _injectBusyIndicator(), called after
+      // the videojs player is created. Waiting for the player to exist ensures
+      // onAfterRendering has run and the spinner is present in the shadow DOM.
+      cy.get("#test-media-player").should(() => {
+        expect(
+          (Cypress.$("#test-media-player")[0] as any).player,
+          "player must be created before busy indicator is injected",
+        ).to.exist;
+      });
+
+      cy.get("#test-media-player")
+        .shadow()
+        .find(".vjs-loading-spinner")
+        .find("[udex-busy-indicator]")
+        .should("exist")
+        .and("have.attr", "active");
+
+      // Updated: _injectBusyIndicator() now also sets the surface-container
+      // attribute. A separate query is used because chaining a second
+      // have.attr changes the subject to the first attribute's value.
+      cy.get("#test-media-player")
+        .shadow()
+        .find(".vjs-loading-spinner")
+        .find("[udex-busy-indicator]")
+        .should("have.attr", "surface-container");
+    });
+  });
+
   describe("backward compatibility", () => {
     it("renders the video-js element without any custom plugins", () => {
       cy.mount(basicPlayer);