@spectrum-web-components/picker 1.2.0-beta.9 → 1.2.0

package/test/index.js

@@ -9,21 +9,33 @@ import {
   oneEvent,
   waitUntil
 } from "@open-wc/testing";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/InteractionController.js";
+import { isWebKit } from "@spectrum-web-components/shared";
 import "@spectrum-web-components/shared/src/focus-visible.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import {
+  a11ySnapshot,
+  findAccessibilityNode,
+  sendKeys,
+  setViewport
+} from "@web/test-runner-commands";
 import { spy, stub } from "sinon";
+import { sendMouse } from "../../../test/plugins/browser.js";
 import {
   arrowDownEvent,
   arrowRightEvent,
   arrowUpEvent,
+  ignoreResizeObserverLoopError,
+  fixture as styledFixture,
   testForLitDevWarnings,
   tEvent
 } from "../../../test/testing-helpers.js";
-import {
-  a11ySnapshot,
-  findAccessibilityNode,
-  sendKeys,
-  setViewport
-} from "@web/test-runner-commands";
+import { M as pending } from "../stories/picker-pending.stories.js";
 import {
   Default,
   disabled,
@@ -33,25 +45,12 @@ import {
   slottedLabel,
   tooltip
 } from "../stories/picker.stories.js";
-import { M as pending } from "../stories/picker-pending.stories.js";
-import { sendMouse } from "../../../test/plugins/browser.js";
-import {
-  ignoreResizeObserverLoopError,
-  fixture as styledFixture
-} from "../../../test/testing-helpers.js";
-import "@spectrum-web-components/picker/sp-picker.js";
-import "@spectrum-web-components/field-label/sp-field-label.js";
-import "@spectrum-web-components/menu/sp-menu.js";
-import "@spectrum-web-components/menu/sp-menu-group.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/theme/src/themes.js";
-import { isWebKit } from "@spectrum-web-components/shared";
-import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/InteractionController.js";
 ignoreResizeObserverLoopError(before, after);
 const isMenuActiveElement = function(el) {
   var _a;
-  return ((_a = el.shadowRoot.activeElement) == null ? void 0 : _a.localName) === "sp-menu";
+  return ((_a = document.activeElement) == null ? void 0 : _a.tagName) === "SP-MENU-ITEM" && el.contains(document.activeElement);
 };
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 export function runPickerTests() {
   let el;
   const pickerFixture = async () => {
@@ -195,7 +194,7 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
-      expect(el.open).to.be.true;
+      expect(el.open, "open?").to.be.true;
       const accessibleCloseButton = el.shadowRoot.querySelector(
         ".visually-hidden button"
       );
@@ -203,11 +202,11 @@ export function runPickerTests() {
         "aria-label",
         "Dismiss"
       );
-      const closed = oneEvent(el, "sp-closed");
+      const closed2 = oneEvent(el, "sp-closed");
       accessibleCloseButton.click();
-      await closed;
+      await closed2;
       await elementUpdated(el);
-      expect(el.open).to.be.false;
+      expect(el.open, "open?").to.be.false;
       expect(el.shadowRoot.activeElement).to.equal(el.button);
       expect(document.activeElement).to.eq(el);
     });
@@ -352,25 +351,6 @@ export function runPickerTests() {
         "`name` is the selected item text plus the label text"
       ).to.not.be.null;
     });
