implement code changes

Author: zarend

src/cdk/a11y/key-manager/noop-tree-key-manager.ts

@@ -50,10 +50,6 @@ export class NoopTreeKeyManager<T extends TreeKeyManagerItem> implements TreeKey
     return null;
   }
 
-  onInitialFocus() {
-    // noop
-  }
-
   focusItem() {
     // noop
   }

src/cdk/a11y/key-manager/tree-key-manager-strategy.ts

@@ -39,6 +39,11 @@ export interface TreeKeyManagerItem {
    * Focuses the item. This should provide some indication to the user that this item is focused.
    */
   focus(): void;
+
+  /**
+   * Unfocus the item. This should remove the focus state.
+   */
+  unfocus(): void;
 }
 
 /**
@@ -100,14 +105,6 @@ export interface TreeKeyManagerStrategy<T extends TreeKeyManagerItem> {
   /** The currently active item. */
   getActiveItem(): T | null;
 
-  /**
-   * Called the first time the Tree component is focused. This method will only be called once over
-   * the lifetime of the Tree component.
-   *
-   * Intended to be used to focus the first item in the tree.
-   */
-  onInitialFocus(): void;
-
   /**
    * Focus the provided item by index.
    *

src/cdk/a11y/key-manager/tree-key-manager.ts

@@ -67,23 +67,46 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
 
   private _items: T[] = [];
 
+  private _hasInitialFocused = false;
+
+  private _initialFocus() {
+    if (this._hasInitialFocused) {
+      return;
+    }
+
+    if (!this._items.length) {
+      return;
+    }
+
+    // TODO(zarend): align with WAI ARIA keyboard interface guide
+    console.log('initial focus', this._items.length);
+    this._focusFirstItem();
+
+    this._hasInitialFocused = true;
+  }
+
   constructor(items: Observable<T[]> | QueryList<T> | T[], config: TreeKeyManagerOptions<T>) {
     // We allow for the items to be an array or Observable because, in some cases, the consumer may
     // not have access to a QueryList of the items they want to manage (e.g. when the
     // items aren't being collected via `ViewChildren` or `ContentChildren`).
     if (items instanceof QueryList) {
       this._items = items.toArray();
       items.changes.subscribe((newItems: QueryList<T>) => {
+        console.log('items changes', newItems.length);
         this._items = newItems.toArray();
         this._updateActiveItemIndex(this._items);
+        this._initialFocus();
       });
     } else if (isObservable(items)) {
       items.subscribe(newItems => {
+        console.log('items changes', newItems.length);
         this._items = newItems;
         this._updateActiveItemIndex(newItems);
+        this._initialFocus();
       });
     } else {
       this._items = items;
+      this._initialFocus();
     }
 
     if (typeof config.activationFollowsFocus === 'boolean') {
@@ -188,14 +211,6 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
     return this._activeItem;
   }
 
-  /**
-   * Focus the initial element; this is intended to be called when the tree is focused for
-   * the first time.
-   */
-  onInitialFocus(): void {
-    this._focusFirstItem();
-  }
-
   /** Focus the first available item. */
   private _focusFirstItem(): void {
     this.focusItem(this._findNextAvailableItemIndex(-1));
@@ -245,14 +260,18 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyMana
       return;
     }
 
+    const previousActiveItem = this._activeItem;
     this._activeItem = activeItem ?? null;
     this._activeItemIndex = index;
 
+    this._activeItem?.focus();
+    previousActiveItem?.unfocus();
+
     if (options.emitChangeEvent) {
       // Emit to `change` stream as required by TreeKeyManagerStrategy interface.
       this.change.next(this._activeItem);
     }
-    this._activeItem?.focus();
+
     if (this._activationFollowsFocus) {
       this._activateCurrentItem();
     }

src/cdk/tree/tree.ts

@@ -110,7 +110,6 @@ type RenderingData<T> =
     'class': 'cdk-tree',
     'role': 'tree',
     '(keydown)': '_sendKeydownToKeyManager($event)',
-    '(focus)': '_focusInitialTreeItem()',
   },
   encapsulation: ViewEncapsulation.None,
 
@@ -319,23 +318,6 @@ export class CdkTree<T, K = T>
     }
   }
 
