Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Error TS2322: Type 'null' is not assignable to type 'QueryList<KeyboardManagedItemDirective>'

Estou com dificuldades na hora de implementar a lógica do teclado. Fiz exatamente como o do exemplo, copiei e colei no meu arquivo porém continua dando este erro:

index.js:561 [webpack-dev-server] ERROR
src/app/shared/directives/keyboard-manager/keyboard-manager.directive.ts:9:57 - error TS2322: Type 'null' is not assignable to type 'QueryList<KeyboardManagedItemDirective>'.

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

Para contornar, fiz isso:

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

Porém ao tentar navegar usando as setas, recebo o seguinte erro:

ERROR TypeError: Cannot read properties of undefined (reading 'focus')
    at KeyboardManagerDirective.manageKeys (keyboard-manager.directive.ts:19:44)
    at KeyboardManagerDirective_keyup_HostBindingHandler (keyboard-manager.directive.ts:7:14)
    at executeListenerWithErrorHandling (core.mjs:15679:16)
    at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15714:22)
    at HTMLDivElement.<anonymous> (platform-browser.mjs:459:38)
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26261:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:34)

Tentei contornar fazendo uma validação if !== null ou undefined dentro do método moveFocus() os erros cessaram mas as setas não funcionam. Como resolver isso?

Meu repositório: https://www.github.com/midoriobana/acessibilidade

1 resposta
solução!

Ah, não acredito! Eu esqueci de chamar a diretiva KeyBoardManagerItem no html...

...
  <button KeyboardManagerItem (focused)="activate(options.YES)" type="radio" class="btn btn-light rounded-start-2" [attr.tabindex]="value === options.YES || value === null ? 0 : -1" role="radio"
    [attr.aria-checked]="value === options.YES" (click)="activate(options.YES)">
    Sim
  </button>

Ainda assim precisei colocar no query list KeyboardManagedItemDirective ou null para resolver o problema do null:

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

Agora deu certo hihi

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software