Content Children não está funcionando. | Angular: design de componentes com acessibilidade

Quando é clicado seta para cima retorna uma QueryList com o resultado vazio.

keyboard-manager.directive

  @ContentChildren(KeyboardManagedItemDirective) public items: QueryList<KeyboardManagedItemDirective> = null;

  @HostListener('keyup', ['$event'])
  public manageKeys(event: KeyboardEvent): void {
    switch (event.key) {
      case 'ArrowUp':
        console.log(this.items);
        break;
      case 'ArrowDown':
        console.log('down');
        break;
      case 'ArrowLeft':
        console.log('left');
        break;
      case 'ArrowRight':
        console.log('right');
        break;
    }
  }

keyboard-managed-item.directive

@Directive({
  selector: '[appKeyboardManagedItem]'
})
export class KeyboardManagedItemDirective {

}

yes-no-button-group.component.html

<div
  appKeyboardManager
  ...>
  ...
  <button
    appKeyboardManagedItem
    ...>
    Yes
  </button>
  <button
    appKeyboardManagedItem
    ...>
    No
  </button>
</div>

Oi André , tudo bem?

Pelo código que você compartilhou, parece que você está tentando implementar um gerenciamento de teclado para os botões "Yes" e "No" usando as diretivas KeyboardManager e KeyboardManagedItem. No entanto, quando você pressiona a tecla "ArrowUp", a lista de itens gerenciados pelo KeyboardManager retorna vazia.

Uma possível razão para isso é que você não está definindo o valor da diretiva KeyboardManagedItem corretamente. É necessário definir um valor exclusivo para cada item gerenciado, usando a propriedade tabIndex, por exemplo. Aqui está um exemplo de como você pode definir a diretiva KeyboardManagedItem corretamente para os botões "Yes" e "No":

<div appKeyboardManager>
  <button appKeyboardManagedItem tabIndex="0">Yes</button>
  <button appKeyboardManagedItem tabIndex="1">No</button>
</div>

Observe que definimos o tabIndex como "0" para o botão "Yes" e "1" para o botão "No". Isso significa que quando você pressiona a tecla "ArrowUp", a lista de itens gerenciados pelo KeyboardManager deve retornar corretamente os dois botões.

Além disso, você pode querer adicionar mais lógica à diretiva KeyboardManagedItem para lidar com as teclas "ArrowDown", "ArrowLeft" e "ArrowRight". Aqui está um exemplo de como você pode fazer isso:

@Directive({
  selector: '[appKeyboardManagedItem]'
})
export class KeyboardManagedItemDirective {
  @HostBinding('tabIndex') tabIndex = -1;

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent): void {
    switch (event.key) {
      case 'ArrowDown':
        this.focusNext();
        break;
      case 'ArrowUp':
        this.focusPrevious();
        break;
      case 'ArrowLeft':
        this.focusPrevious();
        break;
      case 'ArrowRight':
        this.focusNext();
        break;
    }
  }

  private focusNext(): void {
    const items = this.manager.items.toArray();
    const index = items.indexOf(this);
    if (index !== -1 && index < items.length - 1) {
      items[index + 1].focus();
    }
  }

  private focusPrevious(): void {
    const items = this.manager.items.toArray();
    const index = items.indexOf(this);
    if (index > 0) {
      items[index - 1].focus();
    }
  }

  constructor(private manager: KeyboardManagerDirective) {}
}

Observe que adicionamos dois métodos privados, focusNext e focusPrevious, que são chamados quando você pressiona as teclas "ArrowDown", "ArrowUp", "ArrowLeft" e "ArrowRight". Esses métodos obtêm a lista de itens gerenciados pelo KeyboardManager, localizam o índice do item atual e, em seguida, focam o item anterior ou próximo, dependendo da tecla pressionada.

Espero que essas dicas ajudem você a resolver o problema com a diretiva KeyboardManager e KeyboardManagedItem. Não hesite em me informar se você tiver outras dúvidas ou problemas.

Espero que tenha te ajudado, bons estudos!

Mergulhe em programação