-    it("manages `aria-activedescendant`", async () => {
-      const firstItem = el.querySelector("sp-menu-item:nth-child(1)");
-      const secondItem = el.querySelector("sp-menu-item:nth-child(2)");
-      const opened = oneEvent(el, "sp-opened");
-      el.open = true;
-      await opened;
-      expect(
-        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"
-        )
-      ).to.equal(secondItem == null ? void 0 : secondItem.id);
-    });
     it("renders invalid accessibly", async () => {
       el.invalid = true;
       await elementUpdated(el);
@@ -383,58 +363,61 @@ 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;
+      const opened = oneEvent(el, "sp-opened");
+      const closed2 = oneEvent(el, "sp-closed");
+      expect(
+        firstItem.focused,
+        "first item should not be visually focused before opening"
+      ).to.be.false;
       el.focus();
       await elementUpdated(el);
-      const opened = oneEvent(el, "sp-opened");
-      await sendKeys({ press: "ArrowRight" });
-      await sendKeys({ press: "ArrowLeft" });
       await sendKeys({ press: "ArrowDown" });
       await opened;
-      expect(el.open).to.be.true;
-      expect(firstItem.focused, "should be visually focused").to.be.true;
-      const closed = oneEvent(el, "sp-closed");
+      expect(el.open, "picker should be open").to.be.true;
+      expect(
+        firstItem.focused,
+        "first item should be visually focused after opening"
+      ).to.be.true;
       await sendKeys({
         press: "Escape"
       });
-      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 closed2;
+      expect(el.open, "picker should be closed").to.be.false;
+      expect(document.activeElement).to.equal(el);
+      expect(el.shadowRoot.activeElement).to.equal(el.button);
       await waitUntil(
         () => !firstItem.focused,
         "finally, not visually focused"
       );
+      expect(
+        firstItem.focused,
+        "first item should not be visually focused after closing"
+      ).to.be.false;
     });
     it("opens with visible focus on a menu item on `Space`", async function() {
       var _a, _b;
       const firstItem = el.querySelector("sp-menu-item");
-      await elementUpdated(el);
-      expect(firstItem.focused, "should not visually focused").to.be.false;
+      const opened = oneEvent(el, "sp-opened");
+      const closed2 = oneEvent(el, "sp-closed");
+      expect(
+        firstItem.focused,
+        "should not be visually focused before opening"
+      ).to.be.false;
       el.focus();
       await elementUpdated(el);
-      const opened = oneEvent(el, "sp-opened");
-      await sendKeys({ press: "ArrowRight" });
-      await sendKeys({ press: "ArrowLeft" });
       await sendKeys({ press: "Space" });
       await opened;
-      expect(el.open).to.be.true;
-      expect(firstItem.focused, "should be visually focused").to.be.true;
-      const closed = oneEvent(el, "sp-closed");
+      expect(el.open, "open?").to.be.true;
+      expect(
+        firstItem.focused,
+        "should be visually focused after opening"
+      ).to.be.true;
       await sendKeys({
         press: "Escape"
       });
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "picker should be closed").to.be.false;
       expect(
         document.activeElement === el,
         `focused ${(_a = document.activeElement) == null ? void 0 : _a.localName} instead of back on Picker`
@@ -447,8 +430,12 @@ export function runPickerTests() {
         () => !firstItem.focused,
         "finally, not visually focused"
       );
+      expect(
+        firstItem.focused,
+        "first item should not be visually focused after closing"
+      ).to.be.false;
     });
-    it("opens, on click, without visible focus on a menu item", async () => {
+    it("opens, on click, with visible focus on a menu item", async () => {
       await nextFrame();
       await nextFrame();
       const firstItem = el.querySelector("sp-menu-item");
@@ -467,8 +454,8 @@ export function runPickerTests() {
         ]
       });
       await opened;
-      expect(el.open).to.be.true;
-      expect(firstItem.focused, "still not visually focused").to.be.false;
+      expect(el.open, "open?").to.be.true;
+      expect(firstItem.focused, "firstItem focused?").to.be.true;
     });
     it("opens and selects in a single pointer button interaction", async () => {
       await nextFrame();
@@ -495,7 +482,7 @@ export function runPickerTests() {
       });
       await opened;
       const thirdItemRect = thirdItem.getBoundingClientRect();
-      const closed = oneEvent(el, "sp-closed");
+      const closed2 = oneEvent(el, "sp-closed");
       await sendMouse({
         steps: [
           {
@@ -510,14 +497,12 @@ export function runPickerTests() {
           }
         ]
       });
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
       expect(el.value).to.equal(thirdItem.value);
     });
     it("opens/closes multiple times", async () => {
-      await nextFrame();
-      await nextFrame();
-      expect(el.open).to.be.false;
+      expect(el.open, "open?").to.be.false;
       const boundingRect = el.button.getBoundingClientRect();
       let opened = oneEvent(el, "sp-opened");
       sendMouse({
@@ -532,8 +517,8 @@ export function runPickerTests() {
         ]
       });
       await opened;
-      expect(el.open).to.be.true;
-      let closed = oneEvent(el, "sp-closed");
+      expect(el.open, "open?").to.be.true;
+      let closed2 = oneEvent(el, "sp-closed");
       sendMouse({
         steps: [
           {
@@ -545,8 +530,8 @@ export function runPickerTests() {
           }
         ]
       });
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
       opened = oneEvent(el, "sp-opened");
       sendMouse({
         steps: [
@@ -560,8 +545,8 @@ export function runPickerTests() {
         ]
       });
       await opened;
-      expect(el.open).to.be.true;
-      closed = oneEvent(el, "sp-closed");
+      expect(el.open, "open?").to.be.true;
+      closed2 = oneEvent(el, "sp-closed");
       sendMouse({
         steps: [
           {
@@ -573,32 +558,32 @@ export function runPickerTests() {
           }
         ]
       });
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
     });
     it("closes when becoming disabled", async () => {
-      expect(el.open).to.be.false;
+      expect(el.open, "open before click?").to.be.false;
       el.click();
       await elementUpdated(el);
-      expect(el.open).to.be.true;
+      expect(el.open, "open after click?").to.be.true;
       el.disabled = true;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
+      await closed;
+      expect(el.open, "open after disabled?").to.be.false;
     });
     it("closes when clicking away", async () => {
       el.id = "closing";
       const other = document.createElement("div");
       document.body.append(other);
       await elementUpdated(el);
-      expect(el.open).to.be.false;
+      expect(el.open, "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");
+      expect(el.open, "open?").to.be.true;
+      const closed2 = oneEvent(el, "sp-closed");
       other.click();
-      closed;
+      closed2;
       await elementUpdated(el);
       other.remove();
     });
@@ -610,13 +595,13 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.click();
       await opened;
-      expect(el.open).to.be.true;
+      expect(el.open, "open?").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");
+      const closed2 = oneEvent(el, "sp-closed");
       secondItem.click();
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
       expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
       expect(el.value).to.equal("option-2");
     });
@@ -631,25 +616,25 @@ export function runPickerTests() {
       let opened = oneEvent(el, "sp-opened");
       el.click();
       await opened;
-      expect(el.open).to.be.true;
+      expect(el.open, "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");
+      let closed2 = oneEvent(el, "sp-closed");
       secondItem.click();
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "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");
       el.click();
       await opened;
-      expect(el.open).to.be.true;
+      expect(el.open, "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");
+      closed2 = oneEvent(el, "sp-closed");
       firstItem.click();
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
       expect((_d = el.selectedItem) == null ? void 0 : _d.itemText).to.equal("Deselect");
       expect(el.value).to.equal("Deselect");
     });
