feat(mat-tree): Offer way to prevent keyboard navigation

[boltex]

Feature 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? If not, there should be an attribute on the mat-tree to turn this off and let the programmer handle it itself with custom behavior as he wishes.

Use Case

When having custom behaviors for keyboard usage with the tree view.

[boltex]

Perhaps a simple 'no-keyboard' or "keyboard"="off" attribute could be made available on mat-tree components?

[boltex]

Pasting my workaround here also in case the other issue gets deleted.

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