@spectrum-web-components/picker 0.40.2 → 0.40.4

package/test/index.js

@@ -35,7 +35,6 @@ import {
   ignoreResizeObserverLoopError,
   fixture as styledFixture
 } from "../../../test/testing-helpers.js";
-import { isFirefox } from "@spectrum-web-components/shared/src/platform.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";
@@ -75,7 +74,7 @@ export function runPickerTests() {
     return test.querySelector("sp-picker");
   };
   describe("accessibility model", () => {
-    it('accessible with "<sp-field-label>"', async () => {
+    it('accessible with "<sp-field-label>"', async function() {
       const test = await fixture(html`
                 <div>
                     ${Default({
@@ -139,7 +138,7 @@ export function runPickerTests() {
         "`name` is the the selected item text plus the label text"
       ).to.not.be.null;
     });
-    it('accessible with "label" slot', async () => {
+    it('accessible with "label" slot', async function() {
       const test = await fixture(html`
                 <div>
                     ${slottedLabel({
@@ -163,16 +162,6 @@ export function runPickerTests() {
       await nextFrame();
       await nextFrame();
       snapshot = await a11ySnapshot({});
-      if (isFirefox()) {
-        expect(
-          findAccessibilityNode(
-            snapshot,
-            (node) => node.name === "Select Inverse"
-          ),
-          "`name` is the the selected item text without label test"
-        ).to.not.be.null;
-        return;
-      }
       expect(
         findAccessibilityNode(
           snapshot,
@@ -418,6 +407,39 @@ export function runPickerTests() {
         "finally, not visually focused"
       );
     });
+    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;
+      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");
+      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 waitUntil(
+        () => !firstItem.focused,
+        "finally, not visually focused"
+      );
+    });
     it("opens, on click, without visible focus on a menu item", async () => {
       await nextFrame();
       await nextFrame();
@@ -440,6 +462,50 @@ export function runPickerTests() {
       expect(el.open).to.be.true;
       expect(firstItem.focused, "still not visually focused").to.be.false;
     });
+    it("opens and selects in a single pointer button interaction", async () => {
+      await nextFrame();
+      await nextFrame();
+      const thirdItem = el.querySelector(
+        "sp-menu-item:nth-of-type(3)"
+      );
+      const boundingRect = el.button.getBoundingClientRect();
+      expect(el.value).to.not.equal(thirdItem.value);
+      const opened = oneEvent(el, "sp-opened");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              boundingRect.x + boundingRect.width / 2,
+              boundingRect.y + boundingRect.height / 2
+            ]
+          },
+          {
+            type: "down"
+          }
+        ]
+      });
+      await opened;
+      const thirdItemRect = thirdItem.getBoundingClientRect();
+      const closed = oneEvent(el, "sp-closed");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [
+              thirdItemRect.x + thirdItemRect.width / 2,
+              thirdItemRect.y + thirdItemRect.height / 2
+            ]
+          },
+          {
+            type: "up"
+          }
+        ]
+      });
+      await closed;
+      expect(el.open).to.be.false;
+      expect(el.value).to.equal(thirdItem.value);
+    });
     it("opens/closes multiple times", async () => {
       expect(el.open).to.be.false;
       const boundingRect = el.button.getBoundingClientRect();
@@ -531,9 +597,8 @@ export function runPickerTests() {
       const secondItem = el.querySelector(
         "sp-menu-item:nth-of-type(2)"
       );
-      const button = el.button;
       const opened = oneEvent(el, "sp-opened");
-      button.click();
+      el.click();
       await opened;
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
@@ -553,9 +618,8 @@ export function runPickerTests() {
       const secondItem = el.querySelector(
         "sp-menu-item:nth-of-type(2)"
       );
-      const button = el.button;
       let opened = oneEvent(el, "sp-opened");
-      button.click();
+      el.click();
       await opened;
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
@@ -567,7 +631,7 @@ export function runPickerTests() {
       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");
-      button.click();
+      el.click();
       await opened;
       expect(el.open).to.be.true;
       expect((_c = el.selectedItem) == null ? void 0 : _c.itemText).to.equal("Select Inverse");
@@ -603,9 +667,8 @@ export function runPickerTests() {
       const secondItem = el.querySelector(
         "sp-menu-item:nth-of-type(2)"
       );
-      const button = el.button;
       const opened = oneEvent(el, "sp-opened");
-      button.click();
+      el.click();
       await opened;
       expect(el.open).to.be.true;
       expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;
@@ -630,9 +693,8 @@ export function runPickerTests() {
       const secondItem = el.querySelector(
         "sp-menu-item:nth-of-type(2)"
       );
-      const button = el.button;
       const opened = oneEvent(el, "sp-opened");
-      button.click();
+      el.click();
       await opened;
       await elementUpdated(el);
       expect(el.open).to.be.true;
@@ -951,8 +1013,7 @@ export function runPickerTests() {
     it("does not open when [readonly]", async () => {
       el.readonly = true;
       await elementUpdated(el);
-      const button = el.button;
-      button.click();
+      el.click();
       await elementUpdated(el);
       expect(el.open).to.be.false;
     });
@@ -1076,7 +1137,24 @@ export function runPickerTests() {
       await expect(el).to.be.accessible();
     });
   });
-  describe("deprecated", () => {
+  describe("Dev mode", () => {
+    let consoleWarnStub;
+    before(() => {
+      window.__swc.verbose = true;
+      consoleWarnStub = stub(console, "warn");
+    });
+    afterEach(() => {
+      consoleWarnStub.resetHistory();
+    });
+    after(async () => {
+      window.__swc.verbose = false;
+      consoleWarnStub.restore();
+      if (el.open) {
+        const closed = oneEvent(el, "sp-closed");
+        el.open = false;
+        await closed;
+      }
+    });
     const pickerFixture2 = async () => {
       const test = await fixture(
         html`
@@ -1106,9 +1184,31 @@ export function runPickerTests() {
       );
       return test.querySelector("sp-picker");
     };
-    describe("Dev mode", () => {
+    it("warns in Dev Mode when accessible attributes are not leveraged", async () => {
+      el = await fixture(html`
+                <sp-picker>
+                    <sp-menu-item>Feather...</sp-menu-item>
+                    <sp-menu-item>Select and Mask...</sp-menu-item>
+                    <sp-menu-item>Save Selection</sp-menu-item>
+                </sp-picker>
+            `);
+      await elementUpdated(el);
+      expect(consoleWarnStub.called).to.be.true;
+      const spyCall = consoleWarnStub.getCall(0);
+      expect(
+        spyCall.args.at(0).includes("accessible"),
+        "confirm accessibility-centric message"
+      ).to.be.true;
+      expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+        data: {
+          localName: "sp-picker",
+          type: "accessibility",
+          level: "default"
+        }
+      });
+    });
+    describe("deprecated", () => {
       it("warns in Dev Mode of deprecated `<sp-menu>` usage", async () => {
-        const consoleWarnStub = stub(console, "warn");
         el = await pickerFixture2();
         await elementUpdated(el);
         expect(consoleWarnStub.called).to.be.true;
@@ -1127,12 +1227,6 @@ export function runPickerTests() {
             level: "deprecation"
           }
         });
-        consoleWarnStub.restore();
-        if (el.open) {
-          const closed = oneEvent(el, "sp-closed");
-          el.open = false;
-          await closed;
-        }
       });
     });
     describe("Dev mode ignored", () => {
@@ -1163,7 +1257,7 @@ export function runPickerTests() {
           "sp-menu-item:nth-of-type(2)"
         );
         const opened = oneEvent(el, "sp-opened");
-        el.button.click();
+        el.click();
         await opened;
         expect(el.open).to.be.true;
         expect((_a = el.selectedItem) == null ? void 0 : _a.itemText).to.be.undefined;