@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

package/dist/collection/components/tree/tree.e2e.js

@@ -0,0 +1,586 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, renders, defaults, hidden } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "../tree-item/resources";
+import { TreeSelectionMode } from "./interfaces";
+describe("calcite-tree", () => {
+    it("renders", () => renders("calcite-tree", { display: "block" }));
+    it("honors hidden attribute", async () => hidden("calcite-tree"));
+    it("is accessible", async () => accessible(`<calcite-tree></calcite-tree>`));
+    it("has property defaults", async () => defaults("calcite-tree", [
+        {
+            propertyName: "lines",
+            defaultValue: false
+        },
+        {
+            propertyName: "scale",
+            defaultValue: "m"
+        },
+        {
+            propertyName: "selectionMode",
+            defaultValue: TreeSelectionMode.Single
+        }
+    ]));
+    describe("it forwards focus", () => {
+        it("to first selected item", async () => {
+            const page = await newE2EPage({
+                html: html ` <calcite-tree>
+          <calcite-tree-item id="one">1</calcite-tree-item>
+          <calcite-tree-item id="two" selected>2</calcite-tree-item>
+          <calcite-tree-item id="three">3</calcite-tree-item>
+        </calcite-tree>`
+            });
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("calcite-tree-item#two"))).toBe(true);
+        });
+        it("to first item if none selected", async () => {
+            const page = await newE2EPage({
+                html: html ` <calcite-tree>
+          <calcite-tree-item id="one">1</calcite-tree-item>
+          <calcite-tree-item id="two">2</calcite-tree-item>
+          <calcite-tree-item id="three">3</calcite-tree-item>
+        </calcite-tree>`
+            });
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("calcite-tree-item#one"))).toBe(true);
+            await page.keyboard.down("Shift");
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("body"))).toBe(true);
+        });
+        it("doesn't trap focus", async () => {
+            const page = await newE2EPage({
+                html: html ` <calcite-tree>
+          <calcite-tree-item id="one">1</calcite-tree-item>
+        </calcite-tree>`
+            });
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("calcite-tree-item#one"))).toBe(true);
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("body"))).toBe(true);
+            await page.keyboard.down("Shift");
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("calcite-tree-item#one"))).toBe(true);
+            await page.keyboard.down("Shift");
+            await page.keyboard.press("Tab");
+            expect(await page.evaluate(() => document.activeElement.matches("body"))).toBe(true);
+        });
+    });
+    it("is accessible: with nested children", async () => accessible(`
+  <calcite-tree lines>
+    <calcite-tree-item>
+      <a href="#">Child 2</a>
+      <calcite-tree slot="children">
+        <calcite-tree-item>
+          <a href="http://www.google.com">Grandchild 1</a>
+        </calcite-tree-item>
+      </calcite-tree>
+    </calcite-tree-item>
+</calcite-tree>
+  `));
+    it("should correctly select tree in ancestors selection mode", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-tree selection-mode="ancestors">
+        <calcite-tree-item id="one"><span>One</span></calcite-tree-item>
+        <calcite-tree-item id="two">
+          <span>Two</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item id="child-one">
+              <span>Child 1</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item id="grandchild-one">
+                  <span>Grandchild 1</span>
+                </calcite-tree-item>
+                <calcite-tree-item id="grandchild-two">
+                  <span>Grandchild 2</span>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+            <calcite-tree-item id="child-two"><span>Child 2</span></calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+    `);
+        await page.waitForChanges();
+        const one = await page.find("#one");
+        const two = await page.find("#two");
+        const twoIcon = await page.find('#two >>> [data-test-id="icon"]');
+        const childOne = await page.find("#child-one");
+        const childTwo = await page.find("#child-two");
+        const grandchildOne = await page.find("#grandchild-one");
+        const grandchildTwo = await page.find("#grandchild-two");
+        expect(one).not.toHaveAttribute("indeterminate");
+        expect(one).not.toHaveAttribute("selected");
+        expect(childOne).not.toHaveAttribute("indeterminate");
+        expect(childOne).not.toHaveAttribute("selected");
+        expect(childOne).not.toHaveAttribute("indeterminate");
+        expect(childOne).not.toHaveAttribute("selected");
+        expect(grandchildOne).not.toHaveAttribute("selected");
+        expect(grandchildTwo).not.toHaveAttribute("selected");
+        await two.click();
+        expect(one).not.toHaveAttribute("selected");
+        expect(two).toHaveAttribute("selected");
+        expect(childOne).toHaveAttribute("selected");
+        expect(childTwo).toHaveAttribute("selected");
+        expect(grandchildOne).toHaveAttribute("selected");
+        expect(grandchildTwo).toHaveAttribute("selected");
+        await twoIcon.click();
+        await childOne.click();
+        expect(childOne).not.toHaveAttribute("selected");
+        expect(childTwo).toHaveAttribute("selected");
+        expect(grandchildOne).not.toHaveAttribute("selected");
+        expect(grandchildTwo).not.toHaveAttribute("selected");
+        expect(two).not.toHaveAttribute("selected");
+        expect(two).toHaveAttribute("indeterminate");
+    });
+    describe("item selection", () => {
+        it("allows selecting items", async () => {
+            const page = await newE2EPage({
+                html: html `<calcite-tree selection-mode="ancestors">
+          <calcite-tree-item id="one"><span>One</span></calcite-tree-item>
+          <calcite-tree-item id="two">
+            <span>Two</span>
+            <calcite-tree slot="children">
+              <calcite-tree-item id="child-one">
+                <span>Child 1</span>
+                <calcite-tree slot="children">
+                  <calcite-tree-item id="grandchild-one">
+                    <span>Grandchild 1</span>
+                  </calcite-tree-item>
+                </calcite-tree>
+              </calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>`
+            });
+            const tree = await page.find("calcite-tree");
+            const selectEventSpy = await tree.spyOnEvent("calciteTreeSelect");
+            const one = await page.find("#one");
+            const childOne = await page.find("#child-one");
+            const grandchildOne = await page.find("#grandchild-one");
+            await one.click();
+            expect(selectEventSpy).toHaveReceivedEventTimes(1);
+            await childOne.press(" ");
+            expect(selectEventSpy).toHaveReceivedEventTimes(2);
+            await grandchildOne.press("Enter");
+            expect(selectEventSpy).toHaveReceivedEventTimes(3);
+        });
+        it("should only emit one event on grandchildren click", async () => {
+            const page = await newE2EPage({
+                html: html `<calcite-tree selection-mode="single">
+          <calcite-tree-item id="one"><span>One</span></calcite-tree-item>
+          <calcite-tree-item id="two" expanded>
+            <span>Two</span>
+            <calcite-tree slot="children">
+              <calcite-tree-item id="child-one" expanded>
+                <span>Child 1</span>
+                <calcite-tree slot="children">
+                  <calcite-tree-item id="grandchild-one" expanded>
+                    <span>Grandchild 1</span>
+                  </calcite-tree-item>
+                </calcite-tree>
+              </calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>`
+            });
+            await page.waitForChanges();
+            const tree = await page.find("calcite-tree");
+            const selectEventSpy = await tree.spyOnEvent("calciteTreeSelect");
+            const grandchildOne = await page.find("#grandchild-one");
+            await grandchildOne.click();
+            expect(selectEventSpy).toHaveReceivedEventTimes(1);
+        });
+        it("does not emit calciteTreeSelect on toggling the caret icon", async () => {
+            const page = await newE2EPage();
+            await page.setContent(html `
+        <calcite-tree selection-mode="multi-children">
+          <calcite-tree-item id="cables">
+            Cables
+            <calcite-tree slot="children">
+              <calcite-tree-item id="xlr">XLR Cable</calcite-tree-item>
+              <calcite-tree-item id="instrument">Instrument Cable</calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>
+      `);
+            const treeItemIcon = await page.find(`#cables >>> [data-test-id="icon"]`);
+            await treeItemIcon.click();
+            const changeSpy = await treeItemIcon.spyOnEvent("calciteTreeSelect");
+            await page.waitForChanges();
+            expect(changeSpy).toHaveReceivedEventTimes(0);
+        });
+        describe("has selected items in the selection event payload", () => {
+            it("contains current selection when selection=multi", async () => {
+                const page = await newE2EPage({
+                    html: html ` <calcite-tree selection-mode="multi">
+            <calcite-tree-item id="1">1</calcite-tree-item>
+            <calcite-tree-item id="2">2</calcite-tree-item>
+          </calcite-tree>`
+                });
+                const [item1, item2] = await page.findAll("calcite-tree-item");
+                await page.evaluateHandle(() => document.addEventListener("calciteTreeSelect", ({ detail }) => {
+                    window.selectedIds = detail.selected.map((item) => item.id);
+                }));
+                const getSelectedIds = async () => page.evaluate(() => window.selectedIds);
+                await item1.click();
+                expect(await getSelectedIds()).toEqual(["1"]);
+                await item2.click();
+                expect(await getSelectedIds()).toEqual(["1", "2"]);
+                await item2.click();
+                expect(await getSelectedIds()).toEqual(["1"]);
+                await item1.click();
+                expect(await getSelectedIds()).toEqual([]);
+            });
+            it("contains current selection when selection=multi-children", async () => {
+                const page = await newE2EPage({
+                    html: html ` <calcite-tree lines selection-mode="multi-children" scale="s">
+            <calcite-tree-item id="1"> Child 1 </calcite-tree-item>
+            <calcite-tree-item id="2">
+              Child 2
+              <calcite-tree slot="children">
+                <calcite-tree-item id="3"> Grandchild 1 </calcite-tree-item>
+                <calcite-tree-item id="4"> Grandchild 2 </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>`
+                });
+                const [item1, item2, item3, item4] = await page.findAll("calcite-tree-item");
+                await page.evaluateHandle(() => document.addEventListener("calciteTreeSelect", ({ detail }) => {
+                    window.selectedIds = detail.selected.map((item) => item.id);
+                }));
+                const getSelectedIds = async () => page.evaluate(() => window.selectedIds);
+                await item1.click();
+                expect(await getSelectedIds()).toEqual(["1"]);
+                await item2.click();
+                expect(await getSelectedIds()).toEqual(["1", "2", "3", "4"]);
+                await item3.click();
+                expect(await getSelectedIds()).toEqual(["1", "2", "4"]);
+                await item4.click();
+                expect(await getSelectedIds()).toEqual(["1", "2"]);
+            });
+        });
+        it("emits once when the tree item checkbox label is clicked", async () => {
+            const page = await newE2EPage({
+                html: html `<calcite-tree selection-mode="ancestors">
+          <calcite-tree-item>1</calcite-tree-item>
+        </calcite-tree>`
+            });
+            const tree = await page.find("calcite-tree");
+            const selectEventSpy = await tree.spyOnEvent("calciteTreeSelect");
+            const treeItemCheckboxLabel = await page.find(`calcite-tree-item >>> .${CSS.checkboxLabel}`);
+            await treeItemCheckboxLabel.click();
+            expect(selectEventSpy).toHaveReceivedEventTimes(1);
+            await treeItemCheckboxLabel.click();
+            expect(selectEventSpy).toHaveReceivedEventTimes(2);
+        });
+        describe(`when tree-item selection-mode is ${TreeSelectionMode.Ancestors}`, () => {
+            it("should render checkbox inputs", async () => {
+                const page = await newE2EPage({
+                    html: `
+          <calcite-tree selection-mode=${TreeSelectionMode.Ancestors}>
+            <calcite-tree-item>1</calcite-tree-item>
+            <calcite-tree-item>2</calcite-tree-item>
+          </calcite-tree>
+          `
+                });
+                const checkbox = await page.find(`calcite-tree-item >>> .${CSS.nodeContainer} .${CSS.checkboxLabel} .${CSS.checkbox}`);
+                expect(checkbox).not.toBeNull();
+            });
+        });
+        describe(`when tree-item selection-mode is ${TreeSelectionMode.None}`, () => {
+            it("allows selecting items without a selection", async () => {
+                const page = await newE2EPage();
+                await page.setContent(html `
+          <calcite-tree selection-mode=${TreeSelectionMode.None}>
+            <calcite-tree-item id="1">1</calcite-tree-item>
+            <calcite-tree-item id="2">2</calcite-tree-item>
+          </calcite-tree>
+        `);
+                await page.evaluateHandle(() => document.addEventListener("calciteTreeSelect", ({ detail }) => {
+                    window.selectedIds = detail.selected.map((item) => item.id);
+                }));
+                const getSelectedIds = async () => page.evaluate(() => window.selectedIds);
+                const tree = await page.find(`calcite-tree`);
+                const selectEventSpy = await tree.spyOnEvent("calciteTreeSelect");
+                const [item1, item2] = await page.findAll(`calcite-tree-item`);
+                await item1.click();
+                expect(selectEventSpy).toHaveReceivedEventTimes(1);
+                expect(await getSelectedIds()).toEqual(["1"]);
+                expect(await page.findAll("calcite-tree-item[selected]")).toHaveLength(0);
+                await item2.click();
+                expect(selectEventSpy).toHaveReceivedEventTimes(2);
+                expect(await getSelectedIds()).toEqual(["2"]);
+                expect(await page.findAll("calcite-tree-item[selected]")).toHaveLength(0);
+            });
+        });
+    });
+    describe("keyboard support", () => {
+        it("should allow spacebar keydown events to propagate outside the root tree", async () => {
+            const page = await newE2EPage({
+                html: html `<div id="container">
+          <calcite-tree id="root">
+            <calcite-tree-item id="one" expanded>
+              <span>One</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item id="child-one" expanded>
+                  <span>Child 1</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id="grandchild-one">
+                      <span>Grandchild 1</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`
+            });
+            const container = await page.find("#container");
+            const grandchild = await page.find("#grandchild-one");
+            const keydownSpy = await container.spyOnEvent("keydown");
+            expect(keydownSpy).toHaveReceivedEventTimes(0);
+            await grandchild.focus();
+            await page.keyboard.press("Space");
+            expect(keydownSpy).toHaveReceivedEventTimes(1);
+        });
+        it("should allow enter keydown events to propagate outside the root tree", async () => {
+            const page = await newE2EPage({
+                html: html `<div id="container">
+          <calcite-tree id="root">
+            <calcite-tree-item id="one" expanded>
+              <span>One</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item id="child-one" expanded>
+                  <span>Child 1</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id="grandchild-one">
+                      <span>Grandchild 1</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`
+            });
+            const container = await page.find("#container");
+            const grandchild = await page.find("#grandchild-one");
+            const keydownSpy = await container.spyOnEvent("keydown");
+            expect(keydownSpy).toHaveReceivedEventTimes(0);
+            await grandchild.focus();
+            await page.keyboard.press("Enter");
+            expect(keydownSpy).toHaveReceivedEventTimes(1);
+        });
+        it("should allow ArrowRight and ArrowLeft keydown events to propagate outside the root tree", async () => {
+            const page = await newE2EPage({
+                html: html `<div id="container">
+          <calcite-tree id="root">
+            <calcite-tree-item id="one">
+              <span>One</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item id="child-one">
+                  <span>Child 1</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id="grandchild-one">
+                      <span>Grandchild 1</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`
+            });
+            const container = await page.find("#container");
+            const one = await page.find("#one");
+            const keydownSpy = await container.spyOnEvent("keydown");
+            expect(keydownSpy).toHaveReceivedEventTimes(0);
+            await one.focus();
+            await page.keyboard.press("ArrowRight");
+            expect(keydownSpy).toHaveReceivedEventTimes(1);
+            await page.keyboard.press("ArrowRight");
+            expect(keydownSpy).toHaveReceivedEventTimes(2);
+            await page.keyboard.press("ArrowRight");
+            expect(keydownSpy).toHaveReceivedEventTimes(3);
+            await page.keyboard.press("ArrowLeft");
+            expect(keydownSpy).toHaveReceivedEventTimes(4);
+            await page.keyboard.press("ArrowLeft");
+            expect(keydownSpy).toHaveReceivedEventTimes(5);
+            await page.keyboard.press("ArrowLeft");
+            expect(keydownSpy).toHaveReceivedEventTimes(6);
+        });
+        it("ArrowRight and ArrowLeft keys expand and collapse nested trees", async () => {
+            const parent = "parent";
+            const child = "child";
+            const grandchild = "grandchild";
+            const page = await newE2EPage({
+                html: html `<div id="container">
+          <calcite-tree id="root">
+            <calcite-tree-item id=${parent}>
+              <span>Parent</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item id=${child}>
+                  <span>Child</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id=${grandchild}>
+                      <span>Grandchild</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`
+            });
+            const parentEl = await page.find(`#${parent}`);
+            const childEl = await page.find(`#${child}`);
+            expect(await parentEl.getProperty("expanded")).toBe(false);
+            expect(await childEl.getProperty("expanded")).toBe(false);
+            await parentEl.focus();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(parent);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(false);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(child);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(false);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(child);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(true);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(grandchild);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(true);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(grandchild);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(true);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(grandchild);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(true);
+            await page.keyboard.press("ArrowLeft");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(child);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(true);
+            await page.keyboard.press("ArrowLeft");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(child);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(false);
+            await page.keyboard.press("ArrowLeft");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(parent);
+            expect(await parentEl.getProperty("expanded")).toBe(true);
+            expect(await childEl.getProperty("expanded")).toBe(false);
+            await page.keyboard.press("ArrowLeft");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual(parent);
+            expect(await parentEl.getProperty("expanded")).toBe(false);
+            expect(await childEl.getProperty("expanded")).toBe(false);
+        });
+        it("ArrowUp and ArrowDown keys move focus between adjacent tree items at all 3 levels of depth and allow keydown events to propagate outside the tree root", async () => {
+            const page = await newE2EPage({
+                html: html `<div id="container">
+          <calcite-tree id="root">
+            <calcite-tree-item id="root-item-1">
+              <span>Root Item 1</span>
+            </calcite-tree-item>
+            <calcite-tree-item id="parent" expanded>
+              <span>Parent</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item id="child">
+                  <span>Child</span>
+                </calcite-tree-item>
+                <calcite-tree-item id="child2" expanded>
+                  <span>Child 2</span>
+                  <calcite-tree slot="children">
+                    <calcite-tree-item id="grandchild">
+                      <span>Grandchild</span>
+                    </calcite-tree-item>
+                    <calcite-tree-item id="grandchild2">
+                      <span>Grandchild 2</span>
+                    </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+                <calcite-tree-item id="child3">
+                  <span>Child 3</span>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+            <calcite-tree-item id="root-item-3">
+              <span>Root Item 3</span>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`
+            });
+            const container = await page.find("#container");
+            const root = await page.find("#root");
+            const keydownSpy = await container.spyOnEvent("keydown");
+            expect(keydownSpy).toHaveReceivedEventTimes(0);
+            await root.focus();
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("root-item-1");
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("parent");
+            expect(keydownSpy).toHaveReceivedEventTimes(1);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("child");
+            expect(keydownSpy).toHaveReceivedEventTimes(2);
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("child2");
+            expect(keydownSpy).toHaveReceivedEventTimes(3);
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("grandchild");
+            expect(keydownSpy).toHaveReceivedEventTimes(4);
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("grandchild2");
+            expect(keydownSpy).toHaveReceivedEventTimes(5);
+            await page.keyboard.press("ArrowUp");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("grandchild");
+            expect(keydownSpy).toHaveReceivedEventTimes(6);
+            await page.keyboard.press("ArrowLeft");
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("child3");
+            expect(keydownSpy).toHaveReceivedEventTimes(8);
+            await page.keyboard.press("ArrowUp");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("child2");
+            expect(keydownSpy).toHaveReceivedEventTimes(9);
+            await page.keyboard.press("ArrowUp");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("child");
+            expect(keydownSpy).toHaveReceivedEventTimes(10);
+            await page.keyboard.press("ArrowLeft");
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("root-item-3");
+            expect(keydownSpy).toHaveReceivedEventTimes(12);
+            await page.keyboard.press("ArrowUp");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("parent");
+            expect(keydownSpy).toHaveReceivedEventTimes(13);
+            await page.keyboard.press("ArrowUp");
+            await page.waitForChanges();
+            expect(await page.evaluate(() => document.activeElement.id)).toEqual("root-item-1");
+            expect(keydownSpy).toHaveReceivedEventTimes(14);
+        });
+    });
+});

