@spectrum-web-components/picker 0.15.3-overlay.17 → 0.30.0

package/test/index.js

@@ -1,6 +1,5 @@
 "use strict";
 import {
-  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -28,19 +27,18 @@ import {
 import { iconsOnly } from "../stories/picker.stories.js";
 import { sendMouse } from "../../../test/plugins/browser.js";
 import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
-import "@spectrum-web-components/theme/sp-theme.js";
-import "@spectrum-web-components/theme/src/themes.js";
+import { isWebKit } from "@spectrum-web-components/shared/src/platform.js";
 ignoreResizeObserverLoopError(before, after);
-const isMenuActiveElement = function(el) {
+const isMenuActiveElement = function() {
   var _a;
-  return ((_a = el.shadowRoot.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
+  return ((_a = document.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
 };
 export function runPickerTests() {
   let el;
   const pickerFixture = async () => {
     const test = await fixture(
       html`
-                <sp-theme scale="medium" color="light">
+                <div>
                     <sp-field-label for="picker">
                         Where do you live?
                     </sp-field-label>
@@ -58,7 +56,7 @@ export function runPickerTests() {
                         <sp-menu-item>Save Selection</sp-menu-item>
                         <sp-menu-item disabled>Make Work Path</sp-menu-item>
                     </sp-picker>
-                </sp-theme>
+                </div>
             `
     );
     return test.querySelector("sp-picker");
@@ -68,6 +66,13 @@ export function runPickerTests() {
       el = await pickerFixture();
       await elementUpdated(el);
     });
+    afterEach(async () => {
+      if (el.open) {
+        const closed = oneEvent(el, "sp-closed");
+        el.open = false;
+        await closed;
+      }
+    });
     it("loads accessibly", async () => {
       await expect(el).to.be.accessible();
     });
@@ -76,7 +81,7 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       expect(el.open).to.be.true;
-      const accessibleCloseButton = el.shadowRoot.querySelector(
+      const accessibleCloseButton = document.querySelector(
         ".visually-hidden button"
       );
       const closed = oneEvent(el, "sp-closed");
@@ -85,13 +90,10 @@ export function runPickerTests() {
       expect(el.open).to.be.false;
     });
     it("accepts new selected item content", async () => {
-      await nextFrame();
-      await nextFrame();
       const option2 = el.querySelector('[value="option-2"');
       el.value = "option-2";
       await elementUpdated(option2);
       await elementUpdated(el);
-      await aTimeout(150);
       expect(el.value).to.equal("option-2");
       expect((el.button.textContent || "").trim()).to.equal(
         "Select Inverse"
@@ -112,11 +114,9 @@ export function runPickerTests() {
       expect((el.button.textContent || "").trim()).to.equal(newLabel2);
     });
     it("accepts new selected item content when open", async () => {
-      await nextFrame();
       const option2 = el.querySelector('[value="option-2"');
       el.value = "option-2";
       await elementUpdated(el);
-      await aTimeout(150);
       expect(el.value).to.equal("option-2");
       expect((el.button.textContent || "").trim()).to.equal(
         "Select Inverse"
@@ -137,10 +137,8 @@ export function runPickerTests() {
       );
     });
     it("unsets value when children removed", async () => {
-      await nextFrame();
       el.value = "option-2";
       await elementUpdated(el);
-      await aTimeout(150);
       expect(el.value).to.equal("option-2");
       expect((el.button.textContent || "").trim()).to.equal(
         "Select Inverse"
@@ -154,14 +152,8 @@ export function runPickerTests() {
       });
       await Promise.all(removals);
       await elementUpdated(el);
-      await nextFrame();
-      await aTimeout(150);
-      expect(el.optionsMenu.childItems.length).to.equal(0);
-      if ("showPopover" in document.createElement("div")) {
-        return;
-      }
-      expect((el.button.textContent || "").trim()).to.equal("");
       expect(el.value).to.equal("");
+      expect((el.button.textContent || "").trim()).to.equal("");
     });
     it("accepts a new item and value at the same time", async () => {
       el.value = "option-2";
@@ -184,7 +176,7 @@ export function runPickerTests() {
       item.value = "option-new";
       item.textContent = "New Option";
       el.append(item);
-      await nextFrame();
+      await elementUpdated(item);
       await elementUpdated(el);
       let opened = oneEvent(el, "sp-opened");
       el.open = true;
@@ -202,7 +194,6 @@ export function runPickerTests() {
       expect(el.value, "second time").to.equal("option-new");
     });
     it('manages its "name" value in the accessibility tree', async () => {
-      await nextFrame();
       let snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -213,8 +204,6 @@ export function runPickerTests() {
       ).to.not.be.null;
       el.value = "option-2";
       await elementUpdated(el);
-      await nextFrame();
-      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -251,7 +240,6 @@ export function runPickerTests() {
       await expect(el).to.be.accessible();
     });
     it("opens with visible focus on a menu item on `DownArrow`", async () => {
-      var _a, _b;
       const firstItem = el.querySelector("sp-menu-item");
       await elementUpdated(el);
       expect(firstItem.focused, "should not visually focused").to.be.false;
@@ -270,24 +258,12 @@ export function runPickerTests() {
       });
       await closed;
       expect(el.open).to.be.false;
-      expect(
-        document.activeElement === el,
-        `focused ${(_a = document.activeElement) == null ? void 0 : _a.localName} instead of back on Picker`
-      ).to.be.true;
-      expect(
-        el.shadowRoot.activeElement === el.button,
-        `focused ${(_b = el.shadowRoot.activeElement) == null ? void 0 : _b.localName} instead of back on button`
-      ).to.be.true;
-      await waitUntil(
-        () => !firstItem.focused,
-        "finally, not visually focused"
-      );
+      await waitUntil(() => !firstItem.focused, "not visually focused");
     });
-    it("opens, on click, without visible focus on a menu item", async () => {
-      await nextFrame();
-      await nextFrame();
+    it("opens without visible focus on a menu item on click", async () => {
       const firstItem = el.querySelector("sp-menu-item");
-      const boundingRect = el.button.getBoundingClientRect();
+      await elementUpdated(el);
+      const boundingRect = el.getBoundingClientRect();
       expect(firstItem.focused, "not visually focused").to.be.false;
       const opened = oneEvent(el, "sp-opened");
       sendMouse({
@@ -302,6 +278,7 @@ export function runPickerTests() {
         ]
       });
       await opened;
+      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect(firstItem.focused, "still not visually focused").to.be.false;
     });
@@ -320,15 +297,11 @@ export function runPickerTests() {
       document.body.append(other);
       await elementUpdated(el);
       expect(el.open).to.be.false;
-      const opened = oneEvent(el, "sp-opened");
       el.click();
-      await opened;
       await elementUpdated(el);
       expect(el.open).to.be.true;
-      const closed = oneEvent(el, "sp-closed");
       other.click();
-      closed;
-      await elementUpdated(el);
+      await waitUntil(() => !el.open, "closed");
       other.remove();
     });
     it("selects", async () => {
@@ -340,6 +313,7 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       button.click();
       await opened;
+      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
@@ -359,27 +333,31 @@ export function runPickerTests() {
         "sp-menu-item:nth-of-type(2)"
       );
       const button = el.button;
-      let opened = oneEvent(el, "sp-opened");
+      const opened = oneEvent(el, "sp-opened");
       button.click();
       await opened;
+      await nextFrame();
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
-      let closed = oneEvent(el, "sp-closed");
+      const closed = oneEvent(el, "sp-closed");
       secondItem.click();
       await closed;
+      await nextFrame();
       expect(el.open).to.be.false;
       expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
       expect(el.value).to.equal("option-2");
-      opened = oneEvent(el, "sp-opened");
+      const opened2 = oneEvent(el, "sp-opened");
       button.click();
-      await opened;
+      await opened2;
+      await nextFrame();
       expect(el.open).to.be.true;
       expect((_c = el.selectedItem) == null ? void 0 : _c.itemText).to.equal("Select Inverse");
       expect(el.value).to.equal("option-2");
-      closed = oneEvent(el, "sp-closed");
+      const closed2 = oneEvent(el, "sp-closed");
       firstItem.click();
-      await closed;
+      await closed2;
+      await nextFrame();
       expect(el.open).to.be.false;
       expect((_d = el.selectedItem) == null ? void 0 : _d.itemText).to.equal("Deselect");
       expect(el.value).to.equal("Deselect");
@@ -387,6 +365,7 @@ export function runPickerTests() {
     it("dispatches bubbling and composed events", async () => {
       const changeSpy = spy();
       const parent = el.parentElement;
+      parent.attachShadow({ mode: "open" });
       parent.shadowRoot.append(el);
       const secondItem = el.querySelector(
         "sp-menu-item:nth-of-type(2)"
@@ -396,9 +375,11 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
+      await elementUpdated(el);
       const closed = oneEvent(el, "sp-closed");
       secondItem.click();
       await closed;
+      await elementUpdated(el);
       expect(el.value).to.equal(secondItem.value);
       expect(changeSpy.calledOnce).to.be.true;
     });
@@ -409,9 +390,10 @@ export function runPickerTests() {
         "sp-menu-item:nth-of-type(2)"
       );
       const button = el.button;
-      const opened = oneEvent(el, "sp-opened");
+      let opened = oneEvent(el, "sp-opened");
       button.click();
       await opened;
+      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
@@ -420,12 +402,14 @@ export function runPickerTests() {
         event.preventDefault();
         preventChangeSpy();
       });
+      const closed = oneEvent(el, "sp-closed");
+      opened = oneEvent(el, "sp-opened");
       secondItem.click();
-      await nextFrame();
-      await nextFrame();
+      await closed;
+      await opened;
+      await elementUpdated(el);
       expect(preventChangeSpy.calledOnce).to.be.true;
       expect(secondItem.selected, "selection prevented").to.be.false;
-      expect(el.open).to.be.true;
     });
     it("can throw focus after `change`", async () => {
       var _a;
@@ -468,15 +452,20 @@ export function runPickerTests() {
       button.dispatchEvent(tEvent());
       await elementUpdated(el);
       expect(el.open, "still closed").to.be.false;
-      const opened = oneEvent(el, "sp-opened");
       button.dispatchEvent(arrowUpEvent());
       await elementUpdated(el);
       expect(el.open, "open by ArrowUp").to.be.true;
-      await opened;
-      const closed = oneEvent(el, "sp-closed");
+      await waitUntil(
+        () => document.querySelector("active-overlay") !== null,
+        "an active-overlay has been inserted on the page"
+      );
       button.dispatchEvent(escapeEvent());
-      await closed;
-      expect(el.open).to.be.false;
+      await elementUpdated(el);
+      await waitUntil(() => el.open === false, "closed by Escape");
+      await waitUntil(
+        () => document.querySelector("active-overlay") === null,
+        "an active-overlay has been inserted on the page"
+      );
     });
     it("opens on ArrowDown", async () => {
       var _a, _b;
@@ -490,18 +479,19 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       button.dispatchEvent(arrowDownEvent());
       await opened;
+      await elementUpdated(el);
       expect(el.open, "open by ArrowDown").to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
       const closed = oneEvent(el, "sp-closed");
       firstItem.click();
       await closed;
+      await elementUpdated(el);
       expect(el.open).to.be.false;
       expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Deselect");
       expect(el.value).to.equal("Deselect");
     });
     it("quick selects on ArrowLeft/Right", async () => {
-      await nextFrame();
       const selectionSpy = spy();
       el.addEventListener("change", (event) => {
         const { value } = event.target;
@@ -529,7 +519,6 @@ export function runPickerTests() {
       expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
     });
     it("quick selects first item on ArrowRight when no value", async () => {
-      await nextFrame();
       const selectionSpy = spy();
       el.addEventListener("change", (event) => {
         const { value } = event.target;
@@ -547,10 +536,6 @@ export function runPickerTests() {
     });
     it("refocuses on list when open", async () => {
       const firstItem = el.querySelector("sp-menu-item");
-      const thirdItem = el.querySelector(
-        "sp-menu-item:nth-of-type(3)"
-      );
-      const button = el.button;
       const input = document.createElement("input");
       el.insertAdjacentElement("afterend", input);
       el.focus();
@@ -558,41 +543,44 @@ export function runPickerTests() {
       expect(document.activeElement === input).to.be.true;
       await sendKeys({ press: "Shift+Tab" });
       expect(document.activeElement === el).to.be.true;
+      await sendKeys({ press: "Enter" });
       const opened = oneEvent(el, "sp-opened");
-      sendKeys({ press: "Enter" });
+      el.open = true;
       await opened;
       await elementUpdated(el);
       await waitUntil(
         () => firstItem.focused,
         "The first items should have become focused visually."
       );
-      await sendKeys({ press: "ArrowDown" });
-      await sendKeys({ press: "ArrowDown" });
-      expect(thirdItem.focused).to.be.true;
-      button.focus();
-      expect(isMenuActiveElement(el)).to.be.false;
+      el.blur();
+      await elementUpdated(el);
+      expect(el.open).to.be.true;
       el.focus();
       await elementUpdated(el);
       await waitUntil(
-        () => isMenuActiveElement(el),
+        () => isMenuActiveElement(),
         "first item refocused"
       );
-      expect(isMenuActiveElement(el)).to.be.true;
-      expect(thirdItem.focused).to.be.true;
+      expect(el.open).to.be.true;
+      expect(isMenuActiveElement()).to.be.true;
+      await sendKeys({ press: "ArrowDown" });
+      await sendKeys({ press: "ArrowUp" });
+      expect(firstItem.focused).to.be.true;
     });
-    it("allows tabing to close", async () => {
-      const input = document.createElement("input");
-      el.insertAdjacentElement("afterend", input);
-      const opened = oneEvent(el, "sp-opened");
+    it("does not allow tabing to close", async () => {
       el.open = true;
-      await opened;
-      await nextFrame();
+      await elementUpdated(el);
       expect(el.open).to.be.true;
       el.focus();
-      const closed = oneEvent(el, "sp-closed");
-      sendKeys({ press: "Tab" });
-      await closed;
-      expect(el.open, "closes").to.be.false;
+      await elementUpdated(el);
+      await waitUntil(
+        () => isMenuActiveElement(),
+        "first item refocused"
+      );
+      expect(el.open).to.be.true;
+      expect(isMenuActiveElement()).to.be.true;
+      await sendKeys({ press: "Tab" });
+      expect(el.open, "stays open").to.be.true;
     });
     describe("tab order", () => {
       let input1;
@@ -647,7 +635,51 @@ export function runPickerTests() {
           input1
         );
       });
-      xit("can close and immediate tab to the next tab stop", async () => {
+      it('traps tab in the menu as a `type="modal"` overlay forward', async () => {
+        el.focus();
+        await nextFrame();
+        expect(document.activeElement, "focuses el").to.equal(el);
+        const opened = oneEvent(el, "sp-opened");
+        sendKeys({ press: "ArrowDown" });
+        await opened;
+        expect(el.open, "opened").to.be.true;
+        await waitUntil(
+          () => isMenuActiveElement(),
+          "first item focused"
+        );
+        const activeElement = document.activeElement;
+        if (!isWebKit()) {
+          const blured = oneEvent(activeElement, "blur");
+          sendKeys({ press: "Tab" });
+          await blured;
+          expect(el.open, "picker still open").to.be.true;
+          expect(document.activeElement === input1).to.be.false;
+          expect(document.activeElement === input2).to.be.false;
+        }
+      });
+      it('traps tab in the menu as a `type="modal"` overlay backwards', async () => {
+        el.focus();
+        await nextFrame();
+        expect(document.activeElement, "focuses el").to.equal(el);
+        const opened = oneEvent(el, "sp-opened");
+        await sendKeys({ press: "ArrowDown" });
+        await opened;
+        expect(el.open, "opened").to.be.true;
+        await waitUntil(
+          () => isMenuActiveElement(),
+          "first item focused"
+        );
+        const activeElement = document.activeElement;
+        if (!isWebKit()) {
+          const blured = oneEvent(activeElement, "blur");
+          sendKeys({ press: "Shift+Tab" });
+          await blured;
+          expect(el.open, "picker still open").to.be.true;
+          expect(document.activeElement === input1).to.be.false;
+          expect(document.activeElement === input2).to.be.false;
+        }
+      });
+      it("can close and immediate tab to the next tab stop", async () => {
         el.focus();
         await nextFrame();
         expect(document.activeElement, "focuses el").to.equal(el);
@@ -656,7 +688,7 @@ export function runPickerTests() {
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(el),
+          () => isMenuActiveElement(),
           "first item focused"
         );
         const closed = oneEvent(el, "sp-closed");
@@ -673,13 +705,13 @@ export function runPickerTests() {
       it("can close and immediate shift+tab to the previous tab stop", async () => {
         el.focus();
         await nextFrame();
-        expect(document.activeElement === el, "focuses el").to.be.true;
+        expect(document.activeElement, "focuses el").to.equal(el);
         const opened = oneEvent(el, "sp-opened");
         await sendKeys({ press: "ArrowUp" });
         await opened;
         expect(el.open, "opened").to.be.true;
         await waitUntil(
-          () => isMenuActiveElement(el),
+          () => isMenuActiveElement(),
           "first item focused"
         );
         const closed = oneEvent(el, "sp-closed");
@@ -688,7 +720,7 @@ export function runPickerTests() {
         expect(el.open).to.be.false;
         expect(document.activeElement === el).to.be.true;
         const focused = oneEvent(input1, "focus");
-        sendKeys({ press: "Shift+Tab" });
+        await sendKeys({ press: "Shift+Tab" });
         await focused;
         expect(el.open).to.be.false;
         expect(document.activeElement === input1).to.be.true;
@@ -703,7 +735,8 @@ export function runPickerTests() {
       expect(el.open).to.be.false;
     });
     it("scrolls selected into view on open", async () => {
-      el.shadowRoot.querySelector("sp-popover").style.height = "40px";
+      await el.generatePopover();
+      el.popoverEl.style.height = "40px";
       const firstItem = el.querySelector(
         "sp-menu-item:first-child"
       );
@@ -713,15 +746,11 @@ export function runPickerTests() {
       lastItem.disabled = false;
       el.value = lastItem.value;
       await elementUpdated(el);
-      const opened = oneEvent(el, "sp-opened");
       el.open = true;
-      await opened;
-      await waitUntil(
-        () => isMenuActiveElement(el),
-        "first item focused"
-      );
+      await elementUpdated(el);
+      await waitUntil(() => isMenuActiveElement(), "first item focused");
       const getParentOffset = (el2) => {
-        const parentScroll = el2.assignedSlot.parentElement.scrollTop;
+        const parentScroll = el2.parentElement.scrollTop;
         const parentOffset = el2.offsetTop - parentScroll;
         return parentOffset;
       };
@@ -730,9 +759,7 @@ export function runPickerTests() {
       lastItem.dispatchEvent(
         new FocusEvent("focusin", { bubbles: true })
       );
-      await sendKeys({
-        press: "ArrowDown"
-      });
+      lastItem.dispatchEvent(arrowDownEvent());
       await elementUpdated(el);
       await nextFrame();
       expect(getParentOffset(lastItem)).to.be.greaterThan(40);
@@ -770,8 +797,6 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await groupedFixture();
       await elementUpdated(el);
-      await nextFrame();
-      await nextFrame();
     });
     it("selects the item with a matching value in a group", async () => {
       const item = el.querySelector("#should-be-selected");
@@ -809,7 +834,6 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await pickerFixture2();
       await elementUpdated(el);
-      await nextFrame();
     });
     afterEach(async () => {
       if (el.open) {
@@ -895,7 +919,6 @@ export function runPickerTests() {
       beforeEach(async () => {
         el = await pickerFixture2();
         await elementUpdated(el);
-        await nextFrame();
       });
       afterEach(async () => {
         if (el.open) {
@@ -912,6 +935,7 @@ export function runPickerTests() {
         const opened = oneEvent(el, "sp-opened");
         el.button.click();
         await opened;
+        await elementUpdated(el);
         expect(el.open).to.be.true;
         expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
         expect(el.value).to.equal("");
@@ -931,7 +955,6 @@ export function runPickerTests() {
         `);
     const el2 = test.querySelector("sp-picker");
     await elementUpdated(el2);
-    await nextFrame();
     let snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -942,9 +965,6 @@ export function runPickerTests() {
     ).to.not.be.null;
     el2.value = "2";
     await elementUpdated(el2);
-    await nextFrame();
-    await nextFrame();
-    expect(el2.value).to.equal("2");
     snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -954,11 +974,9 @@ export function runPickerTests() {
       "`name` is the label text plus the selected item text"
     ).to.not.be.null;
   });
-  it.skip("toggles between pickers", async () => {
+  it("toggles between pickers", async () => {
     const el2 = await pickerFixture();
     const el1 = await pickerFixture();
-    el1.parentElement.style.float = "left";
-    el2.parentElement.style.float = "left";
     el1.id = "away";
     el2.id = "other";
     await Promise.all([elementUpdated(el1), elementUpdated(el2)]);
@@ -979,8 +997,8 @@ export function runPickerTests() {
     closed = oneEvent(el2, "sp-closed");
     el1.click();
     await Promise.all([open, closed]);
-    expect(el2.open).to.be.false;
     expect(el1.open).to.be.true;
+    expect(el2.open).to.be.false;
     closed = oneEvent(el1, "sp-closed");
     sendKeys({
       press: "Escape"
@@ -989,7 +1007,7 @@ export function runPickerTests() {
     expect(el1.open).to.be.false;
   });
   it("displays selected item text by default", async () => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const el2 = await fixture(
       html`
                 <sp-picker
@@ -1006,7 +1024,6 @@ export function runPickerTests() {
                 </sp-picker>
             `
     );
-    await nextFrame();
     await elementUpdated(el2);
     await waitUntil(
       () => {
@@ -1032,14 +1049,11 @@ export function runPickerTests() {
     const opened = oneEvent(el2, "sp-opened");
     sendKeys({ press: "Enter" });
     await opened;
+    await elementUpdated(el2.optionsMenu);
     expect(
-      el2 === document.activeElement,
+      el2.optionsMenu === document.activeElement,
       `activeElement is ${(_d = document.activeElement) == null ? void 0 : _d.localName}`
     ).to.be.true;
-    expect(
-      el2.optionsMenu === el2.shadowRoot.activeElement,
-      `activeElement is ${(_e = el2.shadowRoot.activeElement) == null ? void 0 : _e.localName}`
-    ).to.be.true;
     expect(firstItem.focused, 'firstItem NOT "focused"').to.be.false;
     expect(secondItem.focused, 'secondItem "focused"').to.be.true;
     expect(el2.optionsMenu.getAttribute("aria-activedescendant")).to.equal(
@@ -1126,11 +1140,15 @@ export function runPickerTests() {
     await elementUpdated(el2);
     expect(openedSpy.calledOnce).to.be.true;
     expect(closedSpy.calledOnce).to.be.false;
+    const openedEvent = openedSpy.args[0][0];
+    expect(openedEvent.detail.interaction).to.equal("modal");
     const closed = oneEvent(el2, "sp-closed");
     el2.open = false;
     await closed;
     await elementUpdated(el2);
     expect(closedSpy.calledOnce).to.be.true;
+    const closedEvent = closedSpy.args[0][0];
+    expect(closedEvent.detail.interaction).to.equal("modal");
   });
 }
 //# sourceMappingURL=index.js.map