Olá Luiz, tudo bem com você?
Peço desculpas pela demora em obter um retorno.
Para o cenário descrito onde a navegação fique restrita aos limites dos elementos da modal e não retorne para o elemento inicial ao pressionarmos TAB estando com o foco no último elemento assim como não vá para o último elemento quando o foco está no primeiro elemento e pressionamos Shift + Tab, será necessário realizar uma modificação na lógica do método manageTab presente no arquivo focus-trap.directive.ts, deixando-o como apresentado abaixo:
@HostListener('keydown', ['$event'])
public manageTab(event: KeyboardEvent): void {
if (event.key !== 'Tab') {
return;
}
if (event.shiftKey && document.activeElement === this.firstFocusableElement) {
event.preventDefault();
} else if (!event.shiftKey && document.activeElement === this.lastFocusableElement) {
event.preventDefault();
}
}
No código acima, primeiramente é verificado se a tecla pressionada não é a tecla Tab, se não for a tecla Tab, o método retorna e não faz mais nada.
Em seguida verifica se a tecla Shift está pressionada e se o elemento atual com foco é o primeiro elemento focável do modal. Se essas condições forem atendidas, o método chama event.preventDefault() para cancelar o evento de tecla, impedindo que a ação padrão de navegação ocorra.
E por último, verifica se a tecla Shift não está pressionada e se o elemento atual com foco é o último elemento focável do modal. Se essas condições forem atendidas, o método chama event.preventDefault() para cancelar o evento de tecla, impedindo que a ação padrão de navegação ocorra.
Após realizar as modificações, salve o arquivo e reinicie a aplicação. Acesse a aplicação no navegador e verifique o comportamento apresentado ao pressionar as teclas Tab ou Shift + Tab. Deixo abaixo um GIF demonstrando o funcionamento da navegação após a modificação:
Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.
Em caso de dúvidas estou à disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
