@djangocfg/ui-tools 2.1.465 → 2.1.468

package/src/tools/data/Tree/TreeRoot.tsx

@@ -219,6 +219,7 @@ function TreeRootShell<T>({
   // nav, type-ahead, programmatic). Centralised so every focus source gets
   // consistent scrolling — previously only type-ahead scrolled.
   const focusedId = ctx.focused;
+  const isEmpty = ctx.flatRows.length === 0;
   useEffect(() => {
     if (!focusedId) return;
     const el = containerRef.current?.querySelector<HTMLElement>(
@@ -249,11 +250,15 @@ function TreeRootShell<T>({
   const treeBody = (
     <div
       ref={setContainerRef}
-      tabIndex={0}
-      role="tree"
-      aria-label={ctx.labels.ariaLabel}
-      aria-multiselectable={ctx.selectionMode === 'multiple' || undefined}
-      aria-activedescendant={focusedId ? treeRowDomId(focusedId) : undefined}
+      tabIndex={isEmpty ? undefined : 0}
+      role={isEmpty ? undefined : 'tree'}
+      aria-label={isEmpty ? undefined : ctx.labels.ariaLabel}
+      aria-multiselectable={
+        !isEmpty && ctx.selectionMode === 'multiple' ? true : undefined
+      }
+      aria-activedescendant={
+        !isEmpty && focusedId ? treeRowDomId(focusedId) : undefined
+      }
       className={cn(
         'group/tree flex h-full w-full flex-col gap-2 rounded-sm outline-none',
         'focus-visible:ring-1 focus-visible:ring-ring/50',
@@ -264,7 +269,9 @@ function TreeRootShell<T>({
     >
       {enableSearch ? <TreeSearchInput className="mx-2 mt-2" /> : null}
       <div className="flex min-h-0 flex-1 flex-col overflow-auto px-1">
-        <TreeContent<T> role="group">{renderRow}</TreeContent>
+        <TreeContent<T> role={isEmpty ? "presentation" : "group"}>
+          {renderRow}
+        </TreeContent>
         {/* Empty-area: catches right-clicks on whitespace below the
             last row + acts as the root drop target for DnD. Always
             rendered — it self-disables when there's nothing to do. */}

package/src/tools/data/Tree/__tests__/TreeRoot.accessibility.test.tsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { TreeRoot } from '../TreeRoot';
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe('TreeRoot empty semantics', () => {
+  const mounted: Array<ReturnType<typeof createRoot>> = [];
+
+  afterEach(() => {
+    act(() => mounted.splice(0).forEach((root) => root.unmount()));
+  });
+
+  it('announces the empty state without exposing an invalid empty tree', () => {
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    mounted.push(root);
+
+    act(() => {
+      root.render(
+        <TreeRoot<{ name: string }>
+          data={[]}
+          getItemName={(node) => node.data.name}
+        />,
+      );
+    });
+
+    expect(container.querySelector('[role="tree"]')).toBeNull();
+    expect(container.querySelector('[data-tree-root]')?.hasAttribute('tabindex')).toBe(false);
+    expect(container.querySelector('[role="status"]')?.textContent).toBe('Nothing to show');
+  });
+});

package/src/tools/data/Tree/components/TreeEmpty.tsx

@@ -10,6 +10,7 @@ export interface TreeEmptyProps {
 export function TreeEmpty({ children, className }: TreeEmptyProps) {
   return (
     <div
+      role="status"
       className={cn(
         'flex h-full min-h-32 items-center justify-center px-4 py-6 text-sm text-muted-foreground',
         className,