@spectrum-web-components/reactive-controllers 1.1.0 → 1.1.2

package/test/pending-state.test.js

@@ -0,0 +1,128 @@
+"use strict";
+import { expect, fixture, html } from "@open-wc/testing";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+describe("PendingStateController", () => {
+  let host;
+  let controller;
+  beforeEach(async () => {
+    host = await fixture(html`
+            <sp-picker aria-label="clickable" pending></sp-picker>
+        `);
+    controller = host.pendingStateController;
+  });
+  describe("renderPendingState", () => {
+    it("should change aria-label of host when pending and when not pending", async () => {
+      host = await fixture(html`
+                <sp-picker></sp-picker>
+            `);
+      controller = host.pendingStateController;
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      let ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("Pending");
+      host.removeAttribute("pending");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal(null);
+      host.setAttribute("aria-label", "clickable");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("clickable");
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("Pending");
+      host.removeAttribute("pending");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("clickable");
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      ariaLabel = host.getAttribute("aria-label");
+      expect(ariaLabel).to.equal("Pending");
+    });
+    it("should render the pending state UI", async () => {
+      const pendingLabel = "Custom Pending Label";
+      host.pendingLabel = pendingLabel;
+      const templateResult = controller.renderPendingState();
+      const renderedElement = await fixture(html`
+                ${templateResult}
+            `);
+      const expectedElement = await fixture(html`
+                <sp-progress-circle
+                    id="loader"
+                    size="s"
+                    indeterminate
+                    aria-valuetext=${pendingLabel}
+                    class="progress-circle"
+                ></sp-progress-circle>
+            `);
+      expect(renderedElement.outerHTML === expectedElement.outerHTML).to.be.true;
+    });
+    it("should render the default pending state UI if no label is provided", async () => {
+      host.pendingLabel = void 0;
+      const templateResult = controller.renderPendingState();
+      const renderedElement = await fixture(html`
+                ${templateResult}
+            `);
+      const expectedElement = await fixture(html`
+                <sp-progress-circle
+                    id="loader"
+                    size="s"
+                    indeterminate
+                    aria-valuetext="Pending"
+                    class="progress-circle"
+                ></sp-progress-circle>
+            `);
+      const renderedAttributes = renderedElement.attributes;
+      const expectedAttributes = expectedElement.attributes;
+      expect(renderedAttributes.length === expectedAttributes.length).to.be.true;
+      for (let i = 0; i < renderedAttributes.length; i++) {
+        const renderedAttr = renderedAttributes[i];
+        const expectedAttr = expectedAttributes.getNamedItem(
+          renderedAttr.name
+        );
+        expect(renderedAttr.value === (expectedAttr == null ? void 0 : expectedAttr.value)).to.be.true;
+      }
+      expect(host.pending).to.be.true;
+    });
+    it("should toggle the pending state on and off and preserve the component state correctly", async () => {
+      var _a, _b, _c;
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      let progressCircle = (_a = host.shadowRoot) == null ? void 0 : _a.querySelector("sp-progress-circle");
+      expect(progressCircle).to.not.be.null;
+      host.removeAttribute("pending");
+      await host.updateComplete;
+      progressCircle = (_b = host.shadowRoot) == null ? void 0 : _b.querySelector("sp-progress-circle");
+      expect(progressCircle).to.be.null;
+      host.setAttribute("pending", "true");
+      await host.updateComplete;
+      progressCircle = (_c = host.shadowRoot) == null ? void 0 : _c.querySelector("sp-progress-circle");
+      expect(progressCircle).to.not.be.null;
+      const expectedElement = await fixture(html`
+                <sp-progress-circle
+                    id="loader"
+                    size="s"
+                    indeterminate
+                    aria-valuetext="Pending"
+                    class="progress-circle"
+                ></sp-progress-circle>
+            `);
+      const renderedAttributes = progressCircle == null ? void 0 : progressCircle.attributes;
+      const expectedAttributes = expectedElement.attributes;
+      expect((renderedAttributes == null ? void 0 : renderedAttributes.length) === expectedAttributes.length).to.be.true;
+      if (renderedAttributes) {
+        for (let i = 0; i < renderedAttributes.length; i++) {
+          const renderedAttr = renderedAttributes[i];
+          const expectedAttr = expectedAttributes.getNamedItem(
+            renderedAttr.name
+          );
+          expect(renderedAttr.value === (expectedAttr == null ? void 0 : expectedAttr.value)).to.be.true;
+        }
+      }
+    });
+  });
+});
+//# sourceMappingURL=pending-state.test.js.map

