@sapudex/web-components 2.61.0 → 2.63.0

package/cypress/specs/List.cy.tsx

@@ -362,18 +362,27 @@ describe("List - collapsible group header uses tree pattern", () => {
       .find(".udex-list__group-content").should("have.attr", "role", "treeitem");
   });
 
-  it("SingleSelect collapsible header: nests the role=\"group\" content region inside the treeitem (conformant tree)", () => {
+  // Updated: the header owns a same-shadow sibling group without including its leaves in the visible label.
+  it("SingleSelect collapsible header: owns the sibling content group without nesting its slot", () => {
     cy.mount(collapsibleListSingleSelect);
     cy.get("#group-header-collapsible").shadow()
-      .find(".udex-list__group-list > .udex-list__group-content--nested[role='treeitem']").should("exist");
-    // The content region is a descendant of the treeitem, not a sibling.
-    cy.get("#group-header-collapsible").shadow()
-      .find(".udex-list__group-content--nested[role='treeitem'] .udex-list__group-list__content[role='group']").should("exist");
-    cy.get("#group-header-collapsible").shadow()
-      .find(".udex-list__group-list > .udex-list__group-list__content[role='group']").should("not.exist");
-    // The visible header row wrapper now sits inside the treeitem.
-    cy.get("#group-header-collapsible").shadow()
-      .find(".udex-list__group-content--nested[role='treeitem'] > .udex-list__group-header-row").should("exist");
+      .find(".udex-list__group-list > .udex-list__group-content.udex-list__group-header-wrap[role='treeitem']")
+      .should(UDExHeader => {
+        const UDExRow = UDExHeader[0];
+        const UDExShadow = UDExRow.getRootNode() as ShadowRoot;
+        const UDExOwnedId = UDExRow.getAttribute("aria-owns");
+        expect(UDExOwnedId).to.match(/^\S+$/);
+        expect(UDExRow.getAttribute("aria-controls")).to.equal(UDExOwnedId);
+        const UDExGroups = UDExShadow.querySelectorAll(`[id="${UDExOwnedId}"]`);
+        expect(UDExGroups).to.have.length(1);
+        const UDExGroup = UDExGroups[0];
+        expect(UDExGroup.matches(".udex-list__group-list__content[role=group]")).to.equal(true);
+        expect(UDExGroup.getRootNode()).to.equal(UDExShadow);
+        expect(UDExGroup.parentElement).to.equal(UDExRow.parentElement);
+        expect(UDExRow.nextElementSibling).to.equal(UDExGroup);
+        expect(UDExRow.querySelector("slot, [role=group], [udex-list-item]")).to.equal(null);
+        expect(UDExGroup.querySelector("slot")!.assignedElements()).to.have.length(2);
+      });
   });
 
   it("child items expose accessible-role=\"treeitem\" on the host", () => {
@@ -448,6 +457,59 @@ describe("List - flat MultiSelect selection announcement", () => {
   });
 });
 
+describe("List component - accessible role attribute reflection", () => {
+  it("preserves the default listbox role for standalone lists", () => {
+    cy.mount(<UDExList><UDExListItem>Item 1</UDExListItem></UDExList>);
+
+    cy.get("[udex-list]").should("have.attr", "accessible-role", "listbox");
+    cy.get("[udex-list]").shadow().find("#udex-list").should("have.attr", "role", "listbox");
+  });
+
+  it("reflects an empty role configuration when the host owns the role", () => {
+    cy.mount(<UDExList role="tree" accessibleRole=""><UDExListItem>Item 1</UDExListItem></UDExList>);
+
+    cy.get("[udex-list]").should("have.attr", "role", "tree").and("have.attr", "accessible-role", "");
+    cy.get("[udex-list]").shadow().find("#udex-list").should("have.attr", "role", "none");
+  });
+
+  it("updates the inner role when an explicit attribute is set", () => {
+    cy.mount(<UDExList><UDExListItem>Item 1</UDExListItem></UDExList>);
+
+    cy.get("[udex-list]").shadow().find("#udex-list").should("have.attr", "role", "listbox");
+    cy.get("[udex-list]").invoke("attr", "accessible-role", "tree");
+    cy.get("[udex-list]").shadow().find("#udex-list").should("have.attr", "role", "tree");
+  });
+});
+
+describe("ListItem - removing an explicit accessible role", () => {
+  (["SingleSelect", "MultiSelect", "SingleContent"] as const).forEach(UDExMode => {
+    it(`${UDExMode}: restores fallback roles and selection semantics after removeAttr`, () => {
+      cy.mount(<UDExListItem mode={UDExMode} accessibleRole="treeitem">Item 1</UDExListItem>);
+      const UDExRole = UDExMode === "SingleContent" ? "listitem" : "option";
+      const UDExRow = () => cy.get("[udex-list-item]").shadow().find("[part=item]");
+
+      UDExRow().should("have.attr", "role", "treeitem");
+      cy.get("[udex-list-item]").should("have.prop", "effectiveRole", "treeitem");
+      // Attribute removal resets accessibleRole to null, not an empty string.
+      cy.get("[udex-list-item]").invoke("removeAttr", "accessible-role");
+      cy.get("[udex-list-item]").should(UDExItem => {
+        expect(UDExItem).not.to.have.attr("accessible-role");
+        expect(UDExItem).to.have.prop("roleItem", UDExRole);
+        expect(UDExItem).to.have.prop("effectiveRole", "option");
+      });
+      UDExRow().should(UDExItem => {
+        expect(UDExItem).to.have.attr("role", UDExRole);
+        expect(UDExItem).not.to.have.attr("aria-checked");
+        if (UDExMode === "SingleContent") {
+          expect(UDExItem).not.to.have.attr("aria-selected");
+        } else {
+          expect(UDExItem).to.have.attr("aria-selected", "false");
+        }
+      });
+    });
+  });
+});
+
 describe("List component - SingleContent accessible name", () => {
   it("uses accessible-name as aria-label when only accessible-name is set", () => {
     cy.mount(
@@ -547,3 +609,555 @@ describe("List component - selection modes keep listbox/option role", () => {
     });
   });
 });
+
+describe("List - standalone grouped MultiSelect keyboard regressions", () => {
+  const UDExHeaderRow = (UDExId = "keyboard-group-1") =>
+    cy.get(`[udex-list-group-header]#${UDExId}`).shadow()
+      .find("[udex-list-item]#group-heading").shadow().find("[part=item]");
+  const UDExLeafRow = (UDExId: string) =>
+    cy.get(`[udex-list-item]#${UDExId}`).shadow().find("[part=item]");
+
+  const UDExAssertRovingTabStop = (UDExActiveId: string) => {
+    cy.get("[udex-list]#keyboard-list").find("[udex-list-group-header]").each(UDExGroup => {
+      UDExHeaderRow(UDExGroup[0].id)
+        .should("have.attr", "tabindex", UDExGroup[0].id === UDExActiveId ? "0" : "-1");
+    });
+    cy.get("[udex-list]#keyboard-list").find("[udex-list-item]").each(UDExItem => {
+      UDExLeafRow(UDExItem[0].id)
+        .should("have.attr", "tabindex", UDExItem[0].id === UDExActiveId ? "0" : "-1");
+    });
+  };
+
+  beforeEach(() => {
+    cy.mount(
+      <div id="list-keyboard-fixture">
+        <button id="before-list" type="button">Before list</button>
+        <UDExList id="keyboard-list" mode="MultiSelect" accessible-name="Grouped choices">
+          <UDExListGroupHeader id="keyboard-group-1" label="First group">
+            <UDExListItem id="keyboard-alpha" label="Alpha" />
+            <UDExListItem id="keyboard-disabled" label="Unavailable" disabled />
+            <UDExListItem id="keyboard-beta" label="Beta" />
+          </UDExListGroupHeader>
+          <UDExListGroupHeader id="keyboard-group-2" label="Second group">
+            <UDExListItem id="keyboard-gamma" label="Gamma" />
+          </UDExListGroupHeader>
+        </UDExList>
+        <button id="after-list" type="button">After list</button>
+      </div>
+    );
+    cy.get("#list-keyboard-fixture").then(UDExFixture => {
+      UDExFixture[0].addEventListener("selection-change", cy.stub().as("selectionChange"));
+    });
+
+    // Native entry is essential: focusing a row directly masks a missing tabindex.
+    UDExHeaderRow().should("exist");
+    cy.get("#before-list").realClick().should("be.focused");
+    cy.realPress("Tab");
+    UDExHeaderRow().should("be.focused");
+  });
+
+  it("Tab reaches the first actual shadow header row with option semantics", () => {
+    cy.get("[udex-list]#keyboard-list").shadow().find("#udex-list")
+      .should("have.attr", "role", "listbox");
+    UDExHeaderRow().should("have.attr", "role", "option");
+    UDExHeaderRow().should("have.attr", "aria-selected", "false");
+    UDExHeaderRow().find("[part=title]").should("have.text", "First group");
+    cy.get("@selectionChange").should("not.have.been.called");
+  });
+
+  it("ArrowDown visits enabled children, skips the disabled child and reaches the next header", () => {
+    cy.realPress("ArrowDown");
+    UDExLeafRow("keyboard-alpha").should("be.focused");
+    cy.realPress("ArrowDown");
+    UDExLeafRow("keyboard-beta").should("be.focused");
+    UDExLeafRow("keyboard-disabled").should("have.attr", "aria-disabled", "true");
+    UDExLeafRow("keyboard-disabled").should("have.attr", "tabindex", "-1");
+    cy.realPress("ArrowDown");
+    UDExHeaderRow("keyboard-group-2").should("be.focused");
+    cy.realPress("ArrowDown");
+    UDExLeafRow("keyboard-gamma").should("be.focused");
+    cy.get("@selectionChange").should("not.have.been.called");
+  });
+
+  it("ArrowUp returns through headers and enabled children while skipping the disabled child", () => {
+    cy.realPress("End");
+    UDExLeafRow("keyboard-gamma").should("be.focused");
+    cy.realPress("ArrowUp");
+    UDExHeaderRow("keyboard-group-2").should("be.focused");
+    cy.realPress("ArrowUp");
+    UDExLeafRow("keyboard-beta").should("be.focused");
+    cy.realPress("ArrowUp");
+    UDExLeafRow("keyboard-alpha").should("be.focused");
+    cy.realPress("ArrowUp");
+    UDExHeaderRow().should("be.focused");
+    cy.get("@selectionChange").should("not.have.been.called");
+  });
+
+  it("Home and End move between the first header and last enabled leaf without selecting", () => {
+    cy.realPress("End");
+    UDExLeafRow("keyboard-gamma").should("be.focused");
+    cy.realPress("Home");
+    UDExHeaderRow().should("be.focused");
+    cy.get("@selectionChange").should("not.have.been.called");
+  });
+
+  it("keeps one roving row tabindex and lets Tab leave the list", () => {
+    UDExAssertRovingTabStop("keyboard-group-1");
+    cy.realPress("End");
+    UDExLeafRow("keyboard-gamma").should("be.focused");
+    UDExAssertRovingTabStop("keyboard-gamma");
+    cy.realPress("Tab");
+    cy.get("#after-list").should("be.focused");
+  });
+
+  (["Space", "Enter"] as const).forEach(UDExKey => {
+    it(`${UDExKey} toggles the focused leaf and bubbles its selection-change event`, () => {
+      cy.realPress("ArrowDown");
+      UDExLeafRow("keyboard-alpha").should("be.focused");
+      cy.realPress(UDExKey);
+      UDExLeafRow("keyboard-alpha").should("have.attr", "aria-selected", "true");
+      UDExLeafRow("keyboard-beta").should("have.attr", "aria-selected", "false");
+      UDExLeafRow("keyboard-disabled").should("have.attr", "aria-selected", "false");
+      cy.get("@selectionChange").should("have.been.calledOnce")
+        .its("firstCall.args.0.detail.item.id").should("equal", "keyboard-alpha");
+
+      cy.realPress(UDExKey);
+      UDExLeafRow("keyboard-alpha").should("have.attr", "aria-selected", "false");
+      UDExLeafRow("keyboard-alpha").should("be.focused");
+      cy.get("@selectionChange").should("have.been.calledTwice")
+        .its("lastCall.args.0.detail.item.id").should("equal", "keyboard-alpha");
+    });
+
+    it(`${UDExKey} toggles only the focused group's enabled children`, () => {
+      cy.realPress(UDExKey);
+      UDExLeafRow("keyboard-alpha").should("have.attr", "aria-selected", "true");
+      UDExLeafRow("keyboard-beta").should("have.attr", "aria-selected", "true");
+      UDExLeafRow("keyboard-disabled").should("have.attr", "aria-selected", "false");
+      UDExLeafRow("keyboard-gamma").should("have.attr", "aria-selected", "false");
+      UDExHeaderRow().should("be.focused");
+
+      cy.realPress(UDExKey);
+      UDExLeafRow("keyboard-alpha").should("have.attr", "aria-selected", "false");
+      UDExLeafRow("keyboard-beta").should("have.attr", "aria-selected", "false");
+      UDExHeaderRow().should("be.focused");
+    });
+  });
+});
+
+describe("List - SingleSelect collapsible header names and ownership", () => {
+  const UDExHeaderRow = (UDExIndex = 0) =>
+    cy.get("[udex-list-group-header]").eq(UDExIndex).shadow()
+      .find(".udex-list__group-content.udex-list__group-header-wrap");
+
+  [false, true].forEach(UDExRichLabel => {
+    ["", "Digital Builders"].forEach(UDExSupportingText => {
+      it(`names a ${UDExRichLabel ? "rich" : "plain"} heading ${UDExSupportingText ? "with" : "without"} supporting text, excluding leaves and the chevron`, () => {
+        cy.mount(
+          <UDExList mode="SingleSelect">
+            <UDExListGroupHeader
+              collapsible
+              label={UDExRichLabel ? "<b>Programming</b> Languages" : "Programming Languages"}
+              supporting-text={UDExSupportingText}>
+              <UDExListItem label="JavaScript" />
+              <UDExListItem label="Python" />
+            </UDExListGroupHeader>
+          </UDExList>
+        );
+
+        UDExHeaderRow().find("#group-heading").should("have.text", "Programming Languages");
+        if (UDExRichLabel) {
+          UDExHeaderRow().find("#group-heading b").should("have.text", "Programming");
+        }
+        if (UDExSupportingText) {
+          UDExHeaderRow().find("#group-supporting-text").should("have.text", UDExSupportingText);
+        } else {
+          UDExHeaderRow().find("#group-supporting-text").should("not.exist");
+        }
+        UDExHeaderRow().find("[udex-button].udex-list__group-heading__icon").should("exist");
+        UDExHeaderRow().should(UDExHeader => {
+          expect(UDExHeader).to.have.attr("role", "treeitem");
+          expect(UDExHeader).to.have.attr("tabindex", "0");
+          expect(UDExHeader).to.have.attr("aria-labelledby", UDExSupportingText
+            ? "group-heading group-supporting-text" : "group-heading");
+          // Resolve the name sources in this shadow root, not via document-global IDs.
+          const UDExShadow = UDExHeader[0].getRootNode() as ShadowRoot;
+          const UDExName = UDExHeader.attr("aria-labelledby")!.split(" ").map(UDExId => {
+            const UDExLabels = UDExShadow.querySelectorAll(`[id="${UDExId}"]`);
+            expect(UDExLabels).to.have.length(1);
+            expect(UDExHeader[0].contains(UDExLabels[0])).to.equal(true);
+            return UDExLabels[0].textContent!.trim();
+          }).join(" ");
+          expect(UDExName).to.equal(
+            ["Programming Languages", UDExSupportingText].filter(Boolean).join(" ")
+          );
+          expect(UDExHeader[0].querySelector(".udex-list__header")!.textContent!
+            .replace(/\s+/g, " ").trim()).to.equal(UDExName);
+          expect(UDExHeader[0].querySelector("slot, [role=group], [udex-list-item]")).to.equal(null);
+          expect(UDExHeader.text()).not.to.contain("JavaScript");
+          expect(UDExHeader.text()).not.to.contain("Python");
+        });
+      });
+    });
+  });
+
+  it("keeps unique same-shadow ownership and leaf focus through keyboard collapse and expansion", () => {
+    cy.mount(
+      <div>
+        <button id="before-owned-list" type="button">Before list</button>
+        <UDExList mode="SingleSelect" accessible-name="Grouped choices">
+          <UDExListGroupHeader collapsible label="First group">
+            <UDExListItem id="owned-leaf" label="Alpha" />
+          </UDExListGroupHeader>
+          <UDExListGroupHeader collapsible collapsed label="Second group">
+            <UDExListItem label="Beta" />
+          </UDExListGroupHeader>
+        </UDExList>
+      </div>
+    );
+
+    UDExHeaderRow().should("have.attr", "aria-expanded", "true");
+    UDExHeaderRow(1).should("have.attr", "aria-expanded", "false");
+    UDExHeaderRow().invoke("attr", "aria-owns").then(UDExFirstId => {
+      UDExHeaderRow(1).invoke("attr", "aria-owns").then(UDExSecondId => {
+        expect(UDExSecondId).to.match(/^\S+$/).and.not.equal(UDExFirstId);
+        const UDExAssertOwnership = () => {
+          cy.get("[udex-list-group-header]").each((UDExHost, UDExIndex) => {
+            cy.wrap(UDExHost).shadow().find(".udex-list__group-content").should(UDExHeader => {
+              const UDExRow = UDExHeader[0];
+              const UDExOwnedId = UDExRow.getAttribute("aria-owns");
+              expect(UDExOwnedId).to.equal([UDExFirstId, UDExSecondId][UDExIndex]);
+              expect(UDExRow.getAttribute("aria-controls")).to.equal(UDExOwnedId);
+              const UDExShadow = UDExHost[0].shadowRoot!;
+              expect(UDExRow.getRootNode()).to.equal(UDExShadow);
+              const UDExGroups = UDExShadow.querySelectorAll(`[id="${UDExOwnedId}"]`);
+              expect(UDExGroups).to.have.length(1);
+              expect(UDExGroups[0].matches(".udex-list__group-list__content[role=group]")).to.equal(true);
+              expect(UDExRow.nextElementSibling).to.equal(UDExGroups[0]);
+              expect(UDExRow.querySelector("slot, [role=group]")).to.equal(null);
+              expect(UDExGroups[0].querySelector("slot")!.assignedElements()).to.have.length(1);
+            });
+          });
+        };
+
+        UDExAssertOwnership();
+        cy.get("#before-owned-list").realClick().should("be.focused");
+        cy.realPress("Tab");
+        UDExHeaderRow().should("be.focused");
+        cy.realPress("ArrowLeft");
+        UDExHeaderRow().should("have.attr", "aria-expanded", "false");
+        UDExHeaderRow().should("be.focused");
+        cy.get("[udex-list-item]#owned-leaf").should("have.attr", "collapsed");
+        UDExAssertOwnership();
+
+        cy.realPress("ArrowDown");
+        UDExHeaderRow(1).should("be.focused");
+        cy.realPress("ArrowUp");
+        UDExHeaderRow().should("be.focused");
+        cy.realPress("ArrowRight");
+        UDExHeaderRow().should("have.attr", "aria-expanded", "true");
+        UDExHeaderRow().should("be.focused");
+        cy.get("[udex-list-item]#owned-leaf").should("not.have.attr", "collapsed");
+        UDExAssertOwnership();
+        cy.realPress("ArrowDown");
+        cy.get("[udex-list-item]#owned-leaf").shadow().find("[part=item]").should("be.focused");
+        cy.realPress("ArrowUp");
+        UDExHeaderRow().should("be.focused");
+      });
+    });
+  });
+
+  it("omits inner ownership and duplicate semantics in SelectBox-style host-ARIA mode", () => {
+    cy.mount(
+      <UDExList mode="SingleSelect">
+        <UDExListGroupHeader collapsible label="Host-owned group" _useHostAriaRole={true}>
+          <UDExListItem label="Alpha" />
+        </UDExListGroupHeader>
+      </UDExList>
+    );
+
+    UDExHeaderRow().should(UDExHeader => {
+      expect(UDExHeader).to.have.attr("role", "presentation");
+      ["aria-owns", "aria-controls", "aria-expanded", "aria-labelledby", "tabindex"].forEach(UDExAttribute => {
+        expect(UDExHeader).not.to.have.attr(UDExAttribute);
+      });
+    });
+    cy.get("[udex-list-group-header]").shadow()
+      .find(".udex-list__group-list > .udex-list__group-list__content[role=group] slot").should("exist");
+  });
+});
+
+describe("List - MultiSelect header host-ARIA Boolean binding regressions", () => {
+  const UDExLayouts = [
+    { name: "noncollapsible", collapsible: false, collapsed: false },
+    { name: "collapsible expanded", collapsible: true, collapsed: false },
+    { name: "collapsible collapsed", collapsible: true, collapsed: true },
+  ];
+
+  UDExLayouts.forEach(UDExLayout => {
+    [false, true].forEach(UDExHostAriaMode => {
+      // Updated: the nested host must remain transparent; only its actual row exposes tree state.
+      it(`${UDExLayout.name}: propagates _useHostAriaRole=${UDExHostAriaMode} to the nested header row`, () => {
+        cy.mount(
+          <div>
+            <button id="before-binding-list" type="button">Before list</button>
+            <UDExList mode="MultiSelect">
+              <UDExListGroupHeader
+                label="Binding group"
+                collapsible={UDExLayout.collapsible}
+                collapsed={UDExLayout.collapsed}
+                _useHostAriaRole={UDExHostAriaMode}>
+                <UDExListItem label="Child" />
+              </UDExListGroupHeader>
+            </UDExList>
+          </div>
+        );
+
+        cy.get("[udex-list-group-header]").should("have.prop", "_useHostAriaRole", UDExHostAriaMode);
+        const UDExNestedHeader = () => cy.get("[udex-list-group-header]").shadow().find("[udex-list-item]#group-heading");
+        UDExNestedHeader().should(UDExHeader => {
+          expect(UDExHeader).to.have.prop("_useHostAriaRole", UDExHostAriaMode);
+          expect(UDExHeader).to.have.attr("role", "none");
+          expect(UDExHeader[0].getAttributeNames().filter(UDExAttribute => UDExAttribute.startsWith("aria-")),
+            "presentational host omits all ARIA naming/state attributes").to.deep.equal([]);
+          // A false Boolean must be absent, never the present attribute string "false".
+          if (UDExHostAriaMode) {
+            expect(UDExHeader).to.have.attr("_use-host-aria-role");
+          } else {
+            expect(UDExHeader).not.to.have.attr("_use-host-aria-role");
+          }
+        });
+        UDExNestedHeader().shadow().find("[part=item]").should(UDExRow => {
+          if (UDExHostAriaMode) {
+            expect(UDExRow).to.have.attr("role", "presentation");
+            ["tabindex", "aria-selected", "aria-checked", "aria-expanded"].forEach(UDExAttribute => {
+              expect(UDExRow).not.to.have.attr(UDExAttribute);
+            });
+          } else {
+            expect(UDExRow).to.have.attr("role", UDExLayout.collapsible ? "treeitem" : "option");
+            expect(UDExRow).to.have.attr("tabindex", "0");
+            if (UDExLayout.collapsible) {
+              expect(UDExRow).to.have.attr("aria-expanded", String(!UDExLayout.collapsed));
+              expect(UDExRow).to.have.attr("aria-checked", "false");
+              expect(UDExRow).not.to.have.attr("aria-selected");
+            } else {
+              expect(UDExRow).not.to.have.attr("aria-expanded");
+            }
+          }
+        });
+
+        if (!UDExHostAriaMode) {
+          cy.get("#before-binding-list").realClick().should("be.focused");
+          cy.realPress("Tab");
+          UDExNestedHeader().shadow().find("[part=item]").should("be.focused");
+        }
+      });
+    });
+  });
+});
+
+describe("List - grouped SingleContent regressions", () => {
+  const UDExGroupedList = (
+    UDExMode: "SingleContent" | "SingleSelect" | "MultiSelect" = "SingleContent",
+    UDExMixed = false
+  ) => (
+    <div id="sc-grouped-fixture">
+      <button id="before-sc-grouped" type="button">Before list</button>
+      <UDExList id="sc-grouped-list" mode={UDExMode} accessible-name="Grouped information">
+        <UDExListGroupHeader id="sc-grouped-expanded" collapsible label="First group" supportingText="Details">
+          <UDExListItem id="sc-grouped-alpha" label="Alpha" />
+        </UDExListGroupHeader>
+        <UDExListGroupHeader id="sc-grouped-second" collapsible={!UDExMixed} collapsed={!UDExMixed} label="Second group">
+          <UDExListItem label="Beta" />
+        </UDExListGroupHeader>
+        {UDExMixed && <UDExListItem label="Ungrouped item" />}
+      </UDExList>
+      <button id="after-sc-grouped" type="button">After list</button>
+    </div>
+  );
+  const UDExInnerList = () => cy.get("#sc-grouped-list").shadow().find("#udex-list");
+  const UDExHeaderRow = () => cy.get("#sc-grouped-expanded").shadow().find(".udex-list__group-content");
+  const UDExSelectionSemantics = [
+    '[role="tree"]', '[role="treeitem"]', '[role="listbox"]', '[role="option"]',
+    "[aria-selected]", "[aria-checked]", "[aria-multiselectable]", "[aria-owns]",
+  ].join(", ");
+
+  const UDExAssertContentList = () => {
+    UDExInnerList().should("have.attr", "role", "list");
+    cy.get("#sc-grouped-list").shadow().find(UDExSelectionSemantics).should("not.exist");
+    cy.get("#sc-grouped-list").find("[udex-list-group-header]").each(UDExGroup => {
+      cy.wrap(UDExGroup).should(UDExHost => {
+        expect(UDExHost).to.have.prop("_treeMode", false);
+        expect(UDExHost).not.to.have.attr("_list-managed-tree-mode");
+      });
+      cy.wrap(UDExGroup).shadow().find(".udex-list__group").should("have.attr", "role", "listitem");
+      cy.wrap(UDExGroup).shadow().find('.udex-list__group[role="listitem"] [role="list"] > slot')
+        .should("have.length", 1).should(UDExSlot => {
+          expect((UDExSlot[0] as HTMLSlotElement).assignedElements())
+            .to.deep.equal(Array.from(UDExGroup[0].children));
+        });
+      cy.wrap(UDExGroup).shadow().find(UDExSelectionSemantics).should("not.exist");
+    });
+    cy.get("#sc-grouped-list").find("[udex-list-item]").each(UDExItem => {
+      cy.wrap(UDExItem).should(UDExHost => {
+        expect(UDExHost).to.have.prop("mode", "SingleContent");
+        expect(UDExHost).to.have.prop("accessibleRole", "");
+        expect(UDExHost).not.to.have.attr("_list-managed-role");
+      });
+      cy.wrap(UDExItem).shadow().find("[part=item]").should("have.attr", "role", "listitem");
+      cy.wrap(UDExItem).shadow().find(UDExSelectionSemantics).should("not.exist");
+    });
+  };
+
+  [false, true].forEach(UDExMixed => {
+    it(`${UDExMixed ? "mixed groups and an ungrouped leaf" : "expanded and collapsed groups"} use nested lists without selection semantics`, () => {
+      cy.mount(UDExGroupedList("SingleContent", UDExMixed));
+      UDExAssertContentList();
+      UDExInnerList().should("have.attr", "aria-label", "Grouped information");
+      UDExHeaderRow().should(UDExHeader => {
+        const UDExRow = UDExHeader[0];
+        const UDExShadow = UDExRow.getRootNode() as ShadowRoot;
+        expect(UDExHeader).to.have.attr("role", "button");
+        expect(UDExHeader).to.have.attr("aria-expanded", "true");
+        expect(UDExHeader).to.have.attr("aria-labelledby", "group-heading group-supporting-text");
+        const UDExLabels = UDExRow.getAttribute("aria-labelledby")!.split(" ")
+          .map(UDExId => UDExShadow.getElementById(UDExId)!.textContent!.trim());
+        expect(UDExLabels.join(" ")).to.equal("First group Details");
+        const UDExContent = UDExShadow.getElementById(UDExRow.getAttribute("aria-controls")!);
+        expect(UDExContent).to.equal(UDExRow.nextElementSibling);
+        expect(UDExContent!.getAttribute("role")).to.equal("list");
+        expect(UDExRow.querySelector("slot, [role=list]")).to.equal(null);
+      });
+      if (!UDExMixed) {
+        cy.get("#sc-grouped-second").shadow().find(".udex-list__group-content")
+          .should("have.attr", "role", "button").and("have.attr", "aria-expanded", "false");
+      }
+    });
+  });
+
+  it("Tab enters the collapse button; Enter, Space and Left/Right toggle it without selecting or losing focus", () => {
+    cy.mount(UDExGroupedList());
+    cy.get("#sc-grouped-fixture").then(UDExFixture => {
+      UDExFixture[0].addEventListener("selection-change", cy.stub().as("scSelectionChange"));
+    });
+    UDExHeaderRow().should("have.attr", "role", "button");
+    cy.get("#before-sc-grouped").realClick().should("be.focused");
+    cy.realPress("Tab");
+    UDExHeaderRow().should("be.focused");
+
+    (["Enter", "Space", "ArrowLeft"] as const).forEach(UDExKey => {
+      cy.realPress(UDExKey);
+      UDExHeaderRow().should("have.attr", "aria-expanded", "false");
+      UDExHeaderRow().should("be.focused");
+      cy.get("#sc-grouped-expanded").should("have.attr", "collapsed");
+      cy.get("#sc-grouped-alpha").should("have.attr", "collapsed");
+      cy.realPress(UDExKey === "ArrowLeft" ? "ArrowRight" : UDExKey);
+      UDExHeaderRow().should("have.attr", "aria-expanded", "true");
+      UDExHeaderRow().should("be.focused");
+      cy.get("#sc-grouped-expanded").should("not.have.attr", "collapsed");
+      cy.get("#sc-grouped-alpha").should("not.have.attr", "collapsed");
+    });
+    cy.realPress("Tab");
+    cy.get("#sc-grouped-second").shadow().find(".udex-list__group-content").should("be.focused");
+    cy.realPress("Tab");
+    cy.get("#after-sc-grouped").should("be.focused");
+    cy.get("@scSelectionChange").should("not.have.been.called");
+    UDExAssertContentList();
+  });
+
+  (["SingleSelect", "MultiSelect"] as const).forEach(UDExMode => {
+    it(`${UDExMode} -> SingleContent -> ${UDExMode} clears List-owned tree semantics and rebuilds them`, () => {
+      cy.mount(UDExGroupedList(UDExMode));
+      const UDExAssertSelectionTree = () => {
+        UDExInnerList().should("have.attr", "role", "tree");
+        cy.get("#sc-grouped-list").find("[udex-list-group-header]").each(UDExGroup => {
+          cy.wrap(UDExGroup).should(UDExHost => {
+            expect(UDExHost).to.have.prop("_treeMode", true);
+            expect(UDExHost).to.have.attr("_list-managed-tree-mode");
+          });
+          cy.wrap(UDExGroup).shadow().find(".udex-list__group").should("have.attr", "role", "none");
+          cy.wrap(UDExGroup).shadow().find('[role="group"] > slot').should("have.length", 1);
+          if (UDExMode === "MultiSelect") {
+            cy.wrap(UDExGroup).shadow().find("[udex-list-item]#group-heading").shadow()
+              .find("[part=item]").should("have.attr", "role", "treeitem");
+          } else {
+            cy.wrap(UDExGroup).shadow().find(".udex-list__group-content").should("have.attr", "role", "treeitem");
+          }
+        });
+        cy.get("#sc-grouped-list").find("[udex-list-item]").each(UDExItem => {
+          cy.wrap(UDExItem).should(UDExHost => {
+            expect(UDExHost).to.have.prop("accessibleRole", "treeitem");
+            expect(UDExHost).to.have.attr("_list-managed-role");
+          });
+          cy.wrap(UDExItem).shadow().find("[part=item]").should("have.attr", "role", "treeitem")
+            .and("have.attr", UDExMode === "MultiSelect" ? "aria-checked" : "aria-selected", "false");
+        });
+      };
+      UDExAssertSelectionTree();
+      cy.get("#sc-grouped-list").invoke("prop", "mode", "SingleContent");
+      UDExAssertContentList();
+      UDExHeaderRow().should("have.attr", "role", "button");
+      cy.get("#sc-grouped-list").invoke("prop", "mode", UDExMode);
+      UDExAssertSelectionTree();
+    });
+  });
+
+  it("clears List-owned tree modes when the last collapsible group is removed", () => {
+    cy.mount(UDExGroupedList("MultiSelect", true));
+    UDExInnerList().should("have.attr", "role", "tree");
+    cy.get("#sc-grouped-list").find("[udex-list-group-header]")
+      .should("have.length", 2).each(UDExGroup => {
+        cy.wrap(UDExGroup).should("have.attr", "_list-managed-tree-mode");
+      });
+    cy.get("#sc-grouped-expanded").invoke("prop", "collapsible", false).should("not.have.attr", "collapsible");
+    // Re-render the List after changing its slotted group's configuration.
+    cy.get("#sc-grouped-list").invoke("prop", "accessibleName", "Updated grouped information");
+    UDExInnerList().should("have.attr", "role", "listbox");
+    UDExInnerList().should("have.attr", "aria-multiselectable", "true");
+    cy.get("#sc-grouped-list").find("[udex-list-group-header]").each(UDExGroup => {
+      cy.wrap(UDExGroup).should(UDExHost => {
+        expect(UDExHost).to.have.prop("_treeMode", false);
+        expect(UDExHost).not.to.have.attr("_list-managed-tree-mode");
+      });
+      cy.wrap(UDExGroup).shadow().find("[udex-list-item]#group-heading").shadow()
+        .find("[part=item]").should("have.attr", "role", "option");
+    });
+    cy.get("#sc-grouped-list").find("[udex-list-item]").each(UDExItem => {
+      cy.wrap(UDExItem).should("not.have.attr", "_list-managed-role");
+      cy.wrap(UDExItem).should("have.prop", "accessibleRole", "");
+      cy.wrap(UDExItem).shadow().find("[part=item]").should("have.attr", "role", "option");
+    });
+  });
+
+  it("preserves externally supplied tree mode and host-owned roles in SingleContent", () => {
+    cy.mount(
+      <UDExList id="sc-host-tree" mode="SingleContent" role="tree" accessibleRole="">
+        <UDExListGroupHeader collapsible label="Host-owned group" role="treeitem" aria-label="Host-owned group"
+          aria-expanded="true" _treeMode={true} _useHostAriaRole={true}>
+          <UDExListItem label="Alpha" role="treeitem" accessibleRole="treeitem" _useHostAriaRole={true} />
+        </UDExListGroupHeader>
+      </UDExList>
+    );
+    cy.get("#sc-host-tree").should("have.attr", "role", "tree");
+    cy.get("#sc-host-tree").shadow().find("#udex-list").should("have.attr", "role", "none");
+    cy.get("#sc-host-tree").find("[udex-list-group-header]").should(UDExGroup => {
+      expect(UDExGroup).to.have.prop("_treeMode", true);
+      expect(UDExGroup).to.have.prop("_useHostAriaRole", true);
+      expect(UDExGroup).to.have.attr("role", "treeitem");
+      expect(UDExGroup).to.have.attr("aria-expanded", "true");
+      expect(UDExGroup).not.to.have.attr("_list-managed-tree-mode");
+    }).shadow().find(".udex-list__group-content").should(UDExHeader => {
+      expect(UDExHeader).to.have.attr("role", "presentation");
+      ["tabindex", "aria-expanded", "aria-controls", "aria-labelledby", "aria-owns"].forEach(UDExAttribute => {
+        expect(UDExHeader).not.to.have.attr(UDExAttribute);
+      });
+    });
+    cy.get("#sc-host-tree").find("[udex-list-group-header]").shadow()
+      .find('.udex-list__group[role="presentation"] [role="group"] > slot').should("have.length", 1);
+    cy.get("#sc-host-tree").find("[udex-list-item]").should(UDExItem => {
+      expect(UDExItem).to.have.attr("role", "treeitem");
+      expect(UDExItem).to.have.prop("accessibleRole", "treeitem");
+      expect(UDExItem).to.have.prop("_useHostAriaRole", true);
+      expect(UDExItem).not.to.have.attr("_list-managed-role");
+    }).shadow().find("[part=item]").should("have.attr", "role", "presentation");
+  });
+});