@spectrum-web-components/picker 0.35.1-rc.43 → 0.36.0

package/test/index.js

@@ -1,6 +1,5 @@
 "use strict";
 import {
-  aTimeout,
   elementUpdated,
   expect,
   fixture,
@@ -16,6 +15,7 @@ import {
   arrowLeftEvent,
   arrowRightEvent,
   arrowUpEvent,
+  escapeEvent,
   testForLitDevWarnings,
   tEvent
 } from "../../../test/testing-helpers.js";
@@ -32,20 +32,21 @@ import {
 } from "../stories/picker.stories.js";
 import { sendMouse } from "../../../test/plugins/browser.js";
 import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
-import { isFirefox } from "@spectrum-web-components/shared/src/platform.js";
-import "@spectrum-web-components/theme/sp-theme.js";
-import "@spectrum-web-components/theme/src/themes.js";
+import {
+  isFirefox,
+  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>
@@ -63,7 +64,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");
@@ -90,8 +91,6 @@ export function runPickerTests() {
       ).to.not.be.null;
       el2.value = "option-2";
       await elementUpdated(el2);
-      await nextFrame();
-      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -122,8 +121,6 @@ export function runPickerTests() {
       ).to.not.be.null;
       el2.value = "option-2";
       await elementUpdated(el2);
-      await nextFrame();
-      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -154,8 +151,6 @@ export function runPickerTests() {
       ).to.not.be.null;
       el2.value = "option-2";
       await elementUpdated(el2);
-      await nextFrame();
-      await nextFrame();
       snapshot = await a11ySnapshot({});
       if (isFirefox()) {
         expect(
@@ -181,6 +176,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();
     });
@@ -192,7 +194,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"
       );
       expect(accessibleCloseButton).to.have.attribute(
@@ -208,13 +210,10 @@ export function runPickerTests() {
       expect(document.activeElement).to.eq(el);
     });
     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.include(
         "Select Inverse"
@@ -235,11 +234,9 @@ export function runPickerTests() {
       expect((el.button.textContent || "").trim()).to.include(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.include(
         "Select Inverse"
@@ -260,27 +257,21 @@ 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.include(
         "Select Inverse"
       );
       const items = el.querySelectorAll("sp-menu-item");
+      const removals = [];
       items.forEach((item) => {
+        const removal = oneEvent(el, "sp-menu-item-removed");
         item.remove();
+        removals.push(removal);
       });
+      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.value).to.equal("");
       expect((el.button.textContent || "").trim()).to.not.include(
         "Select Inverse"
@@ -307,7 +298,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;
@@ -325,7 +316,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(
@@ -336,8 +326,6 @@ export function runPickerTests() {
       ).to.not.be.null;
       el.value = "option-2";
       await elementUpdated(el);
-      await nextFrame();
-      await nextFrame();
       snapshot = await a11ySnapshot({});
       expect(
         findAccessibilityNode(
@@ -354,16 +342,12 @@ export function runPickerTests() {
       el.open = true;
       await opened;
       expect(
-        el.optionsMenu.getAttribute(
-          "aria-activedescendant"
-        )
+        el.optionsMenu.getAttribute("aria-activedescendant")
       ).to.equal(firstItem == null ? void 0 : firstItem.id);
       await sendKeys({ press: "ArrowDown" });
       await elementUpdated(el);
       expect(
-        el.optionsMenu.getAttribute(
-          "aria-activedescendant"
-        )
+        el.optionsMenu.getAttribute("aria-activedescendant")
       ).to.equal(secondItem == null ? void 0 : secondItem.id);
     });
     it("renders invalid accessibly", async () => {
@@ -378,7 +362,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;
@@ -397,24 +380,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({
@@ -429,69 +400,10 @@ export function runPickerTests() {
         ]
       });
       await opened;
+      await elementUpdated(el);
       expect(el.open).to.be.true;
       expect(firstItem.focused, "still not visually focused").to.be.false;
     });
-    it("opens/closes multiple times", async () => {
-      expect(el.open).to.be.false;
-      const boundingRect = el.button.getBoundingClientRect();
-      let opened = oneEvent(el, "sp-opened");
-      sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [
-              boundingRect.x + boundingRect.width / 2,
-              boundingRect.y + boundingRect.height / 2
-            ]
-          }
-        ]
-      });
-      await opened;
-      expect(el.open).to.be.true;
-      let closed = oneEvent(el, "sp-closed");
-      sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [
-              boundingRect.x + boundingRect.width / 2,
-              boundingRect.y + boundingRect.height / 2
-            ]
-          }
-        ]
-      });
-      await closed;
-      expect(el.open).to.be.false;
-      opened = oneEvent(el, "sp-opened");
-      sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [
-              boundingRect.x + boundingRect.width / 2,
-              boundingRect.y + boundingRect.height / 2
-            ]
-          }
-        ]
-      });
-      await opened;
-      expect(el.open).to.be.true;
-      closed = oneEvent(el, "sp-closed");
-      sendMouse({
-        steps: [
-          {
-            type: "click",
-            position: [
-              boundingRect.x + boundingRect.width / 2,
-              boundingRect.y + boundingRect.height / 2
-            ]
-          }
-        ]
-      });
-      await closed;
-      expect(el.open).to.be.false;
-    });
     it("closes when becoming disabled", async () => {
       expect(el.open).to.be.false;
       el.click();
@@ -507,15 +419,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 () => {
@@ -527,6 +435,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("");
@@ -546,27 +455,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");
@@ -574,6 +487,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)"
@@ -583,9 +497,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;
     });