package/test/pending-state.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["pending-state.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\n/*\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { expect, fixture, html } from '@open-wc/testing';\nimport {\n    HostWithPendingState,\n    PendingStateController,\n} from '@spectrum-web-components/reactive-controllers/src/PendingState.js';\n\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\n\ndescribe('PendingStateController', () => {\n    let host: HostWithPendingState;\n    let controller: PendingStateController<HostWithPendingState>;\n\n    beforeEach(async () => {\n        host = await fixture<HostWithPendingState>(html`\n            <sp-picker aria-label=\"clickable\" pending></sp-picker>\n        `);\n        controller = host.pendingStateController;\n    });\n\n    describe('renderPendingState', () => {\n        it('should change aria-label of host when pending and when not pending', async () => {\n            host = await fixture<HostWithPendingState>(html`\n                <sp-picker></sp-picker>\n            `);\n            controller = host.pendingStateController;\n\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n\n            let ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('Pending');\n\n            host.removeAttribute('pending');\n            await host.updateComplete;\n\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal(null);\n\n            host.setAttribute('aria-label', 'clickable');\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('clickable');\n            host.setAttribute('pending', 'true');\n\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('Pending');\n\n            host.removeAttribute('pending');\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('clickable');\n\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n            ariaLabel = host.getAttribute('aria-label');\n            expect(ariaLabel).to.equal('Pending');\n        });\n\n        it('should render the pending state UI', async () => {\n            const pendingLabel = 'Custom Pending Label';\n            host.pendingLabel = pendingLabel;\n            const templateResult = controller.renderPendingState();\n\n            const renderedElement = await fixture(html`\n                ${templateResult}\n            `);\n            const expectedElement = await fixture(html`\n                <sp-progress-circle\n                    id=\"loader\"\n                    size=\"s\"\n                    indeterminate\n                    aria-valuetext=${pendingLabel}\n                    class=\"progress-circle\"\n                ></sp-progress-circle>\n            `);\n\n            expect(renderedElement.outerHTML === expectedElement.outerHTML).to\n                .be.true;\n        });\n\n        it('should render the default pending state UI if no label is provided', async () => {\n            host.pendingLabel = undefined;\n            const templateResult = controller.renderPendingState();\n            const renderedElement = await fixture(html`\n                ${templateResult}\n            `);\n            const expectedElement = await fixture(html`\n                <sp-progress-circle\n                    id=\"loader\"\n                    size=\"s\"\n                    indeterminate\n                    aria-valuetext=\"Pending\"\n                    class=\"progress-circle\"\n                ></sp-progress-circle>\n            `);\n\n            const renderedAttributes = renderedElement.attributes;\n            const expectedAttributes = expectedElement.attributes;\n\n            expect(renderedAttributes.length === expectedAttributes.length).to\n                .be.true;\n\n            for (let i = 0; i < renderedAttributes.length; i++) {\n                const renderedAttr = renderedAttributes[i];\n                const expectedAttr = expectedAttributes.getNamedItem(\n                    renderedAttr.name\n                );\n\n                expect(renderedAttr.value === expectedAttr?.value).to.be.true;\n            }\n            expect(host.pending).to.be.true;\n        });\n\n        it('should toggle the pending state on and off and preserve the component state correctly', async () => {\n            // Set initial pending state to true\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n            let progressCircle =\n                host.shadowRoot?.querySelector('sp-progress-circle');\n            expect(progressCircle).to.not.be.null;\n            host.removeAttribute('pending');\n            await host.updateComplete;\n            progressCircle =\n                host.shadowRoot?.querySelector('sp-progress-circle');\n            expect(progressCircle).to.be.null;\n            host.setAttribute('pending', 'true');\n            await host.updateComplete;\n            progressCircle =\n                host.shadowRoot?.querySelector('sp-progress-circle');\n            expect(progressCircle).to.not.be.null;\n            const expectedElement = await fixture(html`\n                <sp-progress-circle\n                    id=\"loader\"\n                    size=\"s\"\n                    indeterminate\n                    aria-valuetext=\"Pending\"\n                    class=\"progress-circle\"\n                ></sp-progress-circle>\n            `);\n\n            const renderedAttributes = progressCircle?.attributes;\n            const expectedAttributes = expectedElement.attributes;\n            expect(renderedAttributes?.length === expectedAttributes.length).to\n                .be.true;\n            if (renderedAttributes) {\n                for (let i = 0; i < renderedAttributes.length; i++) {\n                    const renderedAttr = renderedAttributes[i];\n                    const expectedAttr = expectedAttributes.getNamedItem(\n                        renderedAttr.name\n                    );\n\n                    expect(renderedAttr.value === expectedAttr?.value).to.be\n                        .true;\n                }\n            }\n        });\n    });\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/test/roving-tabindex-integration.test.js

@@ -0,0 +1,244 @@
+"use strict";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/tabs/sp-tab-panel.js";
+import "@spectrum-web-components/tabs/sp-tab.js";
+import "@spectrum-web-components/tabs/sp-tabs.js";
+import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import { elementUpdated, expect, fixture, nextFrame } from "@open-wc/testing";
+import { html } from "@spectrum-web-components/base";
+import { sendKeys } from "@web/test-runner-commands";
+import { sendMouse } from "../../../test/plugins/browser.js";
+const createTabs = async () => {
+  const tabs = await fixture(html`
+        <sp-tabs selected="second">
+            <sp-tab label="Tab 1" value="first"></sp-tab>
+            <sp-tab label="Tab 2" value="second"></sp-tab>
+            <sp-tab label="Tab 3" value="third"></sp-tab>
+            <sp-tab-panel value="first">
+                <sp-action-group selects="single">
+                    <sp-action-button selected value="1">
+                        Single Button 1
+                    </sp-action-button>
+                    <sp-action-button value="2">
+                        Single Button 2
+                    </sp-action-button>
+                    <sp-action-button value="3">
+                        Single Button 3
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-tab-panel>
+            <sp-tab-panel value="second">
+                <sp-action-group selects="multiple">
+                    <sp-action-button value="1">
+                        Multiple Button 1
+                    </sp-action-button>
+                    <sp-action-button selected value="2">
+                        Multiple Button 2
+                    </sp-action-button>
+                    <sp-action-button selected value="3">
+                        Multiple Button 3
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-tab-panel>
+            <sp-tab-panel value="third">
+                <sp-action-group>
+                    <sp-action-button value="1">None Button 1</sp-action-button>
+                    <sp-action-button value="2">None Button 2</sp-action-button>
+                    <sp-action-button selected value="3">
+                        None Button 3
+                    </sp-action-button>
+                </sp-action-group>
+            </sp-tab-panel>
+        </sp-tabs>
+    `);
+  await elementUpdated(tabs);
+  return tabs;
+};
+const createGroup = async () => {
+  const group = await fixture(html`
+        <sp-action-group>
+            <sp-action-button>Button 1</sp-action-button>
+            <sp-action-button>Longer Button 2</sp-action-button>
+            <sp-action-button>Short 3</sp-action-button>
+            <sp-action-menu label="More Actions">
+                <sp-menu-item>One</sp-menu-item>
+                <sp-menu-item>Two</sp-menu-item>
+                <sp-menu-item>Three</sp-menu-item>
+                <sp-menu-item>
+                    Select some items
+                    <sp-menu slot="submenu" selects="multiple">
+                        <sp-menu-item>A</sp-menu-item>
+                        <sp-menu-item selected>B</sp-menu-item>
+                        <sp-menu-item>C</sp-menu-item>
+                    </sp-menu>
+                </sp-menu-item>
+            </sp-action-menu>
+        </sp-action-group>
+    `);
+  await elementUpdated(group);
+  return group;
+};
+describe("Action Group inside of Tabs", () => {
+  it("accurately navigates the desired element", async () => {
+    const el = await createTabs();
+    const tab1 = el.querySelector('sp-tab[value="first"]');
+    const tab2 = el.querySelector('sp-tab[value="second"]');
+    const tab3 = el.querySelector('sp-tab[value="third"]');
+    const tabPanel1 = el.querySelector(
+      'sp-tab-panel[value="first"]'
+    );
+    const tabPanel2 = el.querySelector(
+      'sp-tab-panel[value="second"]'
+    );
+    const tabPanel3 = el.querySelector(
+      'sp-tab-panel[value="third"]'
+    );
+    const actionGroup1 = tabPanel1.querySelector(
+      "sp-action-group"
+    );
+    const actionGroup2 = tabPanel2.querySelector(
+      "sp-action-group"
+    );
+    const actionGroup3 = tabPanel3.querySelector(
+      "sp-action-group"
+    );
+    const actionButton1 = actionGroup1.querySelector(
+      "[selected]"
+    );
+    const actionButton2 = actionGroup2.querySelector(
+      "[selected]"
+    );
+    const actionButton3 = actionGroup3.querySelector(
+      "[selected]"
+    );
+    el.focus();
+    expect(el.contains(document.activeElement)).to.be.true;
+    expect(document.activeElement === tab2).to.be.true;
+    actionGroup2.focus();
+    expect(document.activeElement === actionButton2).to.be.true;
+    await nextFrame();
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    expect(document.activeElement === tab1).to.be.false;
+    expect(actionGroup2.contains(document.activeElement)).to.be.true;
+    el.focus();
+    expect(document.activeElement === tab2).to.be.true;
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === tab3).to.be.true;
+    await sendKeys({
+      press: "Enter"
+    });
+    expect(document.activeElement === tab3).to.be.true;
+    actionGroup3.focus();
+    expect(document.activeElement === actionButton3).to.be.true;
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    expect(document.activeElement === tab2).to.be.false;
+    expect(actionGroup3.contains(document.activeElement)).to.be.true;
+    const boundingRect = tab1.getBoundingClientRect();
+    await sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: [
+            boundingRect.left + boundingRect.width / 2,
+            boundingRect.top + boundingRect.height / 2
+          ]
+        }
+      ]
+    });
+    expect(document.activeElement === tab1).to.be.true;
+    actionGroup1.focus();
+    expect(document.activeElement === actionButton1).to.be.true;
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === tab2).to.be.false;
+    expect(actionGroup1.contains(document.activeElement)).to.be.true;
+  });
+});
+describe("Action Menu inside of Action Group", () => {
+  it("accurately manages the tabindex of all the elements", async () => {
+    var _a, _b;
+    const el = await createGroup();
+    const actionButton1 = el.querySelector(
+      "sp-action-button:nth-child(1)"
+    );
+    const actionButton2 = el.querySelector(
+      "sp-action-button:nth-child(2)"
+    );
+    const actionButton3 = el.querySelector(
+      "sp-action-button:nth-child(3)"
+    );
+    const actionMenu = el.querySelector("sp-action-menu");
+    el.focus();
+    expect(document.activeElement === actionButton1).to.be.true;
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === actionButton2).to.be.true;
+    expect(actionButton2.tabIndex).to.equal(0);
+    expect(actionButton1.tabIndex).to.equal(-1);
+    expect(actionButton3.tabIndex).to.equal(-1);
+    expect(actionMenu.tabIndex).to.equal(-1);
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === actionButton3).to.be.true;
+    expect(actionButton3.tabIndex).to.equal(0);
+    expect(actionButton2.tabIndex).to.equal(-1);
+    expect(actionButton1.tabIndex).to.equal(-1);
+    expect(actionMenu.tabIndex).to.equal(-1);
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(document.activeElement === actionMenu).to.be.true;
+    expect(actionButton3.tabIndex).to.equal(-1);
+    expect(actionButton2.tabIndex).to.equal(-1);
+    expect(actionButton1.tabIndex).to.equal(-1);
+    expect((_a = actionMenu.shadowRoot) == null ? void 0 : _a.querySelector("sp-action-button")).to.exist;
+    expect(
+      ((_b = actionMenu.shadowRoot) == null ? void 0 : _b.querySelector(
+        "sp-action-button"
+      )).tabIndex
+    ).to.equal(0);
+  });
+});
+describe("tabIndex is cached properly", () => {
+  it("cache is managed properly", async () => {
+    var _a, _b, _c, _d, _e;
+    const menuEl = await fixture(html`
+            <sp-action-menu label="More Actions">
+                <sp-menu-item>One</sp-menu-item>
+                <sp-menu-item>Two</sp-menu-item>
+                <sp-menu-item>Three</sp-menu-item>
+            </sp-action-menu>
+        `);
+    expect(menuEl.tabIndex).to.equal(0);
+    expect((_a = menuEl.focusElement) == null ? void 0 : _a.tabIndex).to.equal(0);
+    menuEl.tabIndex = 1;
+    await elementUpdated(menuEl);
+    expect(menuEl.tabIndex).to.equal(1);
+    expect((_b = menuEl.focusElement) == null ? void 0 : _b.tabIndex).to.equal(1);
+    menuEl.disabled = true;
+    await elementUpdated(menuEl);
+    expect(menuEl.tabIndex).to.equal(-1);
+    expect((_c = menuEl.focusElement) == null ? void 0 : _c.tabIndex).to.equal(-1);
+    menuEl.tabIndex = 2;
+    await elementUpdated(menuEl);
+    expect(menuEl.tabIndex).to.equal(-1);
+    expect((_d = menuEl.focusElement) == null ? void 0 : _d.tabIndex).to.equal(-1);
+    menuEl.disabled = false;
+    await elementUpdated(menuEl);
+    expect(menuEl.tabIndex).to.equal(2);
+    expect((_e = menuEl.focusElement) == null ? void 0 : _e.tabIndex).to.equal(2);
+  });
+});
+//# sourceMappingURL=roving-tabindex-integration.test.js.map