package/dist/collection/components/tree/tree.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";

package/dist/collection/components/tree-item/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export {};

package/dist/collection/components/tree-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   checkboxLabel: "checkbox-label",

package/dist/collection/components/tree-item/tree-item.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */
@@ -85,10 +90,6 @@
   color: var(--calcite-ui-text-3);
 }
 
-:host([selection-mode=none]:not([has-children])) .node-container {
-  margin-inline: 0.75rem;
-}
-
 :host([calcite-hydrated-hidden]) {
   visibility: hidden !important;
   pointer-events: none;
@@ -141,9 +142,7 @@
   inset-block-start: 0px;
   z-index: 1;
   inline-size: 1px;
-  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
@@ -169,8 +168,7 @@
 
 ::slotted(a) {
   inline-size: 100%;
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+  text-decoration-line: none;
 }
 
 :host {
@@ -250,6 +248,16 @@
   color: var(--calcite-ui-brand);
 }
 
+:host([selection-mode=none]:not([has-children])):host([scale=s]) > .node-container {
+  padding-inline-start: 0.5rem;
+}
+:host([selection-mode=none]:not([has-children])):host([scale=m]) > .node-container {
+  padding-inline-start: 1rem;
+}
+:host([selection-mode=none]:not([has-children])):host([scale=l]) > .node-container {
+  padding-inline-start: 1.5rem;
+}
+
 :host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }