@spectrum-web-components/tabs 0.9.0 → 0.9.2

package/test/tabs.test.js

@@ -1,4 +1,30 @@
-import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components/tabs/sp-tab.js";import"@spectrum-web-components/tabs/sp-tab-panel.js";import{Tab as u}from"@spectrum-web-components/tabs";import"@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";import{elementUpdated as s,expect as t,fixture as b,oneEvent as y,waitUntil as E}from"@open-wc/testing";import{html as o}from"lit/static-html.js";import{LitElement as S}from"@spectrum-web-components/base";import{arrowDownEvent as g,arrowLeftEvent as f,arrowRightEvent as m,arrowUpEvent as w,enterEvent as v,spaceEvent as T}from"../../../test/testing-helpers.js";import{sendKeys as h}from"@web/test-runner-commands";const d=async()=>{const e=await b(o`
+"use strict";
+import "@spectrum-web-components/tabs/sp-tabs.js";
+import "@spectrum-web-components/tabs/sp-tab.js";
+import "@spectrum-web-components/tabs/sp-tab-panel.js";
+import { Tab } from "@spectrum-web-components/tabs";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+import { html } from "lit/static-html.js";
+import { LitElement } from "@spectrum-web-components/base";
+import {
+  arrowDownEvent,
+  arrowLeftEvent,
+  arrowRightEvent,
+  arrowUpEvent,
+  enterEvent,
+  spaceEvent
+} from "../../../test/testing-helpers.js";
+import { sendKeys } from "@web/test-runner-commands";
+const createTabs = async () => {
+  const tabs = await fixture(
+    html`
             <sp-tabs selected="first">
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <sp-tab label="Tab 2" value="second"></sp-tab>
@@ -7,47 +33,270 @@ import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components
                 <sp-tab-panel value="second">Second tab content</sp-tab-panel>
                 <sp-tab-panel value="third">Third tab content</sp-tab-panel>
             </sp-tabs>
-        `);return await s(e),e};describe("Tabs",()=>{it("loads accessibly",async()=>{const e=await d(),a=e.querySelectorAll("sp-tab");t(a).to.exist,t(a.length).to.equal(3),await t(e).to.be.accessible()}),it("loads accessibly w/o panels",async()=>{const e=await b(o`
+        `
+  );
+  await elementUpdated(tabs);
+  return tabs;
+};
+describe("Tabs", () => {
+  it("loads accessibly", async () => {
+    const tabs = await createTabs();
+    const tabList = tabs.querySelectorAll("sp-tab");
+    expect(tabList).to.exist;
+    expect(tabList.length).to.equal(3);
+    await expect(tabs).to.be.accessible();
+  });
+  it("loads accessibly w/o panels", async () => {
+    const tabs = await fixture(
+      html`
                 <sp-tabs selected="first">
                     <sp-tab value="first">Tab 1</sp-tab>
                     <sp-tab value="second">Tab 2</sp-tab>
                     <sp-tab value="third">Tab 3</sp-tab>
                 </sp-tabs>
-            `),a=e.querySelectorAll("sp-tab");t(a).to.exist,t(a.length).to.equal(3),await t(e).to.be.accessible()}),it("can be disabled",async()=>{const e=await d(),a=e.querySelector('[label="Tab 3"]');e.disabled=!0,await s(e),t(e.selected).to.equal("first"),a.click(),await s(e),t(e.selected).to.equal("first")}),it("can have disabled sp-tab children",async()=>{const e=await d(),a=e.querySelector('[label="Tab 2"]'),c=e.querySelector('[label="Tab 3"]');c.disabled=!0,await s(c),t(e.selected).to.equal("first"),c.click(),await s(e),t(e.selected).to.equal("first"),a.click(),await s(e),t(e.selected).to.equal("second")}),it("reflects selected tab with selected property",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]"),l=e.querySelector("sp-tab[value=third]"),n=e.querySelector("sp-tab-panel[value=first]"),i=e.querySelector("sp-tab-panel[value=second]"),r=e.querySelector("sp-tab-panel[value=third]");t(a.selected,"first: 1, selected").to.be.true,t(n.selected,"first panel: 1, selected").to.be.true,t(c.selected,"second: 1, not selected").to.be.false,t(i.selected,"second panel: 1, not selected").to.be.false,t(l.selected,"third: 1, not selected").to.be.false,t(r.selected,"third panel: 1, not selected").to.be.false,t(e.selected).to.equal(a.value),c.click(),await s(e),t(a.selected,"first: 2, not selected").to.be.false,t(n.selected,"first panel: 2, not selected").to.be.false,t(c.selected,"second: 2, selected").to.be.true,t(c.selected,"first panel: 2, selected").to.be.true,t(l.selected,"third: 2, not selected").to.be.false,t(l.selected,"first panel: 2, not selected").to.be.false,t(e.selected).to.equal(c.value),l.click(),await s(e),t(a.selected,"first: 3, not selected").to.be.false,t(n.selected,"first panel: 3, not selected").to.be.false,t(c.selected,"second: 3, not selected").to.be.false,t(i.selected,"second panel: 3, not selected").to.be.false,t(l.selected,"third: 3, selected").to.be.true,t(l.selected,"first panel: 3, selected").to.be.true,t(e.selected).to.equal(l.value)}),it("autofocuses",async()=>{const e=await b(o`
+            `
+    );
+    const tabList = tabs.querySelectorAll("sp-tab");
+    expect(tabList).to.exist;
+    expect(tabList.length).to.equal(3);
+    await expect(tabs).to.be.accessible();
+  });
+  it("can be disabled", async () => {
+    const tabs = await createTabs();
+    const tab = tabs.querySelector('[label="Tab 3"]');
+    tabs.disabled = true;
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("first");
+    tab.click();
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("first");
+  });
+  it("can have disabled sp-tab children", async () => {
+    const tabs = await createTabs();
+    const tab2 = tabs.querySelector('[label="Tab 2"]');
+    const tab3 = tabs.querySelector('[label="Tab 3"]');
+    tab3.disabled = true;
+    await elementUpdated(tab3);
+    expect(tabs.selected).to.equal("first");
+    tab3.click();
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("first");
+    tab2.click();
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("second");
+  });
+  it("reflects selected tab with selected property", async () => {
+    const tabs = await createTabs();
+    const firstTab = tabs.querySelector("sp-tab[value=first]");
+    const secondTab = tabs.querySelector("sp-tab[value=second]");
+    const thirdTab = tabs.querySelector("sp-tab[value=third]");
+    const firstPanel = tabs.querySelector(
+      "sp-tab-panel[value=first]"
+    );
+    const secondPanel = tabs.querySelector(
+      "sp-tab-panel[value=second]"
+    );
+    const thirdPanel = tabs.querySelector(
+      "sp-tab-panel[value=third]"
+    );
+    expect(firstTab.selected, "first: 1, selected").to.be.true;
+    expect(firstPanel.selected, "first panel: 1, selected").to.be.true;
+    expect(secondTab.selected, "second: 1, not selected").to.be.false;
+    expect(secondPanel.selected, "second panel: 1, not selected").to.be.false;
+    expect(thirdTab.selected, "third: 1, not selected").to.be.false;
+    expect(thirdPanel.selected, "third panel: 1, not selected").to.be.false;
+    expect(tabs.selected).to.equal(firstTab.value);
+    secondTab.click();
+    await elementUpdated(tabs);
+    expect(firstTab.selected, "first: 2, not selected").to.be.false;
+    expect(firstPanel.selected, "first panel: 2, not selected").to.be.false;
+    expect(secondTab.selected, "second: 2, selected").to.be.true;
+    expect(secondTab.selected, "first panel: 2, selected").to.be.true;
+    expect(thirdTab.selected, "third: 2, not selected").to.be.false;
+    expect(thirdTab.selected, "first panel: 2, not selected").to.be.false;
+    expect(tabs.selected).to.equal(secondTab.value);
+    thirdTab.click();
+    await elementUpdated(tabs);
+    expect(firstTab.selected, "first: 3, not selected").to.be.false;
+    expect(firstPanel.selected, "first panel: 3, not selected").to.be.false;
+    expect(secondTab.selected, "second: 3, not selected").to.be.false;
+    expect(secondPanel.selected, "second panel: 3, not selected").to.be.false;
+    expect(thirdTab.selected, "third: 3, selected").to.be.true;
+    expect(thirdTab.selected, "first panel: 3, selected").to.be.true;
+    expect(tabs.selected).to.equal(thirdTab.value);
+  });
+  it("autofocuses", async () => {
+    const tabs = await fixture(
+      html`
                 <sp-tabs selected="second" autofocus>
                     <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-tabs>
-            `);await s(e);const a=e.querySelector('[label="Tab 2"]');await E(()=>document.activeElement===a,"Autofocused")}),it("auto",async()=>{const e=await b(o`
+            `
+    );
+    await elementUpdated(tabs);
+    const autoElement = tabs.querySelector('[label="Tab 2"]');
+    await waitUntil(
+      () => document.activeElement === autoElement,
+      "Autofocused"
+    );
+  });
+  it("auto", async () => {
+    const el = await fixture(
+      html`
                 <sp-tabs selected="second" auto>
                     <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-tabs>
-            `);await s(e),t(e.selected).to.equal("second"),e.focus(),await h({press:"ArrowLeft"}),t(e.selected).to.equal("first"),await h({press:"ArrowLeft"}),t(e.selected).to.equal("third"),await h({press:"ArrowRight"}),t(e.selected).to.equal("first")}),it("forces only one tab to be selected",async()=>{const e=await d(),a=e.querySelectorAll("sp-tab[selected]");t(e.selected).to.equal("first"),t(a.length).to.equal(1)}),it("de-selects all but first selected tab if multiple selected",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]");if(!(a instanceof u))throw new Error("tab1 not of type Tab");if(!(c instanceof u))throw new Error("tab2 not of type Tab");t(e.selected).to.equal("first"),t(a.selected).to.be.true,t(c.selected).to.be.false}),it("ensures setting selection updates selected tab",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]"),l=e.querySelector("sp-tab[value=third]");if(!(a instanceof u))throw new Error("tab1 not of type Tab");if(!(c instanceof u))throw new Error("tab2 not of type Tab");if(!(l instanceof u))throw new Error("tab3 not of type Tab");t(e.selected).to.equal("first"),t(a.selected,"first: 1, selected").to.be.true,t(c.selected,"second: 1, not selected").to.be.false,t(l.selected,"thurd: 1, not selected").to.be.false,e.selected="second",await s(e),t(e.selected).to.equal("second"),t(a.selected,"first: 2, not selected").to.be.false,t(c.selected,"second: 2, selected").to.be.true,t(l.selected,"third: 2, not selected").to.be.false,e.selected="third",await s(e),t(e.selected).to.equal("third"),t(a.selected,"first: 3, not selected").to.be.false,t(c.selected,"second: 3, not selected").to.be.false,t(l.selected,"third: 3, selected").to.be.true}),it("ensures setting selected and clicking on tab both work together",async()=>{const e=await d(),a=e.querySelector("sp-tab[value=first]"),c=e.querySelector("sp-tab[value=second]"),l=e.querySelector("sp-tab[value=third]");if(!(a instanceof u))throw new Error("tab1 not of type Tab");if(!(c instanceof u))throw new Error("tab2 not of type Tab");if(!(l instanceof u))throw new Error("tab3 not of type Tab");c.click(),await s(e),t(e.selected).to.equal("second"),t(a.selected).to.be.false,t(c.selected).to.be.true,t(l.selected).to.be.false,e.selected="first",await s(e),t(e.selected).to.equal("first"),t(a.selected).to.be.true,t(c.selected).to.be.false,t(l.selected).to.be.false}),it("displays `vertical`",async()=>{const e=await b(o`
+            `
+    );
+    await elementUpdated(el);
+    expect(el.selected).to.equal("second");
+    el.focus();
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    expect(el.selected).to.equal("first");
+    await sendKeys({
+      press: "ArrowLeft"
+    });
+    expect(el.selected).to.equal("third");
+    await sendKeys({
+      press: "ArrowRight"
+    });
+    expect(el.selected).to.equal("first");
+  });
+  it("forces only one tab to be selected", async () => {
+    const tabs = await createTabs();
+    const selectedTabs = tabs.querySelectorAll("sp-tab[selected]");
+    expect(tabs.selected).to.equal("first");
+    expect(selectedTabs.length).to.equal(1);
+  });
+  it("de-selects all but first selected tab if multiple selected", async () => {
+    const tabs = await createTabs();
+    const tab1 = tabs.querySelector("sp-tab[value=first]");
+    const tab2 = tabs.querySelector("sp-tab[value=second]");
+    if (!(tab1 instanceof Tab))
+      throw new Error("tab1 not of type Tab");
+    if (!(tab2 instanceof Tab))
+      throw new Error("tab2 not of type Tab");
+    expect(tabs.selected).to.equal("first");
+    expect(tab1.selected).to.be.true;
+    expect(tab2.selected).to.be.false;
+  });
+  it("ensures setting selection updates selected tab", async () => {
+    const tabs = await createTabs();
+    const tab1 = tabs.querySelector("sp-tab[value=first]");
+    const tab2 = tabs.querySelector("sp-tab[value=second]");
+    const tab3 = tabs.querySelector("sp-tab[value=third]");
+    if (!(tab1 instanceof Tab))
+      throw new Error("tab1 not of type Tab");
+    if (!(tab2 instanceof Tab))
+      throw new Error("tab2 not of type Tab");
+    if (!(tab3 instanceof Tab))
+      throw new Error("tab3 not of type Tab");
+    expect(tabs.selected).to.equal("first");
+    expect(tab1.selected, "first: 1, selected").to.be.true;
+    expect(tab2.selected, "second: 1, not selected").to.be.false;
+    expect(tab3.selected, "thurd: 1, not selected").to.be.false;
+    tabs.selected = "second";
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("second");
+    expect(tab1.selected, "first: 2, not selected").to.be.false;
+    expect(tab2.selected, "second: 2, selected").to.be.true;
+    expect(tab3.selected, "third: 2, not selected").to.be.false;
+    tabs.selected = "third";
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("third");
+    expect(tab1.selected, "first: 3, not selected").to.be.false;
+    expect(tab2.selected, "second: 3, not selected").to.be.false;
+    expect(tab3.selected, "third: 3, selected").to.be.true;
+  });
+  it("ensures setting selected and clicking on tab both work together", async () => {
+    const tabs = await createTabs();
+    const tab1 = tabs.querySelector("sp-tab[value=first]");
+    const tab2 = tabs.querySelector("sp-tab[value=second]");
+    const tab3 = tabs.querySelector("sp-tab[value=third]");
+    if (!(tab1 instanceof Tab))
+      throw new Error("tab1 not of type Tab");
+    if (!(tab2 instanceof Tab))
+      throw new Error("tab2 not of type Tab");
+    if (!(tab3 instanceof Tab))
+      throw new Error("tab3 not of type Tab");
+    tab2.click();
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("second");
+    expect(tab1.selected).to.be.false;
+    expect(tab2.selected).to.be.true;
+    expect(tab3.selected).to.be.false;
+    tabs.selected = "first";
+    await elementUpdated(tabs);
+    expect(tabs.selected).to.equal("first");
+    expect(tab1.selected).to.be.true;
+    expect(tab2.selected).to.be.false;
+    expect(tab3.selected).to.be.false;
+  });
+  it("displays `vertical`", async () => {
+    const el = await fixture(html`
             <sp-tabs selected="first" direction="vertical">
                 <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-tabs>
-        `);await s(e),t(e.selected).to.be.equal("first"),e.selected="first",await s(e),t(e.selected).to.be.equal("first")}),it("displays with nothing `selected`",async()=>{const e=await b(o`
+        `);
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+    el.selected = "first";
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+  });
+  it("displays with nothing `selected`", async () => {
+    const el = await fixture(html`
             <sp-tabs>
                 <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-tabs>
-        `);await s(e),t(e.selected).to.be.equal(""),e.selected="first",await s(e),t(e.selected).to.be.equal("first")}),it("ignores children with no `value`",async()=>{const e=await b(o`
+        `);
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("");
+    el.selected = "first";
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+  });
+  it("ignores children with no `value`", async () => {
+    const el = await fixture(html`
             <sp-tabs selected="first">
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <div id="other">Other thing</div>
             </sp-tabs>
-        `);await s(e),t(e.selected).to.be.equal("first"),e.querySelector("#other").click(),await s(e),t(e.selected).to.be.equal("first")}),it("allows selection to be cancellable",async()=>{const a=await b(o`
-            <sp-tabs selected="first" @change=${l=>l.preventDefault()}>
+        `);
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+    const otherThing = el.querySelector("#other");
+    otherThing.click();
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+  });
+  it("allows selection to be cancellable", async () => {
+    const cancelSelection = (event) => event.preventDefault();
+    const el = await fixture(html`
+            <sp-tabs selected="first" @change=${cancelSelection}>
                 <sp-tab label="Tab 1" value="first"></sp-tab>
                 <sp-tab label="Tab 2" value="second"></sp-tab>
             </sp-tabs>
-        `);await s(a),t(a.selected).to.be.equal("first"),a.querySelector('[value="second"]').click(),await s(a),t(a.selected).to.be.equal("first")}),it("prevents [tabindex=0] while `focusin`",async()=>{const e=await b(o`
+        `);
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+    const secondTab = el.querySelector('[value="second"]');
+    secondTab.click();
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+  });
+  it("prevents [tabindex=0] while `focusin`", async () => {
+    const el = await fixture(html`
             <sp-tabs>
                 <sp-tab label="Tab 1" value="first" selected>
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -56,7 +305,28 @@ import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                 </sp-tab>
             </sp-tabs>
-        `),a=e.querySelector('[value="first"]'),c=e.querySelector('[value="second"]');await s(e),await E(()=>e.selected==="first","wait for selection"),t(e.selected).to.equal("first"),t(a.tabIndex).to.equal(0),c.dispatchEvent(new Event("focusin",{bubbles:!0})),await s(e),t(e.selected).to.equal("first"),t(a.tabIndex).to.equal(-1),c.dispatchEvent(new Event("focusout",{bubbles:!0})),await s(e),t(e.selected).to.equal("first"),t(a.tabIndex).to.equal(0),c.click(),await s(e),t(e.selected).to.equal("second"),t(c.tabIndex).to.equal(0)}),it("accepts keyboard based selection",async()=>{const e=await b(o`
+        `);
+    const selected = el.querySelector('[value="first"]');
+    const toBeSelected = el.querySelector('[value="second"]');
+    await elementUpdated(el);
+    await waitUntil(() => el.selected === "first", "wait for selection");
+    expect(el.selected).to.equal("first");
+    expect(selected.tabIndex).to.equal(0);
+    toBeSelected.dispatchEvent(new Event("focusin", { bubbles: true }));
+    await elementUpdated(el);
+    expect(el.selected).to.equal("first");
+    expect(selected.tabIndex).to.equal(-1);
+    toBeSelected.dispatchEvent(new Event("focusout", { bubbles: true }));
+    await elementUpdated(el);
+    expect(el.selected).to.equal("first");
+    expect(selected.tabIndex).to.equal(0);
+    toBeSelected.click();
+    await elementUpdated(el);
+    expect(el.selected).to.equal("second");
+    expect(toBeSelected.tabIndex).to.equal(0);
+  });
+  it("accepts keyboard based selection", async () => {
+    const el = await fixture(html`
             <sp-tabs selected="Unknown">
                 <sp-tab label="Tab 1" value="first">
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -65,7 +335,33 @@ import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                 </sp-tab>
             </sp-tabs>
-        `);await s(e),t(e.selected).to.be.equal("");const a=e.querySelector('[value="first"]'),c=e.querySelector('[value="second"]');a.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),a.focus(),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(f()),a.dispatchEvent(w()),await s(e),t(document.activeElement===c,"Focus second tab").to.be.true,c.dispatchEvent(v()),await s(e),t(e.selected).to.be.equal("second"),c.dispatchEvent(m()),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(T()),await s(e),t(e.selected).to.be.equal("first")}),it("accepts keyboard based selection through shadow DOM",async()=>{class e extends S{render(){return o`
+        `);
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("");
+    const firstTab = el.querySelector('[value="first"]');
+    const secondTab = el.querySelector('[value="second"]');
+    firstTab.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+    firstTab.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
+    firstTab.dispatchEvent(arrowLeftEvent());
+    firstTab.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === secondTab, "Focus second tab").to.be.true;
+    secondTab.dispatchEvent(enterEvent());
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("second");
+    secondTab.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
+    firstTab.dispatchEvent(spaceEvent());
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+  });
+  it("accepts keyboard based selection through shadow DOM", async () => {
+    class TabTestEl extends LitElement {
+      render() {
+        return html`
                     <sp-tabs selected="Unknown">
                         <sp-tab label="Tab 1" value="first">
                             <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -74,9 +370,45 @@ import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components
                             <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                         </sp-tab>
                     </sp-tabs>
-                `}}customElements.define("tab-test-el",e);const a=await b(o`
+                `;
+      }
+    }
+    customElements.define("tab-test-el", TabTestEl);
+    const el = await fixture(
+      html`
                 <tab-test-el></tab-test-el>
-            `);await s(a);const c=a.shadowRoot,l=c.querySelector("sp-tabs");await s(l),t(l.selected).to.be.equal("");const n=l.querySelector('[value="first"]'),i=l.querySelector('[value="second"]');n.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),n.focus(),await s(a);let r=c.activeElement;t(r===n,"Focus first tab").to.be.true,n.dispatchEvent(f()),n.dispatchEvent(w()),await s(a),r=c.activeElement,t(r===i,"Focus second tab").to.be.true,i.dispatchEvent(v()),await s(a),t(l.selected).to.be.equal("second"),i.dispatchEvent(m()),await s(a),r=c.activeElement,t(r===n,"Focus first tab").to.be.true,n.dispatchEvent(T()),await s(a),t(l.selected).to.be.equal("first")}),it('accepts keyboard based selection - [direction="vertical"]',async()=>{const e=await b(o`
+            `
+    );
+    await elementUpdated(el);
+    const rootNode = el.shadowRoot;
+    const tabsEl = rootNode.querySelector("sp-tabs");
+    await elementUpdated(tabsEl);
+    expect(tabsEl.selected).to.be.equal("");
+    const firstTab = tabsEl.querySelector('[value="first"]');
+    const secondTab = tabsEl.querySelector('[value="second"]');
+    firstTab.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+    firstTab.focus();
+    await elementUpdated(el);
+    let activeElement = rootNode.activeElement;
+    expect(activeElement === firstTab, "Focus first tab").to.be.true;
+    firstTab.dispatchEvent(arrowLeftEvent());
+    firstTab.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    activeElement = rootNode.activeElement;
+    expect(activeElement === secondTab, "Focus second tab").to.be.true;
+    secondTab.dispatchEvent(enterEvent());
+    await elementUpdated(el);
+    expect(tabsEl.selected).to.be.equal("second");
+    secondTab.dispatchEvent(arrowRightEvent());
+    await elementUpdated(el);
+    activeElement = rootNode.activeElement;
+    expect(activeElement === firstTab, "Focus first tab").to.be.true;
+    firstTab.dispatchEvent(spaceEvent());
+    await elementUpdated(el);
+    expect(tabsEl.selected).to.be.equal("first");
+  });
+  it('accepts keyboard based selection - [direction="vertical"]', async () => {
+    const el = await fixture(html`
             <sp-tabs selected="Unknown" direction="vertical">
                 <sp-tab label="Tab 1" value="first">
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
@@ -85,15 +417,94 @@ import"@spectrum-web-components/tabs/sp-tabs.js";import"@spectrum-web-components
                     <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
                 </sp-tab>
             </sp-tabs>
-        `);await s(e),t(e.selected).to.be.equal("");const a=e.querySelector('[value="first"]'),c=e.querySelector('[value="second"]');a.dispatchEvent(new FocusEvent("focusin",{bubbles:!0})),a.focus(),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(f()),a.dispatchEvent(w()),await s(e),t(document.activeElement===c,"Focus second tab").to.be.true,c.dispatchEvent(v()),await s(e),t(e.selected).to.be.equal("second"),c.dispatchEvent(g()),await s(e),t(document.activeElement===a,"Focus first tab").to.be.true,a.dispatchEvent(T()),await s(e),t(e.selected).to.be.equal("first")}),it("selects through slotted DOM",async()=>{const e=await b(o`
+        `);
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("");
+    const firstTab = el.querySelector('[value="first"]');
+    const secondTab = el.querySelector('[value="second"]');
+    firstTab.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+    firstTab.focus();
+    await elementUpdated(el);
+    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
+    firstTab.dispatchEvent(arrowLeftEvent());
+    firstTab.dispatchEvent(arrowUpEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === secondTab, "Focus second tab").to.be.true;
+    secondTab.dispatchEvent(enterEvent());
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("second");
+    secondTab.dispatchEvent(arrowDownEvent());
+    await elementUpdated(el);
+    expect(document.activeElement === firstTab, "Focus first tab").to.be.true;
+    firstTab.dispatchEvent(spaceEvent());
+    await elementUpdated(el);
+    expect(el.selected).to.be.equal("first");
+  });
+  it("selects through slotted DOM", async () => {
+    const el = await fixture(
+      html`
                 <sp-tabs selected="first">
                     <sp-tab value="first">Tab 1</sp-tab>
                     <sp-tab value="second"><span>Tab 2</span></sp-tab>
                 </sp-tabs>
-            `),a=e.querySelector("span");await s(e),t(e.selected).to.equal("first"),a.click(),await s(e),t(e.selected).to.equal("second")}),it("updates selection indicator in response to tab updates",async()=>{const e=await b(o`
+            `
+    );
+    const span = el.querySelector("span");
+    await elementUpdated(el);
+    expect(el.selected).to.equal("first");
+    span.click();
+    await elementUpdated(el);
+    expect(el.selected).to.equal("second");
+  });
+  it("updates selection indicator in response to tab updates", async () => {
+    const el = await fixture(
+      html`
                 <sp-tabs selected="first">
                     <sp-tab value="first">Tab 1</sp-tab>
                     <sp-tab value="second">Tab 2</sp-tab>
                 </sp-tabs>
-            `),a=e.querySelector('[value="first"]');await s(e);const c=/scaleX\((.+)\)/,l=c.exec(e.selectionIndicatorStyle),n=parseFloat(l[1]);let i=y(e,"sp-tab-contentchange");a.textContent="WWWWWWWWWWWWWWWWWWWWWWWWW",await i,await s(e);const r=c.exec(e.selectionIndicatorStyle),p=parseFloat(r[1]);t(n).to.be.lessThan(p),i=y(e,"sp-tab-contentchange"),a.textContent="W",await i,await s(e);const k=c.exec(e.selectionIndicatorStyle),q=parseFloat(k[1]);t(n).to.be.greaterThan(q),t(p).to.be.greaterThan(q)}),it("clicks on #list do not throw",async()=>{const a=(await d()).shadowRoot.querySelector("#list");let c=!1;const l=window.onerror;window.onerror=()=>{c=!0},a.dispatchEvent(new MouseEvent("click")),t(c,"it should not error").to.be.false,window.onerror=l})});
+            `
+    );
+    const selected = el.querySelector('[value="first"]');
+    await elementUpdated(el);
+    const extractScaleX = /scaleX\((.+)\)/;
+    const initialExec = extractScaleX.exec(
+      el.selectionIndicatorStyle
+    );
+    const initialWidth = parseFloat(initialExec[1]);
+    let contentchanged = oneEvent(el, "sp-tab-contentchange");
+    selected.textContent = "WWWWWWWWWWWWWWWWWWWWWWWWW";
+    await contentchanged;
+    await elementUpdated(el);
+    const longerExec = extractScaleX.exec(
+      el.selectionIndicatorStyle
+    );
+    const longerWidth = parseFloat(longerExec[1]);
+    expect(initialWidth).to.be.lessThan(longerWidth);
+    contentchanged = oneEvent(el, "sp-tab-contentchange");
+    selected.textContent = "W";
+    await contentchanged;
+    await elementUpdated(el);
+    const shorterExec = extractScaleX.exec(
+      el.selectionIndicatorStyle
+    );
+    const shorterWidth = parseFloat(shorterExec[1]);
+    expect(initialWidth).to.be.greaterThan(shorterWidth);
+    expect(longerWidth).to.be.greaterThan(shorterWidth);
+  });
+  it("clicks on #list do not throw", async () => {
+    const tabs = await createTabs();
+    const tabList = tabs.shadowRoot.querySelector(
+      "#list"
+    );
+    let hasError = false;
+    const oldOnerror = window.onerror;
+    window.onerror = () => {
+      hasError = true;
+    };
+    tabList.dispatchEvent(new MouseEvent("click"));
+    expect(hasError, "it should not error").to.be.false;
+    window.onerror = oldOnerror;
+  });
+});
 //# sourceMappingURL=tabs.test.js.map