fix(tree,tree-item): replace checkbox with div and a11y attributes

packages/calcite-components/src/components.d.ts

@@ -5657,6 +5657,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;
@@ -13700,6 +13704,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;

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;

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,24 +343,24 @@ 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);
   });
 

packages/calcite-components/src/components/tree-item/tree-item.scss

@@ -128,24 +128,31 @@
   .node-container {
     @apply focus-inset outline-none;
   }
+
+  .checkbox {
+    @apply outline-none;
+    color: var(--calcite-color-brand);
+  }
 }
 
 .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 +260,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();

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,21 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
     const checkbox =
       this.selectionMode === "ancestors" ? (
-        <label class={CSS.checkboxLabel} key="checkbox-label">
-          <calcite-checkbox
-            checked={this.selected}
-            class={CSS.checkbox}
-            data-test-id="checkbox"
-            indeterminate={this.hasChildren && this.indeterminate}
-            scale={this.scale}
-            tabIndex={-1}
-          />
-          {defaultSlotNode}
-        </label>
+        <div class={CSS.checkboxContainer}>
+          <div class={CSS.checkbox} tabIndex={-1}>
+            <calcite-icon
+              icon={
+                this.selected
+                  ? ICONS.checkSquareF
+                  : checkboxIsIndeterminate
+                    ? ICONS.minusSquareF
+                    : ICONS.square
+              }
+              scale={getIconScale(this.scale)}
+            />
+          </div>
+          <label class={CSS.checkboxLabel}>{defaultSlotNode}</label>
+        </div>
       ) : null;
     const selectedIcon = showBulletPoint
       ? ICONS.bulletPoint
@@ -280,9 +288,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}

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();
       });
     });