@@ -596,9 +512,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("");
@@ -607,12 +524,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;
@@ -655,17 +574,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");
-      sendKeys({
-        press: "Escape"
-      });
-      await closed;
-      expect(el.open).to.be.false;
+      await waitUntil(
+        () => document.querySelector("active-overlay") !== null,
+        "an active-overlay has been inserted on the page"
+      );
+      button.dispatchEvent(escapeEvent());
+      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;
@@ -679,18 +601,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;
@@ -718,7 +641,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;
@@ -736,10 +658,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();
@@ -747,79 +665,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;
-    });
-    it("does not listen to streaming `Enter` keydown", async () => {
-      const openSpy = spy();
-      const closedSpy = spy();
-      el.addEventListener("sp-opened", () => openSpy());
-      el.addEventListener("sp-closed", () => closedSpy());
-      const firstItem = el.querySelector("sp-menu-item");
-      const thirdItem = el.querySelector(
-        "sp-menu-item:nth-of-type(3)"
-      );
-      const input = document.createElement("input");
-      el.insertAdjacentElement("afterend", input);
-      el.focus();
-      await sendKeys({ press: "Tab" });
-      expect(document.activeElement === input).to.be.true;
-      await sendKeys({ press: "Shift+Tab" });
-      expect(document.activeElement === el).to.be.true;
-      const opened = oneEvent(el, "sp-opened");
-      sendKeys({ down: "Enter" });
-      await opened;
-      await aTimeout(300);
-      expect(openSpy.callCount).to.equal(1);
-      await sendKeys({ up: "Enter" });
-      await waitUntil(
-        () => firstItem.focused,
-        "The first items should have become focused visually."
-      );
-      await sendKeys({ press: "ArrowDown" });
+      expect(el.open).to.be.true;
+      expect(isMenuActiveElement()).to.be.true;
       await sendKeys({ press: "ArrowDown" });
-      expect(thirdItem.focused).to.be.true;
-      const closed = oneEvent(el, "sp-closed");
-      sendKeys({ down: "Enter" });
-      await closed;
-      await aTimeout(300);
-      expect(el.value).to.equal(thirdItem.value);
-      expect(openSpy.callCount).to.equal(1);
-      expect(closedSpy.callCount).to.equal(1);
-      await sendKeys({ up: "Enter" });
+      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;
@@ -874,7 +757,51 @@ export function runPickerTests() {
           input1
         );
       });
-      it("can close and immediately 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);
@@ -883,7 +810,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");
@@ -900,13 +827,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");
@@ -915,7 +842,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;
@@ -930,7 +857,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"
       );
@@ -940,15 +868,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;
       };
@@ -957,9 +881,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);
@@ -997,8 +919,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");
@@ -1036,7 +956,6 @@ export function runPickerTests() {
     beforeEach(async () => {
       el = await pickerFixture2();
       await elementUpdated(el);
-      await nextFrame();
     });
     afterEach(async () => {
       if (el.open) {
@@ -1122,7 +1041,6 @@ export function runPickerTests() {
       beforeEach(async () => {
         el = await pickerFixture2();
         await elementUpdated(el);
-        await nextFrame();
       });
       afterEach(async () => {
         if (el.open) {
@@ -1139,6 +1057,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("");
@@ -1158,7 +1077,6 @@ export function runPickerTests() {
         `);
     const el2 = test.querySelector("sp-picker");
     await elementUpdated(el2);
-    await nextFrame();
     let snapshot = await a11ySnapshot({});
     expect(
       findAccessibilityNode(
@@ -1169,9 +1087,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(
@@ -1184,8 +1099,6 @@ export function runPickerTests() {
   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)]);
@@ -1206,8 +1119,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"
@@ -1216,7 +1129,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
@@ -1233,7 +1146,6 @@ export function runPickerTests() {
                 </sp-picker>
             `
     );
-    await nextFrame();
     await elementUpdated(el2);
     await waitUntil(
       () => {
@@ -1259,21 +1171,16 @@ 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(secondItem.id);
+    expect(el2.optionsMenu.getAttribute("aria-activedescendant")).to.equal(
+      secondItem.id
+    );
   });
   it("resets value when item not available", async () => {
     var _a;
@@ -1355,11 +1262,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