package/test/roving-tabindex-integration.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["roving-tabindex-integration.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ActionButton } from '@spectrum-web-components/action-button';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/tabs/sp-tab-panel.js';\nimport '@spectrum-web-components/tabs/sp-tab.js';\nimport '@spectrum-web-components/tabs/sp-tabs.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport { Tab, TabPanel, Tabs } from '@spectrum-web-components/tabs';\nimport { elementUpdated, expect, fixture, nextFrame } from '@open-wc/testing';\nimport { html } from '@spectrum-web-components/base';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nconst createTabs = async (): Promise<Tabs> => {\n    const tabs = await fixture<Tabs>(html`\n        <sp-tabs selected=\"second\">\n            <sp-tab label=\"Tab 1\" value=\"first\"></sp-tab>\n            <sp-tab label=\"Tab 2\" value=\"second\"></sp-tab>\n            <sp-tab label=\"Tab 3\" value=\"third\"></sp-tab>\n            <sp-tab-panel value=\"first\">\n                <sp-action-group selects=\"single\">\n                    <sp-action-button selected value=\"1\">\n                        Single Button 1\n                    </sp-action-button>\n                    <sp-action-button value=\"2\">\n                        Single Button 2\n                    </sp-action-button>\n                    <sp-action-button value=\"3\">\n                        Single Button 3\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-tab-panel>\n            <sp-tab-panel value=\"second\">\n                <sp-action-group selects=\"multiple\">\n                    <sp-action-button value=\"1\">\n                        Multiple Button 1\n                    </sp-action-button>\n                    <sp-action-button selected value=\"2\">\n                        Multiple Button 2\n                    </sp-action-button>\n                    <sp-action-button selected value=\"3\">\n                        Multiple Button 3\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-tab-panel>\n            <sp-tab-panel value=\"third\">\n                <sp-action-group>\n                    <sp-action-button value=\"1\">None Button 1</sp-action-button>\n                    <sp-action-button value=\"2\">None Button 2</sp-action-button>\n                    <sp-action-button selected value=\"3\">\n                        None Button 3\n                    </sp-action-button>\n                </sp-action-group>\n            </sp-tab-panel>\n        </sp-tabs>\n    `);\n    await elementUpdated(tabs);\n    return tabs;\n};\n\nconst createGroup = async (): Promise<ActionGroup> => {\n    const group = await fixture<ActionGroup>(html`\n        <sp-action-group>\n            <sp-action-button>Button 1</sp-action-button>\n            <sp-action-button>Longer Button 2</sp-action-button>\n            <sp-action-button>Short 3</sp-action-button>\n            <sp-action-menu label=\"More Actions\">\n                <sp-menu-item>One</sp-menu-item>\n                <sp-menu-item>Two</sp-menu-item>\n                <sp-menu-item>Three</sp-menu-item>\n                <sp-menu-item>\n                    Select some items\n                    <sp-menu slot=\"submenu\" selects=\"multiple\">\n                        <sp-menu-item>A</sp-menu-item>\n                        <sp-menu-item selected>B</sp-menu-item>\n                        <sp-menu-item>C</sp-menu-item>\n                    </sp-menu>\n                </sp-menu-item>\n            </sp-action-menu>\n        </sp-action-group>\n    `);\n    await elementUpdated(group);\n    return group;\n};\n\ndescribe('Action Group inside of Tabs', () => {\n    it('accurately navigates the desired element', async () => {\n        const el = await createTabs();\n        const tab1 = el.querySelector('sp-tab[value=\"first\"]') as Tab;\n        const tab2 = el.querySelector('sp-tab[value=\"second\"]');\n        const tab3 = el.querySelector('sp-tab[value=\"third\"]') as Tab;\n        const tabPanel1 = el.querySelector(\n            'sp-tab-panel[value=\"first\"]'\n        ) as TabPanel;\n        const tabPanel2 = el.querySelector(\n            'sp-tab-panel[value=\"second\"]'\n        ) as TabPanel;\n        const tabPanel3 = el.querySelector(\n            'sp-tab-panel[value=\"third\"]'\n        ) as TabPanel;\n        const actionGroup1 = tabPanel1.querySelector(\n            'sp-action-group'\n        ) as ActionGroup;\n        const actionGroup2 = tabPanel2.querySelector(\n            'sp-action-group'\n        ) as ActionGroup;\n        const actionGroup3 = tabPanel3.querySelector(\n            'sp-action-group'\n        ) as ActionGroup;\n        const actionButton1 = actionGroup1.querySelector(\n            '[selected]'\n        ) as ActionButton;\n        const actionButton2 = actionGroup2.querySelector(\n            '[selected]'\n        ) as ActionButton;\n        const actionButton3 = actionGroup3.querySelector(\n            '[selected]'\n        ) as ActionButton;\n\n        el.focus();\n        expect(el.contains(document.activeElement)).to.be.true;\n        expect(document.activeElement === tab2).to.be.true;\n\n        actionGroup2.focus();\n        expect(document.activeElement === actionButton2).to.be.true;\n\n        await nextFrame();\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n\n        expect(document.activeElement === tab1).to.be.false;\n        expect(actionGroup2.contains(document.activeElement)).to.be.true;\n\n        el.focus();\n        expect(document.activeElement === tab2).to.be.true;\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n\n        expect(document.activeElement === tab3).to.be.true;\n\n        await sendKeys({\n            press: 'Enter',\n        });\n\n        expect(document.activeElement === tab3).to.be.true;\n\n        actionGroup3.focus();\n        expect(document.activeElement === actionButton3).to.be.true;\n\n        await sendKeys({\n            press: 'ArrowLeft',\n        });\n\n        expect(document.activeElement === tab2).to.be.false;\n        expect(actionGroup3.contains(document.activeElement)).to.be.true;\n\n        const boundingRect = tab1.getBoundingClientRect();\n        // tab1.click() doesn't current reach into the focus management here.\n        await sendMouse({\n            steps: [\n                {\n                    type: 'click',\n                    position: [\n                        boundingRect.left + boundingRect.width / 2,\n                        boundingRect.top + boundingRect.height / 2,\n                    ],\n                },\n            ],\n        });\n        expect(document.activeElement === tab1).to.be.true;\n\n        actionGroup1.focus();\n        expect(document.activeElement === actionButton1).to.be.true;\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n\n        expect(document.activeElement === tab2).to.be.false;\n        expect(actionGroup1.contains(document.activeElement)).to.be.true;\n    });\n});\n\ndescribe('Action Menu inside of Action Group', () => {\n    it('accurately manages the tabindex of all the elements', async () => {\n        const el = await createGroup();\n        const actionButton1 = el.querySelector(\n            'sp-action-button:nth-child(1)'\n        ) as ActionButton;\n        const actionButton2 = el.querySelector(\n            'sp-action-button:nth-child(2)'\n        ) as ActionButton;\n        const actionButton3 = el.querySelector(\n            'sp-action-button:nth-child(3)'\n        ) as ActionButton;\n        const actionMenu = el.querySelector('sp-action-menu') as ActionMenu;\n\n        el.focus();\n        expect(document.activeElement === actionButton1).to.be.true;\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n\n        expect(document.activeElement === actionButton2).to.be.true;\n\n        // expect the focused element to have a tabindex of 0 and everyone else to be -1\n        expect(actionButton2.tabIndex).to.equal(0);\n        expect(actionButton1.tabIndex).to.equal(-1);\n        expect(actionButton3.tabIndex).to.equal(-1);\n        expect(actionMenu.tabIndex).to.equal(-1);\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n\n        expect(document.activeElement === actionButton3).to.be.true;\n\n        // expect the focused element to have a tabindex of 0 and everyone else to be -1\n        expect(actionButton3.tabIndex).to.equal(0);\n        expect(actionButton2.tabIndex).to.equal(-1);\n        expect(actionButton1.tabIndex).to.equal(-1);\n        expect(actionMenu.tabIndex).to.equal(-1);\n\n        await sendKeys({\n            press: 'ArrowRight',\n        });\n\n        expect(document.activeElement === actionMenu).to.be.true;\n\n        // expect the action-button inside of the shadow root of the action-menu to have a tabindex of 0 and everyone else to be -1\n        expect(actionButton3.tabIndex).to.equal(-1);\n        expect(actionButton2.tabIndex).to.equal(-1);\n        expect(actionButton1.tabIndex).to.equal(-1);\n        expect(actionMenu.shadowRoot?.querySelector('sp-action-button')).to\n            .exist;\n        expect(\n            (\n                actionMenu.shadowRoot?.querySelector(\n                    'sp-action-button'\n                ) as ActionButton\n            ).tabIndex\n        ).to.equal(0);\n    });\n});\n\ndescribe('tabIndex is cached properly', () => {\n    it('cache is managed properly', async () => {\n        const menuEl = await fixture<ActionMenu>(html`\n            <sp-action-menu label=\"More Actions\">\n                <sp-menu-item>One</sp-menu-item>\n                <sp-menu-item>Two</sp-menu-item>\n                <sp-menu-item>Three</sp-menu-item>\n            </sp-action-menu>\n        `);\n\n        expect(menuEl.tabIndex).to.equal(0);\n        expect(menuEl.focusElement?.tabIndex).to.equal(0);\n\n        menuEl.tabIndex = 1;\n\n        await elementUpdated(menuEl);\n\n        expect(menuEl.tabIndex).to.equal(1);\n        expect(menuEl.focusElement?.tabIndex).to.equal(1);\n\n        menuEl.disabled = true;\n\n        await elementUpdated(menuEl);\n\n        expect(menuEl.tabIndex).to.equal(-1);\n        expect(menuEl.focusElement?.tabIndex).to.equal(-1);\n\n        menuEl.tabIndex = 2;\n\n        await elementUpdated(menuEl);\n\n        expect(menuEl.tabIndex).to.equal(-1);\n        expect(menuEl.focusElement?.tabIndex).to.equal(-1);\n\n        menuEl.disabled = false;\n\n        await elementUpdated(menuEl);\n\n        expect(menuEl.tabIndex).to.equal(2);\n        expect(menuEl.focusElement?.tabIndex).to.equal(2);\n    });\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/test/roving-tabindex.test.js

@@ -0,0 +1,19 @@
+"use strict";
+import { LitElement } from "lit";
+import { expect } from "@open-wc/testing";
+import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
+describe("RovingTabindex", () => {
+  it("constructs with defaults", async () => {
+    class TestEl extends LitElement {
+    }
+    customElements.define("test-roving-tabindex-el", TestEl);
+    const el = new TestEl();
+    const controller = new RovingTabindexController(
+      el
+    );
+    expect(controller.direction).to.equal("both");
+    expect(controller.focusInIndex).to.equal(0);
+    expect(controller.isFocusableElement(el)).to.be.true;
+  });
+});
+//# sourceMappingURL=roving-tabindex.test.js.map

package/test/roving-tabindex.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["roving-tabindex.test.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { LitElement } from 'lit';\nimport { expect } from '@open-wc/testing';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\ndescribe('RovingTabindex', () => {\n    it('constructs with defaults', async () => {\n        class TestEl extends LitElement {}\n        customElements.define('test-roving-tabindex-el', TestEl);\n        const el = new TestEl();\n        const controller = new RovingTabindexController(\n            el as LitElement & { shadowRoot: ShadowRoot }\n        );\n        expect(controller.direction).to.equal('both');\n        expect(controller.focusInIndex).to.equal(0);\n        expect(controller.isFocusableElement(el)).to.be.true;\n    });\n});\n"],
+  "mappings": ";AAYA,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB,MAAM;AAC7B,KAAG,4BAA4B,YAAY;AAAA,IACvC,MAAM,eAAe,WAAW;AAAA,IAAC;AACjC,mBAAe,OAAO,2BAA2B,MAAM;AACvD,UAAM,KAAK,IAAI,OAAO;AACtB,UAAM,aAAa,IAAI;AAAA,MACnB;AAAA,IACJ;AACA,WAAO,WAAW,SAAS,EAAE,GAAG,MAAM,MAAM;AAC5C,WAAO,WAAW,YAAY,EAAE,GAAG,MAAM,CAAC;AAC1C,WAAO,WAAW,mBAAmB,EAAE,CAAC,EAAE,GAAG,GAAG;AAAA,EACpD,CAAC;AACL,CAAC;",
+  "names": []
+}