bug(Mat-tree): No way to prevent keyboard navigation?

[boltex]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17

Description

After upgrading from version 17 (where the keyboard navigation of mat-tree was left to the programmer) the new version (20) has integrated WAI/ARIA treeview standard keyboard navigation which conflicts with our own keyboard handling for tree navigation that we had in place.

Is there a way to turn off that newly added WAI/ARIA treeview keyboard navigation implementation?

Reproduction

StackBlitz link: There is no need for a stack blitz as this is just a feature that needs to be made optional /turned off in some cases.

Expected Behavior

The WAI/ARIA treeview standard keyboard navigation should be able to be turned off and let to the programmer's own methods if desired.

Actual Behavior

The treeview has double selections and doubles the expanding/contracting on different nodes when using the keyboard because the custom key handling that the programmer added is applied on top of the integrated WAI/ARIA treeview keyboard navigation handling.

Environment

• Angular: 19.2.6
• CDK/Material: 19.2.9
• Browser(s): chrome 137.0.7151.104 (Official Build) (64-bit)
• Operating System windows 11

[boltex]

Workaround

Add an eventListener directly on your elementRef in your component that uses the mat-tree and make sure it uses capture mode to get it before the bubbling, and in your handler, use stopPropagation!! (obviously):

This works because Angular Material's internal tree key handlers are registered on the host element, and this capture listener fires before them, even when focus is inside a tree node.

  private boundHandler = this.cursorDown.bind(this);

  constructor(
    private elementRef: ElementRef
  ) {  }

  cursorDown(event: KeyboardEvent): void {
      switch (event.key) {
        case 'ArrowUp':
          event.preventDefault();
          event.stopPropagation();
          this.treeNavigateUp();
          break;
        case 'ArrowDown':
          event.preventDefault();
          event.stopPropagation();
          this.treeNavigateDown();
          break;
  }
}

  ngAfterViewInit(): void {
    this.elementRef.nativeElement.addEventListener(
      'keydown',
      this.boundHandler,
      true // capture mode!
    );
  }

  ngOnDestroy(): void {
    this.elementRef.nativeElement.removeEventListener('keydown', this.boundHandler, true);
  }