@@ -665,9 +650,9 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
-      const closed = oneEvent(el, "sp-closed");
+      const closed2 = oneEvent(el, "sp-closed");
       secondItem.click();
-      await closed;
+      await closed2;
       expect(el.value).to.equal(secondItem.value);
       expect(changeSpy.calledOnce).to.be.true;
     });
@@ -680,7 +665,7 @@ export function runPickerTests() {
       const opened = oneEvent(el, "sp-opened");
       el.click();
       await opened;
-      expect(el.open).to.be.true;
+      expect(el.open, "open?").to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
       expect(secondItem.selected).to.be.false;
@@ -696,9 +681,9 @@ export function runPickerTests() {
         preventChangeSpy.callCount.toString()
       ).to.be.true;
       expect(secondItem.selected, "selection prevented").to.be.false;
-      expect(el.open).to.be.true;
+      expect(el.open, "open?").to.be.true;
     });
-    it("can throw focus after `change`", async () => {
+    it("should return focus after click", async () => {
       var _a;
       const input = document.createElement("input");
       document.body.append(input);
@@ -710,24 +695,49 @@ export function runPickerTests() {
       el.click();
       await opened;
       await elementUpdated(el);
-      expect(el.open).to.be.true;
+      expect(el.open, "open?").to.be.true;
+      expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
+      expect(el.value).to.equal("");
+      expect(secondItem.selected).to.be.false;
+      secondItem.click();
+      await waitUntil(
+        () => document.activeElement === el,
+        "focused",
+        { timeout: 300 }
+      );
+      expect(el.open, "open?").to.be.false;
+      expect(el.value, "value changed").to.equal("option-2");
+      expect(secondItem.selected, "selected changed").to.be.true;
+      input.remove();
+    });
+    it("should throw focus after `change`", async () => {
+      var _a;
+      const input = document.createElement("input");
+      document.body.append(input);
+      await elementUpdated(el);
+      const secondItem = el.querySelector(
+        "sp-menu-item:nth-of-type(2)"
+      );
+      const opened = oneEvent(el, "sp-opened");
+      el.click();
+      await opened;
+      await elementUpdated(el);
+      expect(el.open, "open?").to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
       expect(el.value).to.equal("");
       expect(secondItem.selected).to.be.false;
       el.addEventListener("change", () => {
         input.focus();
       });
-      const closed = oneEvent(el, "sp-closed");
       secondItem.click();
-      await closed;
-      await elementUpdated(el);
-      expect(el.open).to.be.false;
-      expect(el.value, "value changed").to.equal("option-2");
-      expect(secondItem.selected, "selected changed").to.be.true;
       await waitUntil(
         () => document.activeElement === input,
-        "focus throw"
+        "focus throw",
+        { timeout: 300 }
       );
+      expect(el.open, "open?").to.be.false;
+      expect(el.value, "value changed").to.equal("option-2");
+      expect(secondItem.selected, "selected changed").to.be.true;
       input.remove();
     });
     it("opens on ArrowUp", async () => {
@@ -743,12 +753,12 @@ export function runPickerTests() {
       await elementUpdated(el);
       expect(el.open, "open by ArrowUp").to.be.true;
       await opened;
-      const closed = oneEvent(el, "sp-closed");
+      const closed2 = oneEvent(el, "sp-closed");
       sendKeys({
         press: "Escape"
       });
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "should be closed after escape key is pressed").to.be.false;
     });
     it("opens on ArrowDown", async () => {
       var _a, _b;
@@ -765,10 +775,10 @@ export function runPickerTests() {
       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");
+      const closed2 = oneEvent(el, "sp-closed");
       firstItem.click();
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
       expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Deselect");
       expect(el.value).to.equal("Deselect");
     });
@@ -787,19 +797,25 @@ export function runPickerTests() {
         press: "ArrowLeft"
       });
       await elementUpdated(el);
-      expect(selectionSpy.callCount).to.equal(1);
+      expect(
+        selectionSpy.callCount,
+        `selectionSpy.callCount: ${selectionSpy.callCount}`
+      ).to.equal(1);
       expect(selectionSpy.calledWith("Deselected"));
       await sendKeys({
         press: "ArrowLeft"
       });
       await elementUpdated(el);
-      expect(selectionSpy.callCount).to.equal(1);
+      expect(
+        selectionSpy.callCount,
+        `selectionSpy.callCount: ${selectionSpy.callCount}`
+      ).to.equal(1);
       await sendKeys({
         press: "ArrowRight"
       });
       await nextFrame();
       await nextFrame();
-      expect(selectionSpy.calledWith("option-2"));
+      expect(selectionSpy.calledWith("option-2"), "option-2");
       await sendKeys({
         press: "ArrowRight"
       });
@@ -820,9 +836,18 @@ export function runPickerTests() {
       });
       await nextFrame();
       await nextFrame();
-      expect(selectionSpy.calledWith("Save Selection"));
-      expect(selectionSpy.calledWith("Make Work Path")).to.be.false;
-      expect(selectionSpy.callCount).to.equal(5);
+      expect(
+        selectionSpy.calledWith("Save Selection"),
+        'selectionSpy.calledWith("Save Selection")'
+      );
+      expect(
+        selectionSpy.calledWith("Make Work Path"),
+        'selectionSpy.calledWith("Make Work Path")'
+      ).to.be.false;
+      expect(
+        selectionSpy.callCount,
+        `selectionSpy.callCount: ${selectionSpy.callCount}`
+      ).to.equal(5);
     });
     it("quick selects first item on ArrowRight when no value", async () => {
       await nextFrame();
@@ -850,10 +875,12 @@ export function runPickerTests() {
       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;
+      if (!isSafari) {
+        await sendKeys({ press: "Tab" });
+        expect(document.activeElement).to.equal(input);
+        await sendKeys({ press: "Shift+Tab" });
+      }
+      expect(document.activeElement).to.equal(el);
       const opened = oneEvent(el, "sp-opened");
       sendKeys({ press: "Enter" });
       await opened;
@@ -864,12 +891,12 @@ export function runPickerTests() {
       );
       await sendKeys({ press: "ArrowDown" });
       await sendKeys({ press: "ArrowDown" });
-      expect(thirdItem.focused).to.be.true;
-      const closed = oneEvent(el, "sp-closed");
+      expect(thirdItem.focused, "thirdItem focused?").to.be.true;
+      const closed2 = oneEvent(el, "sp-closed");
       button.focus();
-      await closed;
+      await closed2;
       expect(isMenuActiveElement(el)).to.be.false;
-      expect(el.open).to.be.false;
+      expect(el.open, "open?").to.be.false;
     });
     it("does not listen to streaming `Enter` keydown", async () => {
       const openSpy = spy();
@@ -883,10 +910,12 @@ export function runPickerTests() {
       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;
+      if (!isSafari) {
+        await sendKeys({ press: "Tab" });
+        expect(document.activeElement).to.equal(input);
+        await sendKeys({ press: "Shift+Tab" });
+      }
+      expect(document.activeElement).to.equal(el);
       const opened = oneEvent(el, "sp-opened");
       sendKeys({ down: "Enter" });
       await opened;
@@ -899,28 +928,28 @@ export function runPickerTests() {
       );
       await sendKeys({ press: "ArrowDown" });
       await sendKeys({ press: "ArrowDown" });
-      expect(thirdItem.focused).to.be.true;
-      const closed = oneEvent(el, "sp-closed");
+      expect(thirdItem.focused, "thirdItem focused?").to.be.true;
+      const closed2 = oneEvent(el, "sp-closed");
       sendKeys({ down: "Enter" });
-      await closed;
+      await closed2;
       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" });
     });
-    it("allows tabing to close", async () => {
+    it("allows tabbing to close", async () => {
       const input = document.createElement("input");
       el.insertAdjacentElement("afterend", input);
       const opened = oneEvent(el, "sp-opened");
       el.open = true;
       await opened;
       await nextFrame();
-      expect(el.open).to.be.true;
+      expect(el.open, "open?").to.be.true;
       el.focus();
-      const closed = oneEvent(el, "sp-closed");
+      const closed2 = oneEvent(el, "sp-closed");
       sendKeys({ press: "Tab" });
-      await closed;
+      await closed2;
       expect(el.open, "closes").to.be.false;
     });
     describe("tab order", () => {
@@ -943,11 +972,17 @@ export function runPickerTests() {
         input2.remove();
       });
       it("tabs forward through the element", async () => {
-        input1.focus();
-        await nextFrame();
-        expect(document.activeElement === input1, "focuses input 1").to.true;
-        let focused = oneEvent(el, "focus");
-        await sendKeys({ press: "Tab" });
+        let focused;
+        if (!isSafari) {
+          input1.focus();
+          await nextFrame();
+          expect(document.activeElement === input1, "focuses input 1").to.true;
+          focused = oneEvent(el, "focus");
+          await sendKeys({ press: "Tab" });
+        } else {
+          focused = oneEvent(el, "focus");
+          el.focus();
+        }
         await focused;
         expect(el.focused, "focused").to.be.true;
         expect(el.open, "closed").to.be.false;
@@ -964,40 +999,35 @@ export function runPickerTests() {
           input2
         );
         let focused = oneEvent(el, "focus");
-        await sendKeys({ press: "Shift+Tab" });
-        await focused;
-        expect(el.focused, "focused").to.be.true;
-        expect(el.open, "closed").to.be.false;
-        expect(document.activeElement, "focuses el").to.equal(el);
+        if (!isSafari) {
+          await sendKeys({ press: "Shift+Tab" });
+          await focused;
+          expect(el.focused, "focused").to.be.true;
+          expect(el.open, "closed").to.be.false;
+          expect(document.activeElement, "focuses el").to.equal(el);
+        } else {
+          el.focus();
+        }
         focused = oneEvent(input1, "focus");
         await sendKeys({ press: "Shift+Tab" });
         await focused;
-        expect(document.activeElement, "focuses input 1").to.equal(
-          input1
-        );
+        expect(document.activeElement).to.equal(input1);
       });
       it("can close and immediately tab to the next tab stop", async () => {
         el.focus();
-        await nextFrame();
         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),
-          "first item focused"
-        );
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === el).to.be.true;
-        const focused = oneEvent(input2, "focus");
+        const closed2 = oneEvent(el, "sp-closed");
+        el.close();
+        await closed2;
+        expect(el.open, "open?").to.be.false;
+        expect(document.activeElement).to.equal(el);
         await sendKeys({ press: "Tab" });
-        await focused;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === input2).to.be.true;
+        expect(el.open, "open?").to.be.false;
+        expect(document.activeElement).to.equal(input2);
       });
       it("can close and immediate shift+tab to the previous tab stop", async () => {
         el.focus();
@@ -1007,20 +1037,16 @@ export function runPickerTests() {
         await sendKeys({ press: "ArrowUp" });
         await opened;
         expect(el.open, "opened").to.be.true;
-        await waitUntil(
-          () => isMenuActiveElement(el),
-          "first item focused"
-        );
-        const closed = oneEvent(el, "sp-closed");
-        el.open = false;
-        await closed;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === el).to.be.true;
+        const closed2 = oneEvent(el, "sp-closed");
+        el.close();
+        await closed2;
+        expect(el.open, "open?").to.be.false;
+        expect(document.activeElement).to.equal(el);
         const focused = oneEvent(input1, "focus");
         sendKeys({ press: "Shift+Tab" });
         await focused;
-        expect(el.open).to.be.false;
-        expect(document.activeElement === input1).to.be.true;
+        expect(el.open, "open?").to.be.false;
+        expect(document.activeElement === input1, "input has focus").to.be.true;
       });
     });
     it("does not open when [readonly]", async () => {
@@ -1028,7 +1054,7 @@ export function runPickerTests() {
       await elementUpdated(el);
       el.click();
       await elementUpdated(el);
-      expect(el.open).to.be.false;
+      expect(el.open, "open?").to.be.false;
     });
     it("scrolls selected into view on open", async () => {
       const styles = document.createElement("style");
@@ -1044,12 +1070,14 @@ export function runPickerTests() {
       el.value = lastItem.value;
       await elementUpdated(el);
       const opened = oneEvent(el, "sp-opened");
-      el.open = true;
+      el.focus();
+      await sendKeys({
+        press: "ArrowDown"
+      });
       await opened;
-      await waitUntil(
-        () => isMenuActiveElement(el),
-        "first item focused"
-      );
+      await waitUntil(() => isMenuActiveElement(el), "menu item focused");
+      await nextFrame();
+      await nextFrame();
       const getParentOffset = (el2) => {
         const parentScroll = el2.assignedSlot.parentElement.scrollTop;
         const parentOffset = el2.offsetTop - parentScroll;
@@ -1057,9 +1085,6 @@ export function runPickerTests() {
       };
       expect(getParentOffset(lastItem)).to.be.lessThan(40);
       expect(getParentOffset(firstItem)).to.be.lessThan(-1);
-      lastItem.dispatchEvent(
-        new FocusEvent("focusin", { bubbles: true })
-      );
       await sendKeys({
         press: "ArrowDown"
       });
@@ -1091,19 +1116,18 @@ export function runPickerTests() {
       });
       await opened;
       const tray = el.shadowRoot.querySelector("sp-tray");
-      expect(tray).to.not.be.null;
-      let closed = oneEvent(el, "sp-closed");
+      expect(tray, "has tray").to.not.be.null;
+      let closed2 = oneEvent(el, "sp-closed");
       const firstItem = el.querySelector("sp-menu-item");
       firstItem.click();
-      await elementUpdated(el);
-      await closed;
-      expect(el.open).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
       const button = el.shadowRoot.querySelector(
         "#button"
       );
-      expect(button).to.not.be.null;
-      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.true;
-      expect(document.activeElement === el).to.be.true;
+      expect(button, "has button").to.not.be.null;
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS), "has focus ring?").to.be.true;
+      expect(document.activeElement).to.equal(el);
       await sendMouse({
         steps: [
           {
@@ -1112,22 +1136,18 @@ export function runPickerTests() {
           }
         ]
       });
-      expect(document.activeElement === el).to.be.false;
+      expect(document.activeElement).not.to.equal(el);
       opened = oneEvent(el, "sp-opened");
-      await sendKeys({
-        press: "Tab"
-      });
+      el.focus();
       await sendKeys({
         press: "Enter"
       });
-      await elementUpdated(el);
       await opened;
-      closed = oneEvent(el, "sp-closed");
+      closed2 = oneEvent(el, "sp-closed");
       firstItem.click();
-      await elementUpdated(el);
-      await closed;
-      expect(el.open).to.be.false;
-      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be.false;
+      await closed2;
+      expect(el.open, "open?").to.be.false;
+      expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS), "has focus ring?").to.be.false;
     });
   });
   describe("grouped", async () => {
@@ -1197,10 +1217,10 @@ export function runPickerTests() {
       await nextFrame();
     });
     afterEach(async () => {
-      if (el.open) {
-        const closed = oneEvent(el, "sp-closed");
+      if (el && el.open) {
+        const closed2 = oneEvent(el, "sp-closed");
         el.open = false;
-        await closed;
+        await closed2;
       }
     });
     it("loads accessibly w/ slotted label", async () => {
@@ -1219,10 +1239,10 @@ export function runPickerTests() {
     after(async () => {
       window.__swc.verbose = false;
       consoleWarnStub.restore();
-      if (el.open) {
-        const closed = oneEvent(el, "sp-closed");
+      if (el == null ? void 0 : el.open) {
+        const closed2 = oneEvent(el, "sp-closed");
         el.open = false;
-        await closed;
+        await closed2;
       }
     });
     const pickerFixture2 = async () => {
@@ -1332,9 +1352,9 @@ export function runPickerTests() {
       });
       afterEach(async () => {
         if (el.open) {
-          const closed = oneEvent(el, "sp-closed");
+          const closed2 = oneEvent(el, "sp-closed");
           el.open = false;
-          await closed;
+          await closed2;
         }
       });
       it("selects with deprecated syntax", async () => {
@@ -1345,13 +1365,13 @@ export function runPickerTests() {
         const opened = oneEvent(el, "sp-opened");
         el.click();
         await opened;
-        expect(el.open).to.be.true;
+        expect(el.open, "open?").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");
+        const closed2 = oneEvent(el, "sp-closed");
         secondItem.click();
-        await closed;
-        expect(el.open).to.be.false;
+        await closed2;
+        expect(el.open, "open?").to.be.false;
         expect((_b = el.selectedItem) == null ? void 0 : _b.itemText).to.equal("Select Inverse");
         expect(el.value).to.equal("option-2");
       });
@@ -1388,41 +1408,39 @@ export function runPickerTests() {
     ).to.not.be.null;
   });
   it("toggles between pickers", async () => {
-    const el2 = await pickerFixture();
     const el1 = await pickerFixture();
-    el1.parentElement.style.float = "left";
-    el2.parentElement.style.float = "left";
+    const el2 = await pickerFixture();
     el1.id = "away";
     el2.id = "other";
-    await Promise.all([elementUpdated(el1), elementUpdated(el2)]);
-    expect(el1.open, "closed 1").to.be.false;
-    expect(el2.open, "closed 1").to.be.false;
-    let open = oneEvent(el1, "sp-opened");
+    expect(el1.open, "el1 to be closed").to.be.false;
+    expect(el2.open, "el2 to be closed").to.be.false;
+    const el1open = oneEvent(el1, "sp-opened");
+    let el1closed = oneEvent(el1, "sp-closed");
+    const el2open = oneEvent(el2, "sp-opened");
+    const el2closed = oneEvent(el2, "sp-closed");
     el1.click();
-    await open;
-    expect(el1.open).to.be.true;
-    expect(el2.open).to.be.false;
-    open = oneEvent(el2, "sp-opened");
-    let closed = oneEvent(el1, "sp-closed");
+    await el1open;
+    expect(el1.open, "click el1: el1 to be open").to.be.true;
+    expect(el2.open, "click el1: el2 to be closed").to.be.false;
     el2.click();
-    await Promise.all([open, closed]);
-    expect(el1.open).to.be.false;
-    expect(el2.open).to.be.true;
-    open = oneEvent(el1, "sp-opened");
-    closed = oneEvent(el2, "sp-closed");
+    await el1closed;
+    await el2open;
+    expect(el1.open, "click el2: el1 to be closed").to.be.false;
+    expect(el2.open, "click el2: el2 to be open").to.be.true;
     el1.click();
-    await Promise.all([open, closed]);
-    expect(el2.open).to.be.false;
-    expect(el1.open).to.be.true;
-    closed = oneEvent(el1, "sp-closed");
+    await el2closed;
+    await el1open;
+    expect(el2.open, "click el1 again: el2 to be closed").to.be.false;
+    expect(el1.open, "click el1 again: el1 to be open").to.be.true;
+    el1closed = oneEvent(el1, "sp-closed");
     sendKeys({
       press: "Escape"
     });
-    await closed;
-    expect(el1.open).to.be.false;
+    await el1closed;
+    expect(el1.open, "escape key: el1 to be closed").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
                 value="inverse"
@@ -1463,20 +1481,11 @@ export function runPickerTests() {
     sendKeys({ press: "Enter" });
     await opened;
     expect(
-      el2 === document.activeElement,
+      el2.selectedItem === 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);
   });
   it("resets value when item not available", async () => {
     var _a;
@@ -1516,15 +1525,15 @@ export function runPickerTests() {
     el2.open = true;
     await opened;
     await elementUpdated(el2);
-    expect(el2.open).to.be.true;
+    expect(el2.open, "open?").to.be.true;
     hoverEl.dispatchEvent(new MouseEvent("mouseenter"));
     await elementUpdated(el2);
-    expect(el2.open).to.be.true;
-    const closed = oneEvent(el2, "sp-closed");
+    expect(el2.open, "open?").to.be.true;
+    const closed2 = oneEvent(el2, "sp-closed");
     el2.open = false;
-    await closed;
+    await closed2;
     await elementUpdated(el2);
-    expect(el2.open).to.be.false;
+    expect(el2.open, "open?").to.be.false;
     expect(mouseenterSpy.calledOnce).to.be.true;
   });
   it("dispatches events on open/close", async () => {
@@ -1548,9 +1557,9 @@ export function runPickerTests() {
     await elementUpdated(el2);
     expect(openedSpy.calledOnce).to.be.true;
     expect(closedSpy.calledOnce).to.be.false;
-    const closed = oneEvent(el2, "sp-closed");
+    const closed2 = oneEvent(el2, "sp-closed");
     el2.open = false;
-    await closed;
+    await closed2;
     await elementUpdated(el2);
     expect(closedSpy.calledOnce).to.be.true;
   });
@@ -1563,23 +1572,29 @@ export function runPickerTests() {
     await elementUpdated(el2);
     const input1 = document.createElement("input");
     const input2 = document.createElement("input");
+    input1.id = "input1";
+    input2.id = "input2";
     const tooltipEl = el2.querySelector("sp-tooltip");
     el2.insertAdjacentElement("beforebegin", input1);
     el2.insertAdjacentElement("afterend", input2);
     input1.focus();
-    expect(document.activeElement === input1).to.be.true;
+    expect(document.activeElement).to.equal(input1);
     const tooltipOpened = oneEvent(el2, "sp-opened");
-    await sendKeys({
-      press: "Tab"
-    });
+    if (!isSafari) {
+      await sendKeys({
+        press: "Tab"
+      });
+    } else {
+      el2.focus();
+    }
     await tooltipOpened;
     expect(
       document.activeElement === el2,
       `Actually, ${(_a = document.activeElement) == null ? void 0 : _a.localName}`
     ).to.be.true;
-    expect(tooltipEl.open).to.be.true;
-    expect(el2.open).to.be.false;
-    expect(el2.focused).to.be.true;
+    expect(tooltipEl.open, "tooltipEl open?").to.be.true;
+    expect(el2.open, "open?").to.be.false;
+    expect(el2.focused, "el focused?").to.be.true;
     const menuOpen = oneEvent(el2, "sp-opened");
     const tooltipClosed = oneEvent(el2, "sp-closed");
     await sendKeys({
@@ -1587,17 +1602,21 @@ export function runPickerTests() {
     });
     await menuOpen;
     await tooltipClosed;
-    expect(document.activeElement === el2).to.be.true;
-    expect(tooltipEl.open).to.be.false;
-    expect(el2.open).to.be.true;
+    const firstOption = el2.querySelector("sp-menu-item");
+    expect(
+      document.activeElement === firstOption,
+      "firstOption is activeElement"
+    ).to.be.true;
+    expect(tooltipEl.open, "tooltip open").to.be.false;
+    expect(el2.open, "menu open").to.be.true;
     const menuClosed = oneEvent(el2, "sp-closed");
     await sendKeys({
       press: "Tab"
     });
     await menuClosed;
-    expect(document.activeElement === el2).to.be.false;
-    expect(tooltipEl.open).to.be.false;
-    expect(el2.open).to.be.false;
+    expect(document.activeElement).not.to.equal(el2);
+    expect(tooltipEl.open, "tooltipEl open?").to.be.false;
+    expect(el2.open, "open?").to.be.false;
   });
   describe("disabled", function() {
     beforeEach(async function() {
@@ -1609,22 +1628,22 @@ export function runPickerTests() {
       await elementUpdated(this.elel);
     });
     it("does not recieve focus from an `<sp-field-label>`", async function() {
-      expect(this.el.disabled).to.be.true;
-      expect(this.el.focused).to.be.false;
+      expect(this.el.disabled, "this.el disabled?").to.be.true;
+      expect(this.el.focused, "this.el focused?").to.be.false;
       this.label.click();
       await elementUpdated(this.el);
-      expect(this.el.focused).to.be.false;
+      expect(this.el.focused, "this.el focused?").to.be.false;
     });
     it("does not open from `click()`", async function() {
-      expect(this.el.disabled).to.be.true;
-      expect(this.el.open).to.be.false;
+      expect(this.el.disabled, "this.el disabled?").to.be.true;
+      expect(this.el.focused, "this.el open?").to.be.false;
       this.el.click();
       await elementUpdated(this.el);
-      expect(this.el.open).to.be.false;
+      expect(this.el.focused, "this.el open?").to.be.false;
     });
     it("does not open from `sendMouse()`", async function() {
-      expect(this.el.disabled).to.be.true;
-      expect(this.el.open).to.be.false;
+      expect(this.el.disabled, "this.el disabled?").to.be.true;
+      expect(this.el.focused, "this.el open?").to.be.false;
       const boundingRect = this.el.button.getBoundingClientRect();
       sendMouse({
         steps: [
@@ -1641,7 +1660,7 @@ export function runPickerTests() {
       await nextFrame();
       await nextFrame();
       await nextFrame();
-      expect(this.el.open).to.be.false;
+      expect(this.el.focused, "this.el open?").to.be.false;
     });
   });
   describe("pending", function() {
@@ -1654,16 +1673,16 @@ export function runPickerTests() {
       await elementUpdated(this.elel);
     });
     it("receives focus from an `<sp-field-label>`", async function() {
-      expect(this.el.focused).to.be.false;
+      expect(this.el.focused, "this.el focused?").to.be.false;
       this.label.click();
       await elementUpdated(this.el);
-      expect(this.el.focused).to.be.true;
+      expect(this.el.focused, "this.el focused?").to.be.true;
     });
     it("does not open from `click()`", async function() {
-      expect(this.el.open).to.be.false;
+      expect(this.el.focused, "this.el open?").to.be.false;
       this.el.click();
       await elementUpdated(this.el);
-      expect(this.el.open).to.be.false;
+      expect(this.el.focused, "this.el open?").to.be.false;
     });
     it('manages its "name" value in the accessibility tree when [pending]', async () => {
       const snapshot = await a11ySnapshot(
@@ -1689,6 +1708,7 @@ export function runPickerTests() {
       await nextFrame();
       await nextFrame();
       await nextFrame();
+      await nextFrame();
       const picker = this.el;
       const displayedIconBefore = picker.shadowRoot.querySelector("#icon > sp-icon");
       expect(displayedIconBefore).to.be.ok;