diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index ec69dc49efc..044f72cfb92 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -5751,6 +5751,10 @@ export namespace Components {
           * In ancestor selection mode, show as indeterminate when only some children are selected.
          */
         "indeterminate": boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
         "lines": boolean;
         "parentExpanded": boolean;
         "scale": Scale;
@@ -13916,6 +13920,10 @@ declare namespace LocalJSX {
           * In ancestor selection mode, show as indeterminate when only some children are selected.
          */
         "indeterminate"?: boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label"?: string;
         "lines"?: boolean;
         "onCalciteInternalTreeItemSelect"?: (event: CalciteTreeItemCustomEvent<TreeItemSelectDetail>) => void;
         "parentExpanded"?: boolean;
diff --git a/packages/calcite-components/src/components/tree-item/resources.ts b/packages/calcite-components/src/components/tree-item/resources.ts
index 31b0d0fb231..9533b3b7d52 100644
--- a/packages/calcite-components/src/components/tree-item/resources.ts
+++ b/packages/calcite-components/src/components/tree-item/resources.ts
@@ -1,15 +1,16 @@
 export const CSS = {
   actionsEnd: "actions-end",
-  checkboxLabel: "checkbox-label",
+  bulletPointIcon: "bullet-point",
   checkbox: "checkbox",
+  checkboxContainer: "checkbox-container",
+  checkboxLabel: "checkbox-label",
+  checkmarkIcon: "checkmark",
   chevron: "chevron",
-  nodeContainer: "node-container",
   childrenContainer: "children-container",
-  bulletPointIcon: "bullet-point",
-  checkmarkIcon: "checkmark",
-  itemExpanded: "item--expanded",
   iconStart: "icon-start",
+  itemExpanded: "item--expanded",
   nodeAndActionsContainer: "node-actions-container",
+  nodeContainer: "node-container",
 };
 
 export const SLOTS = {
@@ -18,8 +19,11 @@ export const SLOTS = {
 };
 
 export const ICONS = {
+  blank: "blank",
   bulletPoint: "bullet-point",
   checkmark: "check",
+  checkSquareF: "check-square-f",
   chevronRight: "chevron-right",
-  blank: "blank",
+  minusSquareF: "minus-square-f",
+  square: "square",
 } as const;
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
index 9257f3c42aa..95f888fcb23 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
+++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -1,7 +1,7 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 
 describe("calcite-tree-item", () => {
   describe("renders", () => {
@@ -331,8 +331,9 @@ describe("calcite-tree-item", () => {
       </calcite-tree>
     `);
     const container = await page.find("calcite-tree-item >>> .node-container");
-    const label = await container.find("label");
-    const checkbox = await label.find("calcite-checkbox");
+    const checkbox = await container.find(`.${CSS.checkbox}`);
+    const host = await page.find("calcite-tree-item[role='treeitem']");
+    const label = await container.find(`label`);
 
     const icon = await container.find(`[data-test-id="icon"]`);
     await icon.click();
@@ -342,27 +343,63 @@ describe("calcite-tree-item", () => {
     expect(isVisible).toBe(true);
 
     await container.click();
-    expect(checkbox).toHaveAttribute("checked");
+    expect(host).toEqualAttribute("aria-checked", true);
     expect(isVisible).toBe(true);
     await container.click();
-    expect(checkbox).not.toHaveAttribute("checked");
+    expect(host).toEqualAttribute("aria-checked", false);
     expect(isVisible).toBe(true);
 
     await label.click();
-    expect(checkbox).toHaveAttribute("checked");
+    expect(host).toEqualAttribute("aria-checked", true);
     expect(isVisible).toBe(true);
     await label.click();
-    expect(checkbox).not.toHaveAttribute("checked");
+    expect(host).toEqualAttribute("aria-checked", false);
     expect(isVisible).toBe(true);
 
     await checkbox.click();
-    expect(checkbox).toHaveAttribute("checked");
+    expect(host).toEqualAttribute("aria-checked", true);
     expect(isVisible).toBe(true);
     await checkbox.click();
-    expect(checkbox).not.toHaveAttribute("checked");
+    expect(host).toEqualAttribute("aria-checked", false);
     expect(isVisible).toBe(true);
   });
 
+  it('should contain aria-selected attribute when selectionMode is "single". Also applies to selectionMode: "children" and "single-persist"', async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-tree selection-mode="single" scale="m">
+        <calcite-tree-item>
+          <span>Child 1</span>
+        </calcite-tree-item>
+        <calcite-tree-item>
+          <span>Child 2</span>
+        </calcite-tree-item>
+      </calcite-tree>
+    `);
+
+    const host = await page.find("calcite-tree-item[role='treeitem']");
+
+    expect(host).toHaveAttribute("aria-selected");
+  });
+
+  it('should contain aria-checked attribute when selectionMode is "multiple". Also applies to selectionMode: "multichildren" and "ancestors"', async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-tree selection-mode="multiple" scale="m">
+        <calcite-tree-item>
+          <span>Child 1</span>
+        </calcite-tree-item>
+        <calcite-tree-item>
+          <span>Child 2</span>
+        </calcite-tree-item>
+      </calcite-tree>
+    `);
+
+    const host = await page.find("calcite-tree-item[role='treeitem']");
+
+    expect(host).toHaveAttribute("aria-checked");
+  });
+
   it("displaying an expanded item is visible", async () => {
     const page = await newE2EPage();
     await page.setContent(html`
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
index ec63fb81660..5707586a6da 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -128,24 +128,30 @@
   .node-container {
     @apply focus-inset outline-none;
   }
+
+  .checkbox {
+    @apply outline-none;
+  }
 }
 
 .actions-end {
   @apply flex self-stretch flex-row items-center;
 }
 
+.checkbox-container {
+  display: flex;
+  align-items: center;
+}
+
 .checkbox {
   line-height: 0;
+  color: var(--calcite-color-border-input);
 }
 
 .checkbox-label {
   @apply pointer-events-none flex items-center;
 }
 
-.checkbox:focus {
-  @apply outline-none;
-}
-
 .children-container {
   @apply relative h-0 overflow-hidden opacity-0 origin-top;
   margin-inline-start: theme("margin.5");
@@ -253,6 +259,15 @@
   .bullet-point {
     color: var(--calcite-color-brand);
   }
+  .checkbox {
+    color: var(--calcite-color-brand);
+  }
+}
+
+:host([has-children][indeterminate]) {
+  .checkbox {
+    color: var(--calcite-color-brand);
+  }
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index 296592cb9da..72ea3c64cc8 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -59,6 +59,9 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
    */
   @Prop({ reflect: true }) disabled = false;
 
+  /** Accessible name for the component. */
+  @Prop() label: string;
+
   /** When `true`, the component is expanded. */
   @Prop({ mutable: true, reflect: true }) expanded = false;
 
@@ -210,6 +213,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
     const showCheckmark =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
     const showBlank = this.selectionMode === "none" && !this.hasChildren;
+    const checkboxIsIndeterminate = this.hasChildren && this.indeterminate;
 
     const chevron = this.hasChildren ? (
       <calcite-icon
@@ -227,17 +231,20 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
     const checkbox =
       this.selectionMode === "ancestors" ? (
-        <label class={CSS.checkboxLabel} key="checkbox-label">
-          <calcite-checkbox
-            checked={this.selected}
+        <div class={CSS.checkboxContainer}>
+          <calcite-icon
             class={CSS.checkbox}
-            data-test-id="checkbox"
-            indeterminate={this.hasChildren && this.indeterminate}
-            scale={this.scale}
-            tabIndex={-1}
+            icon={
+              this.selected
+                ? ICONS.checkSquareF
+                : checkboxIsIndeterminate
+                  ? ICONS.minusSquareF
+                  : ICONS.square
+            }
+            scale={getIconScale(this.scale)}
           />
-          {defaultSlotNode}
-        </label>
+          <label class={CSS.checkboxLabel}>{defaultSlotNode}</label>
+        </div>
       ) : null;
     const selectedIcon = showBulletPoint
       ? ICONS.bulletPoint
@@ -280,9 +287,23 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
     return (
       <Host
+        aria-checked={
+          this.selectionMode === "multiple" ||
+          this.selectionMode === "multichildren" ||
+          this.selectionMode === "ancestors"
+            ? toAriaBoolean(this.selected)
+            : undefined
+        }
         aria-expanded={this.hasChildren ? toAriaBoolean(isExpanded) : undefined}
         aria-hidden={toAriaBoolean(hidden)}
-        aria-selected={this.selected ? "true" : showCheckmark ? "false" : undefined}
+        aria-live="polite"
+        aria-selected={
+          this.selectionMode === "single" ||
+          this.selectionMode === "children" ||
+          this.selectionMode === "single-persist"
+            ? toAriaBoolean(this.selected)
+            : undefined
+        }
         calcite-hydrated-hidden={hidden}
         role="treeitem"
         tabIndex={this.disabled ? -1 : 0}
diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
index c9795cd6033..27681841b8b 100644
--- a/packages/calcite-components/src/components/tree/tree.e2e.ts
+++ b/packages/calcite-components/src/components/tree/tree.e2e.ts
@@ -434,9 +434,7 @@ describe("calcite-tree", () => {
           </calcite-tree>
           `,
         });
-        const checkbox = await page.find(
-          `calcite-tree-item >>> .${CSS.nodeContainer} .${CSS.checkboxLabel} .${CSS.checkbox}`,
-        );
+        const checkbox = await page.find(`calcite-tree-item >>> .${CSS.nodeContainer} .${CSS.checkboxContainer}`);
         expect(checkbox).not.toBeNull();
       });
     });
diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts
index eb3f7637fc5..94a2de250f0 100644
--- a/packages/calcite-components/src/components/tree/tree.stories.ts
+++ b/packages/calcite-components/src/components/tree/tree.stories.ts
@@ -31,32 +31,32 @@ export default {
 };
 
 const treeItems = html`
-  <calcite-tree-item>
+  <calcite-tree-item label="test item">
     <a>Child 1</a>
   </calcite-tree-item>
-  <calcite-tree-item icon-start="palette">
+  <calcite-tree-item label="test item" icon-start="palette">
     <a>Child 2</a>
     <calcite-tree slot="children" icon-start="palette">
-      <calcite-tree-item>
+      <calcite-tree-item label="test item">
         <a>Grandchild 1</a>
       </calcite-tree-item>
-      <calcite-tree-item icon-start="palette">
+      <calcite-tree-item label="test item" icon-start="palette">
         <a>Grandchild 2</a>
         <calcite-tree slot="children" icon-start="palette">
-          <calcite-tree-item>
+          <calcite-tree-item label="test item">
             <a>Great-Grandchild 1</a>
           </calcite-tree-item>
-          <calcite-tree-item icon-start="palette">
+          <calcite-tree-item label="test item" icon-start="palette">
             <a>Great-Grandchild 2</a>
           </calcite-tree-item>
         </calcite-tree>
       </calcite-tree-item>
     </calcite-tree>
   </calcite-tree-item>
-  <calcite-tree-item>
+  <calcite-tree-item label="test item">
     <a>Child 3</a>
     <calcite-tree slot="children">
-      <calcite-tree-item>
+      <calcite-tree-item label="test item">
         <a>Grandchild 1</a>
       </calcite-tree-item>
       <calcite-tree-item>
@@ -106,17 +106,17 @@ const slottedSmallDropdown = html`
 `;
 
 const iconStartLargeActionsEnd = html`
-  <calcite-tree-item icon-start="palette" expanded>
+  <calcite-tree-item label="test item" icon-start="palette" expanded>
     <a>Child 1</a>
     ${slottedLargeDropdown} ${slottedLargeDropdown}
   </calcite-tree-item>
-  <calcite-tree-item expanded>
+  <calcite-tree-item label="test item" expanded>
     <a>Child 2</a>
     <calcite-tree slot="children" expanded>
-      <calcite-tree-item expanded>
+      <calcite-tree-item label="test item" expanded>
         <a>Grandchild 1</a>
         <calcite-tree slot="children" expanded>
-          <calcite-tree-item icon-start="palette" expanded>
+          <calcite-tree-item label="test item" icon-start="palette" expanded>
             <a>Great-Grandchild 1</a>
             ${slottedLargeDropdown}${slottedLargeDropdown}
           </calcite-tree-item>
@@ -124,14 +124,14 @@ const iconStartLargeActionsEnd = html`
       </calcite-tree-item>
     </calcite-tree>
   </calcite-tree-item>
-  <calcite-tree-item icon-start="palette" expanded>
+  <calcite-tree-item label="test item" icon-start="palette" expanded>
     <a>Child 3</a>
     ${slottedLargeDropdown}
     <calcite-tree slot="children" expanded>
-      <calcite-tree-item icon-start="palette">
+      <calcite-tree-item label="test item" icon-start="palette">
         <a>Grandchild 1</a>
       </calcite-tree-item>
-      <calcite-tree-item expanded>
+      <calcite-tree-item label="test item" expanded>
         <a>Grandchild 2</a>
         ${slottedLargeDropdown}
       </calcite-tree-item>
@@ -140,16 +140,16 @@ const iconStartLargeActionsEnd = html`
 `;
 
 const slottedDefaultActionsEnd = html`
-  <calcite-tree-item icon-start="palette" expanded>
+  <calcite-tree-item label="test item" icon-start="palette" expanded>
     <a>Child 1</a>
   </calcite-tree-item>
-  <calcite-tree-item expanded>
+  <calcite-tree-item label="test item" expanded>
     <a>Child 2</a>
     <calcite-tree slot="children" expanded>
-      <calcite-tree-item expanded>
+      <calcite-tree-item label="test item" expanded>
         <a>Grandchild 1</a>
         <calcite-tree slot="children" expanded>
-          <calcite-tree-item icon-start="palette" expanded>
+          <calcite-tree-item label="test item" icon-start="palette" expanded>
             <a>Great-Grandchild 1</a>
             ${slottedDefaultDropdown}${slottedDefaultDropdown}
           </calcite-tree-item>
@@ -160,16 +160,16 @@ const slottedDefaultActionsEnd = html`
 `;
 
 const slottedSmallActionsEnd = html`
-  <calcite-tree-item icon-start="palette" expanded>
+  <calcite-tree-item label="test item" icon-start="palette" expanded>
     <a>Child 1</a>
   </calcite-tree-item>
-  <calcite-tree-item expanded>
+  <calcite-tree-item label="test item" expanded>
     <a>Child 2</a>
     <calcite-tree slot="children" expanded>
-      <calcite-tree-item expanded>
+      <calcite-tree-item label="test item" expanded>
         <a>Grandchild 1</a>
         <calcite-tree slot="children" expanded>
-          <calcite-tree-item icon-start="palette" expanded>
+          <calcite-tree-item label="test item" icon-start="palette" expanded>
             <a>Great-Grandchild 1</a>
             ${slottedSmallDropdown}${slottedSmallDropdown}
           </calcite-tree-item>
@@ -189,18 +189,18 @@ export const selectionModeNone = (): string => html` <calcite-tree selection-mod
 
 export const withLines_TestOnly = (): string => html`
   <calcite-tree lines>
-    <calcite-tree-item> Child 1 </calcite-tree-item>
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item"> Child 1 </calcite-tree-item>
+    <calcite-tree-item label="test item" expanded>
       Child 2
       <calcite-tree slot="children">
-        <calcite-tree-item> Grandchild 1 </calcite-tree-item>
-        <calcite-tree-item> Grandchild 2 </calcite-tree-item>
-        <calcite-tree-item expanded>
+        <calcite-tree-item label="test item"> Grandchild 1 </calcite-tree-item>
+        <calcite-tree-item label="test item"> Grandchild 2 </calcite-tree-item>
+        <calcite-tree-item label="test item" expanded>
           Grandchild 3
           <calcite-tree slot="children">
-            <calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
-            <calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
-            <calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
+            <calcite-tree-item label="test item"> Great-Grandchild 1 </calcite-tree-item>
+            <calcite-tree-item label="test item"> Great-Grandchild 2 </calcite-tree-item>
+            <calcite-tree-item label="test item"> Great-Grandchild 3 </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -218,7 +218,7 @@ export const iconStartAndActionsEnd = (): string => html`
 
 export const treeItemTextContentWraps_TestOnly = (): string => html`
   <calcite-tree style="width: 300px">
-    <calcite-tree-item>
+    <calcite-tree-item label="test item">
       <span>Possibly_long_tree_item_name_because_it_is_a_user_generated_layer_name</span>
     </calcite-tree-item>
   </calcite-tree>
@@ -231,14 +231,14 @@ export const treeItemContentIsNotClipped_TestOnly = (): string => html`
     }
   </style>
   <calcite-tree>
-    <calcite-tree-item>
+    <calcite-tree-item label="test item">
       <div>
         <span>content from tree item below should not be clipped 👇</span><span>:&nbsp;</span
         ><span class="string-value">✂️ 🚫clipped ✂️</span>
       </div>
     </calcite-tree-item>
 
-    <calcite-tree-item>
+    <calcite-tree-item label="test item">
       <div>
         <span>value</span><span>:&nbsp;</span
         ><!-- formatting (single-lining JSON) hides the issue, so we disable it -->
@@ -264,10 +264,10 @@ darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
 export const OverflowingSubtree = (): string =>
   html`<div style="width:400px">
       <calcite-tree>
-        <calcite-tree-item expanded id="two">
+        <calcite-tree-item label="test item" expanded id="two">
           Layer 2
           <calcite-tree slot="children">
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span class="title">Layer 2.1</span>
               <calcite-dropdown placement="bottom-trailing">
                 <calcite-button
@@ -284,7 +284,7 @@ export const OverflowingSubtree = (): string =>
             </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span class="title">Layer 3</span>
         </calcite-tree-item>
       </calcite-tree>
@@ -301,22 +301,22 @@ export const OverflowingSubtree = (): string =>
 export const allSelectionModesExpanded_TestOnly = (): string => html`
   <h2>ancestors</h2>
   <calcite-tree selection-mode="ancestors">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -325,22 +325,22 @@ export const allSelectionModesExpanded_TestOnly = (): string => html`
 
   <h2>children</h2>
   <calcite-tree selection-mode="children">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -349,22 +349,22 @@ export const allSelectionModesExpanded_TestOnly = (): string => html`
 
   <h2>multichildren</h2>
   <calcite-tree selection-mode="multichildren">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -373,22 +373,22 @@ export const allSelectionModesExpanded_TestOnly = (): string => html`
 
   <h2>multiple</h2>
   <calcite-tree selection-mode="multiple">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -397,22 +397,22 @@ export const allSelectionModesExpanded_TestOnly = (): string => html`
 
   <h2>none</h2>
   <calcite-tree selection-mode="none">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -421,22 +421,22 @@ export const allSelectionModesExpanded_TestOnly = (): string => html`
 
   <h2>single</h2>
   <calcite-tree selection-mode="single">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
@@ -445,22 +445,22 @@ export const allSelectionModesExpanded_TestOnly = (): string => html`
 
   <h2>single-persist</h2>
   <calcite-tree selection-mode="single-persist">
-    <calcite-tree-item> <span>Child 1</span> </calcite-tree-item>
+    <calcite-tree-item label="test item"> <span>Child 1</span> </calcite-tree-item>
 
-    <calcite-tree-item expanded>
+    <calcite-tree-item label="test item" expanded>
       <span>Child 2</span>
 
       <calcite-tree slot="children">
-        <calcite-tree-item> <span>Grandchild 1</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 1</span> </calcite-tree-item>
 
-        <calcite-tree-item> <span>Grandchild 2</span> </calcite-tree-item>
+        <calcite-tree-item label="test item"> <span>Grandchild 2</span> </calcite-tree-item>
 
-        <calcite-tree-item>
+        <calcite-tree-item label="test item">
           <span>Grandchild 3</span>
           <calcite-tree slot="children">
-            <calcite-tree-item> <span>Great-Grandchild 1</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 2</span> </calcite-tree-item>
-            <calcite-tree-item> <span>Great-Grandchild 3</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 1</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 2</span> </calcite-tree-item>
+            <calcite-tree-item label="test item"> <span>Great-Grandchild 3</span> </calcite-tree-item>
           </calcite-tree>
         </calcite-tree-item>
       </calcite-tree>
diff --git a/packages/calcite-components/src/demos/tree.html b/packages/calcite-components/src/demos/tree.html
index 6f6c9984966..e455bacea52 100644
--- a/packages/calcite-components/src/demos/tree.html
+++ b/packages/calcite-components/src/demos/tree.html
@@ -376,41 +376,41 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
 
         <div class="child">
           <calcite-tree selection-mode="ancestors" scale="s">
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 1</span>
             </calcite-tree-item>
 
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 2</span>
 
               <calcite-tree slot="children">
-                <calcite-tree-item>
+                <calcite-tree-item label="test item">
                   <span>Grandchild 1</span>
                   <calcite-tree slot="children">
-                    <calcite-tree-item>
+                    <calcite-tree-item label="test item">
                       <span>Great Grandchild 1</span>
                     </calcite-tree-item>
-                    <calcite-tree-item>
+                    <calcite-tree-item label="test item">
                       <span>Great Grandchild 2</span>
                     </calcite-tree-item>
-                    <calcite-tree-item>
+                    <calcite-tree-item label="test item">
                       <span>Great Grandchild 3</span>
                     </calcite-tree-item>
                   </calcite-tree>
                 </calcite-tree-item>
-                <calcite-tree-item>
+                <calcite-tree-item label="test item">
                   <span>Grandchild 2</span>
                 </calcite-tree-item>
-                <calcite-tree-item>
+                <calcite-tree-item label="test item">
                   <span>Grandchild 3</span>
                 </calcite-tree-item>
               </calcite-tree>
             </calcite-tree-item>
 
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 3</span>
             </calcite-tree-item>
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 4</span>
             </calcite-tree-item>
           </calcite-tree>
@@ -418,41 +418,41 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
 
         <div class="child">
           <calcite-tree selection-mode="ancestors" scale="m">
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 1</span>
             </calcite-tree-item>
 
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 2</span>
 
               <calcite-tree slot="children">
-                <calcite-tree-item>
+                <calcite-tree-item label="test item">
                   <span>Grandchild 1</span>
                   <calcite-tree slot="children">
-                    <calcite-tree-item>
+                    <calcite-tree-item label="test item">
                       <span>Great Grandchild 1</span>
                     </calcite-tree-item>
-                    <calcite-tree-item>
+                    <calcite-tree-item label="test item">
                       <span>Great Grandchild 2</span>
                     </calcite-tree-item>
-                    <calcite-tree-item>
+                    <calcite-tree-item label="test item">
                       <span>Great Grandchild 3</span>
                     </calcite-tree-item>
                   </calcite-tree>
                 </calcite-tree-item>
-                <calcite-tree-item>
+                <calcite-tree-item label="test item">
                   <span>Grandchild 2</span>
                 </calcite-tree-item>
-                <calcite-tree-item>
+                <calcite-tree-item label="test item">
                   <span>Grandchild 3</span>
                 </calcite-tree-item>
               </calcite-tree>
             </calcite-tree-item>
 
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 3</span>
             </calcite-tree-item>
-            <calcite-tree-item>
+            <calcite-tree-item label="test item">
               <span>Child 4</span>
             </calcite-tree-item>
           </calcite-tree>