-  /**
-   * Sets the tabIndex on the host element.
-   *
-   * NB: we don't set this as a host binding since children being activated
-   * (e.g. on user click) doesn't trigger this component's change detection.
-   */
-  _setTabIndex() {
-    // If the `TreeKeyManager` has no active item, then we know that we need to focus the initial
-    // item when the tree is focused. We set the tabindex to be `0` so that we can capture
-    // the focus event and redirect it. Otherwise, we unset it.
-    if (!this._keyManager.getActiveItem()) {
-      this._elementRef.nativeElement.setAttribute('tabindex', '0');
-    } else {
-      this._elementRef.nativeElement.removeAttribute('tabindex');
-    }
-  }
-
   /**
    * Switch to the provided data source by resetting the data and unsubscribing from the current
    * render change subscription if one exists. If the data source is null, interpret this by
@@ -474,18 +456,6 @@ export class CdkTree<T, K = T>
     };
 
     this._keyManager = this._keyManagerFactory(items, keyManagerOptions);
-
-    this._keyManager.change
-      .pipe(startWith(null), pairwise(), takeUntil(this._onDestroy))
-      .subscribe(([prev, next]) => {
-        prev?._setTabUnfocusable();
-        next?._setTabFocusable();
-      });
-
-    this._keyManager.change.pipe(startWith(null), takeUntil(this._onDestroy)).subscribe(() => {
-      // refresh the tabindex when the active item changes.
-      this._setTabIndex();
-    });
   }
 
   private _initializeDataDiffer() {
@@ -864,14 +834,6 @@ export class CdkTree<T, K = T>
     this._keyManager.onKeydown(event);
   }
 
-  /** `focus` event handler; this focuses the initial item if there isn't already one available. */
-  _focusInitialTreeItem() {
-    if (this._keyManager.getActiveItem()) {
-      return;
-    }
-    this._keyManager.onInitialFocus();
-  }
-
   /** Gets all nested descendants of a given node. */
   private _getDescendants(dataNode: T): Observable<T[]> {
     if (this.treeControl) {
@@ -1140,13 +1102,15 @@ export class CdkTree<T, K = T>
     '[attr.aria-level]': 'level + 1',
     '[attr.aria-posinset]': '_getPositionInSet()',
     '[attr.aria-setsize]': '_getSetSize()',
-    'tabindex': '-1',
+    '[tabindex]': '_tabindex',
     'role': 'treeitem',
     '(click)': '_focusItem()',
     '(focus)': '_focusItem()',
   },
 })
 export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerItem {
+  protected _tabindex: number | null = -1;
+
   _changeDetectorRef = inject(ChangeDetectorRef);
 
   /**
@@ -1317,9 +1281,15 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
 
   /** Focuses this data node. Implemented for TreeKeyManagerItem. */
   focus(): void {
+    this._tabindex = 0;
     this._elementRef.nativeElement.focus();
   }
 
+  /** Defocus this data node. */
+  unfocus(): void {
+    this._tabindex = -1;
+  }
+
   /** Emits an activation event. Implemented for TreeKeyManagerItem. */
   activate(): void {
     if (this.isDisabled) {
@@ -1342,14 +1312,6 @@ export class CdkTreeNode<T, K = T> implements OnDestroy, OnInit, TreeKeyManagerI
     }
   }
 
-  _setTabFocusable() {
-    this._elementRef.nativeElement.setAttribute('tabindex', '0');
-  }
-
-  _setTabUnfocusable() {
-    this._elementRef.nativeElement.setAttribute('tabindex', '-1');
-  }
-
   _focusItem() {
     if (this.isDisabled) {
       return;

src/components-examples/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example.ts

@@ -111,6 +111,24 @@ export class VimTreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyM
 
   private _items: T[] = [];
 
+  private _hasInitialFocused = false;
+
+  private _initialFocus() {
+    if (this._hasInitialFocused) {
+      return;
+    }
+
+    if (!this._items.length) {
+      return;
+    }
+
+    // TODO(zarend): align with WAI ARIA keyboard interface guide
+    console.log('initial focus', this._items.length);
+    this._focusFirstItem();
+
+    this._hasInitialFocused = true;
+  }
+
   // TreeKeyManagerOptions not implemented.
   constructor(items: Observable<T[]> | QueryList<T> | T[]) {
     // We allow for the items to be an array or Observable because, in some cases, the consumer may
@@ -121,14 +139,17 @@ export class VimTreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyM
       items.changes.subscribe((newItems: QueryList<T>) => {
         this._items = newItems.toArray();
         this._updateActiveItemIndex(this._items);
+        this._initialFocus();
       });
     } else if (isObservable(items)) {
       items.subscribe(newItems => {
         this._items = newItems;
         this._updateActiveItemIndex(newItems);
+        this._initialFocus();
       });
     } else {
       this._items = items;
+      this._initialFocus();
     }
   }
 
@@ -192,14 +213,6 @@ export class VimTreeKeyManager<T extends TreeKeyManagerItem> implements TreeKeyM
     return this._activeItem;
   }
 
-  /**
-   * Focus the initial element; this is intended to be called when the tree is focused for
-   * the first time.
-   */
-  onInitialFocus(): void {
-    this._focusFirstItem();
-  }
-
   /**
    * Focus the provided item by index.
    * @param index The index of the item to focus.

src/material/tree/node.ts

@@ -51,7 +51,7 @@ function isNoopTreeKeyManager<T extends TreeKeyManagerItem>(
     '[attr.aria-posinset]': '_getPositionInSet()',
     '[attr.aria-setsize]': '_getSetSize()',
     '(click)': '_focusItem()',
-    'tabindex': '_getTabindexAttribute()',
+    '[tabindex]': '_getTabindexAttribute()',
   },
 })
 export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, OnDestroy {
@@ -90,7 +90,7 @@ export class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit,
     if (isNoopTreeKeyManager(this._tree._keyManager)) {
       return this.tabIndex;
     }
-    return -1;
+    return this._tabindex;
   }
 
   /**