Accessibility Bug - Using keyboard to toggle a checkbox, breaks the navigation outside the tree component

[tek-achiru]

Description

In the tree component with the checkboxes enabled, using the keyboard to toggle one or more checkboxes and then navigating away from the tree to another HTML element on the same page (i.e. to a button), the element is no longer responding to ENTER key (in this example, hitting ENTER when the button is selected, does nothing, the click event is disabled).

This breaks the accessibility features.

Steps to reproduce:

Please use the code below to reproduce :

import { ITreeOptions, KEYS } from 'angular-tree-component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-checkboxes',
  template: `
    <tree-root
      id="tree"
      [nodes]="nodes"
      [options]="options">
    </tree-root>
    <button (click)="onClick()">Click Me!</button>
  `,
  styles: [
  ]
})
export class CheckboxesComponent {
  nodes = [
    {
      name: 'root1',
    },
    {
      name: 'root2',
      children: [
        { name: 'child1' },
        { name: 'child2', children: [
          { name: 'grandchild1' },
          { name: 'grandchild2' }
        ] }
      ]
    },
    {
      name: 'asyncroot',
      hasChildren: true
    }
  ];

  options: ITreeOptions = {
    useCheckbox: true,
    getChildren: this.getChildren.bind(this)
  };

  getChildren(node: any) {
    const newNodes = [
      {
        name: 'child1'
      }, {
        name: 'child2'
      }
    ];

    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
  }

  onClick() {
    alert('Hello World!');
  }
}

Use the keyboard only to select/unselect a checkbox and then, again using the keyboard, navigate to the Click Me! button and hit ENTER. Nothing happens.

However using the mouse, the button is clickable and the alert is shown.

Expected behavior:

For accessibility purposes, the tree component should subscribe to keypress events only as long as it has focus. In this case, once we navigate away from the tree component, ENTER should behave as expected for all the other HMTL elements on the page.

Versions of Angular Tree Component, Angular, Node, affected browser(s) and operating system(s):

Angular Tree Component: 11.0.4
Angular: 11.2.4
Node: v14.15.4
Browsers: Chrome, Firefox (Latest)
OS; Windows, MacOS

Work around:

Override the Action Mappings with :

 options: ITreeOptions = {
    useCheckbox: true,
    getChildren: this.getChildren.bind(this),
    actionMapping: {
      keys: {
        [KEYS.ENTER]: undefined // disable the ENTER key mapping
      }  
    }
  };

[Stuart Green]

I'm facing a similar problem where items in the tree are still responding to keyboard events when I'm actually navigating a totally different component, e.g. a Material Accordion. Need to unsubscribe from the keyboard events when you're not focused on the tree and vice versa!