refactor(aria/tree): visible item focus management

Author: wagnermaciel

src/aria/private/behaviors/list-selection/list-selection.ts

@@ -53,6 +53,7 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
       !item ||
       item.disabled() ||
       !item.selectable() ||
+      !this.inputs.focusManager.isFocusable(item as T) ||
       this.inputs.values().includes(item.value())
     ) {
       return;
@@ -138,7 +139,7 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
   toggleAll() {
     const selectableValues = this.inputs
       .items()
-      .filter(i => !i.disabled() && i.selectable())
+      .filter(i => !i.disabled() && i.selectable() && this.inputs.focusManager.isFocusable(i))
       .map(i => i.value());
 
     selectableValues.every(i => this.inputs.values().includes(i))

src/aria/private/combobox/combobox.spec.ts

@@ -10,7 +10,12 @@ import {ComboboxInputs, ComboboxPattern} from './combobox';
 import {OptionPattern} from '../listbox/option';
 import {ComboboxListboxPattern} from '../listbox/combobox-listbox';
 import {createKeyboardEvent} from '@angular/cdk/testing/private';
-import {SignalLike, signal, WritableSignalLike} from '../behaviors/signal-like/signal-like';
+import {
+  SignalLike,
+  signal,
+  WritableSignalLike,
+  computed,
+} from '../behaviors/signal-like/signal-like';
 import {ModifierKeys} from '@angular/cdk/testing';
 import {TreeItemPattern} from '../tree/tree';
 import {ComboboxTreePattern} from '../tree/combobox-tree';
@@ -78,7 +83,7 @@ function _type(
   if (popup instanceof ComboboxListboxPattern) {
     (popup.inputs.items as WritableSignalLike<any[]>).set(options);
   } else if (popup instanceof ComboboxTreePattern) {
-    (popup.inputs.allItems as WritableSignalLike<any[]>).set(options);
+    (popup.inputs.items as WritableSignalLike<any[]>).set(options);
   }
   firstMatch.set(options[0]?.value());
   combobox.onFilter();
@@ -164,7 +169,7 @@ function getTreePattern(
 
   const tree = new ComboboxTreePattern<string>({
     id: signal('tree-1'),
-    allItems: items,
+    items,
     values: signal(initialValue ? [initialValue] : []),
     combobox: signal(combobox) as any,
     activeItem: signal(undefined),
@@ -182,6 +187,10 @@ function getTreePattern(
     currentType: signal('false'),
   });
 
+  class TestTreeItemPattern extends TreeItemPattern<string> {
+    override readonly focusable = computed(() => this.inputs.focusable?.() ?? true);
+  }
+
   // Recursive function to create tree items
   function createTreeItems(
     data: TreeItemData[],
@@ -190,9 +199,9 @@ function getTreePattern(
     return data.map((node, index) => {
       const element = document.createElement('div');
       element.role = 'treeitem';
-      const treeItem = new TreeItemPattern<string>({
+      const treeItem = new TestTreeItemPattern({
         value: signal(node.value),
-        id: signal('tree-item-' + tree.inputs.allItems().length),
+        id: signal('tree-item-' + tree.inputs.items().length),
         disabled: signal(false),
         selectable: signal(true),
         expanded: signal(false),
@@ -204,7 +213,7 @@ function getTreePattern(
         children: signal([]),
       });
 
-      (tree.inputs.allItems as WritableSignalLike<TreeItemPattern<string>[]>).update(items =>
+      (tree.inputs.items as WritableSignalLike<TreeItemPattern<string>[]>).update(items =>
         items.concat(treeItem),
       );
 
@@ -686,11 +695,17 @@ describe('Combobox with Tree Pattern', () => {
 
     it('should expand a closed node on ArrowRight', () => {
       const {combobox, tree} = getPatterns();
-      const before = tree.visibleItems().map(i => i.searchTerm());
+      const before = tree.inputs
+        .items()
+        .filter(i => i.visible())
+        .map(i => i.searchTerm());
       expect(before).toEqual(['Fruit', 'Vegetables', 'Grains']);
       combobox.onKeydown(down());
       combobox.onKeydown(right());
-      const after = tree.visibleItems().map(i => i.searchTerm());
+      const after = tree.inputs
+        .items()
+        .filter(i => i.visible())
+        .map(i => i.searchTerm());
       expect(after).toEqual(['Fruit', 'Apple', 'Banana', 'Cantaloupe', 'Vegetables', 'Grains']);
     });
 
@@ -707,7 +722,10 @@ describe('Combobox with Tree Pattern', () => {
       combobox.onKeydown(down());
       combobox.onKeydown(right());
       combobox.onKeydown(left());
-      const after = tree.visibleItems().map(i => i.searchTerm());
+      const after = tree.inputs
+        .items()
+        .filter(i => i.visible())
+        .map(i => i.searchTerm());
       expect(after).toEqual(['Fruit', 'Vegetables', 'Grains']);
       expect(tree.inputs.activeItem()?.searchTerm()).toBe('Fruit');
     });
@@ -756,15 +774,15 @@ describe('Combobox with Tree Pattern', () => {
       });
 
       it('should select and commit on click', () => {
-        combobox.onClick(clickTreeItem(tree.inputs.allItems(), 0));
+        combobox.onClick(clickTreeItem(tree.inputs.items(), 0));
         expect(tree.inputs.values()).toEqual(['Fruit']);
         expect(inputEl.value).toBe('Fruit');
       });
 
       it('should select and commit to input on Enter', () => {
         combobox.onKeydown(down());
         combobox.onKeydown(enter());
-        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.allItems()[0]);
+        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[0]);
         expect(tree.inputs.values()).toEqual(['Fruit']);
         expect(inputEl.value).toBe('Fruit');
       });
@@ -816,8 +834,8 @@ describe('Combobox with Tree Pattern', () => {
       });
 
       it('should select and commit on click', () => {
-        combobox.onClick(clickTreeItem(tree.inputs.allItems(), 2));
-        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.allItems()[2]);
+        combobox.onClick(clickTreeItem(tree.inputs.items(), 2));
+        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[2]);
         expect(tree.inputs.values()).toEqual(['Banana']);
         expect(inputEl.value).toBe('Banana');
       });
@@ -833,7 +851,7 @@ describe('Combobox with Tree Pattern', () => {
 
       it('should select the first item on arrow down when collapsed', () => {
         combobox.onKeydown(down());
-        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.allItems()[0]);
+        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[0]);
         expect(tree.inputs.values()).toEqual(['Fruit']);
       });
 
@@ -873,8 +891,8 @@ describe('Combobox with Tree Pattern', () => {
       });
 
       it('should select and commit on click', () => {
-        combobox.onClick(clickTreeItem(tree.inputs.allItems(), 2));
-        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.allItems()[2]);
+        combobox.onClick(clickTreeItem(tree.inputs.items(), 2));
+        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[2]);
         expect(tree.inputs.values()).toEqual(['Banana']);
         expect(inputEl.value).toBe('Banana');
       });
@@ -890,7 +908,7 @@ describe('Combobox with Tree Pattern', () => {
 
       it('should select the first item on arrow down when collapsed', () => {
         combobox.onKeydown(down());
-        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.allItems()[0]);
+        expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[0]);
         expect(tree.inputs.values()).toEqual(['Fruit']);
       });
 
@@ -945,7 +963,7 @@ describe('Combobox with Tree Pattern', () => {
       const {combobox, tree, inputEl} = getPatterns({readonly: true});
       combobox.onClick(clickInput(inputEl));
       expect(combobox.expanded()).toBe(true);
-      combobox.onClick(clickTreeItem(tree.inputs.allItems(), 0));
+      combobox.onClick(clickTreeItem(tree.inputs.items(), 0));
       expect(tree.inputs.values()).toEqual(['Fruit']);
       expect(inputEl.value).toBe('Fruit');
       expect(combobox.expanded()).toBe(false);

src/aria/private/tree/tree.ts

@@ -61,7 +61,7 @@ export class TreeItemPattern<V> implements TreeItem<V, TreeItemPattern<V>>, Expa
   readonly children: SignalLike<TreeItemPattern<V>[]> = () => this.inputs.children();
 
   /** The position of this item among its siblings. */
-  readonly index = computed(() => this.tree().visibleItems().indexOf(this));
+  readonly index = computed(() => this.tree().inputs.items().indexOf(this));
 
   /** Controls expansion for child items. */
   readonly expansionBehavior: ListExpansion;
@@ -72,6 +72,9 @@ export class TreeItemPattern<V> implements TreeItem<V, TreeItemPattern<V>>, Expa
   /** Whether the item is selectable. */
   readonly selectable: SignalLike<boolean> = () => this.inputs.selectable();
 
+  /** Whether the item is focusable. */
+  readonly focusable = computed(() => this.visible() && (this.inputs.focusable?.() ?? true));
+
   /** Whether the item is expanded. */
   readonly expanded: WritableSignalLike<boolean>;
 
@@ -142,7 +145,7 @@ export interface TreeInputs<V> extends Omit<TreeBehaviorInputs<TreeItemPattern<V
   id: SignalLike<string>;
 
   /** All items in the tree, in document order (DFS-like, a flattened list). */
-  allItems: SignalLike<TreeItemPattern<V>[]>;
+  items: SignalLike<TreeItemPattern<V>[]>;
 
   /** Whether the tree is in navigation mode. */
   nav: SignalLike<boolean>;
@@ -176,12 +179,9 @@ export class TreePattern<V> implements TreeInputs<V> {
 
   /** The direct children of the root (top-level tree items). */
   readonly children = computed(() =>
-    this.inputs.allItems().filter(item => item.level() === this.level() + 1),
+    this.inputs.items().filter(item => item.level() === this.level() + 1),
   );
 
-  /** All currently visible tree items. An item is visible if their parent is expanded. */
-  readonly visibleItems = computed(() => this.inputs.allItems().filter(item => item.visible()));
-
   /** Whether the tree selection follows focus. */
   readonly followFocus = computed(() => this.inputs.selectionMode() === 'follow');
 
@@ -331,7 +331,7 @@ export class TreePattern<V> implements TreeInputs<V> {
   > = () => this.inputs.currentType();
 
   /** All items in the tree, in document order (DFS-like, a flattened list). */
-  readonly allItems: SignalLike<TreeItemPattern<V>[]> = () => this.inputs.allItems();
+  readonly items: SignalLike<TreeItemPattern<V>[]> = () => this.inputs.items();
 
   /** The focus strategy used by the tree. */
   readonly focusMode: SignalLike<'roving' | 'activedescendant'> = () => this.inputs.focusMode();
@@ -372,7 +372,7 @@ export class TreePattern<V> implements TreeInputs<V> {
 
     this.treeBehavior = new Tree({
       ...inputs,
-      items: this.visibleItems,
+      items: this.inputs.items,
       multi: this.multi,
     });
 
@@ -392,7 +392,7 @@ export class TreePattern<V> implements TreeInputs<V> {
   setDefaultState() {
     let firstItem: TreeItemPattern<V> | undefined;
 
-    for (const item of this.allItems()) {
+    for (const item of this.inputs.items()) {
       if (!item.visible()) continue;
       if (!this.treeBehavior.isFocusable(item)) continue;
 
@@ -487,6 +487,6 @@ export class TreePattern<V> implements TreeInputs<V> {
       return;
     }
     const element = event.target.closest('[role="treeitem"]');
-    return this.inputs.allItems().find(i => i.element() === element);
+    return this.inputs.items().find(i => i.element() === element);
   }
 }