Como usar a diretiva Angular CDK Trap Focus

Uma armadilha de foco é um recurso de acessibilidade muito importante em um aplicativo da web. Neste post, primeiro ajudarei você a entender o que é, depois por que é importante e, por fim, mostrarei como adicionar o conceito de maneira rápida e fácil em seus aplicativos Angular quando necessário. E é muito fácil graças ao Angular CDK. Tudo bem, vamos lá.

A acessibilidade pode ser um pouco difícil de entender ou até mesmo pensar se você é alguém que pode ver, ouvir e usar a web facilmente com diferentes dispositivos, por isso também pode ser fácil construir coisas que não funcionam bem para quem não pode.

O que é uma armadilha de foco?

Uma armadilha de foco é um recurso que ajuda a tornar as experiências melhores para essas pessoas. É uma forma de gerenciar o foco do usuário dentro de um determinado contêiner.

Tomemos, por exemplo, um modal. Se um usuário abrir um modal sem gerenciar o foco, ao começar a navegar pelo teclado usando a tecla tab, os itens atrás do modal continuarão a receber o foco. Isso é estranho e não é o que o usuário esperaria, certo? Precisamos focalizá-los programaticamente dentro do modal.

Mas isto não é suficiente; se pararmos por aqui, à medida que percorremos o modal, eventualmente, percorreremos todos os itens focáveis e, então, voltaremos a focar os itens no documento original atrás do modal novamente.

Em vez disso, o que precisamos fazer é capturar o foco para que quando o usuário focar no último item do modal, o foco seja colocado de volta no primeiro elemento focável no modal na próxima guia.

Ok, agora que sabemos o que é uma armadilha de foco, provavelmente estamos começando a perceber que haverá algum esforço para criar essa funcionalidade, certo?

Bem, não dentro do Angular. Com o CDK, isso é muito fácil usando a diretiva cdkTrapFocus do A11yModule .

A Diretiva Angular cdkTrapFocus

Vejamos um exemplo. Aqui, temos um aplicativo web para a marca de calçados Vans.

No topo, temos um botão de inscrição. Quando clicamos nele e depois tabulamos, podemos ver que o foco está se movendo pelos itens no fundo.

Não é o que queremos, certo?

Ok, vamos adicionar o cdkTrapFocus . A primeira coisa que precisamos fazer para usá-lo é importar o A11yModule .

inscreva-se-modal.component.ts

 import { A11yModule } from '@angular/cdk/a11y'; @Component({ selector: 'app-sign-up-modal', ... imports: [A11yModule] }) export class SignUpModalComponent { }

Para aqueles que não estão familiarizados com esta sigla, Ally é uma abreviatura da palavra acessibilidade. Vem do conceito de que a palavra começa com A, termina com Y e há onze caracteres entre elas.

O Angular CDK possui vários recursos de acessibilidade em seu módulo de acessibilidade, e a diretiva cdkTrapFocus é um deles.

Assim, depois de importado, podemos usá-lo dentro do modelo. Precisamos apenas adicioná-lo a um elemento que envolve nosso formulário.

sign-up-modal.component.html

 <div cdkTrapFocus> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div> 

Fornecendo foco na inicialização com cdkTrapFocusAutoCapture @Input

Boas notícias, a diretiva cdkTrapFocus possui um recurso de foco automático integrado. Podemos usar cdkTrapFocusAutoCapture @Input . Esta entrada focará automaticamente o primeiro item focável dentro da diretiva quando ela for inicializada. O padrão é falso, então precisamos fornecer um valor verdadeiro.

 <div cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> <app-sign-up-form (formSubmitted)="modalClose.emit()"></app-sign-up-form> ... </div>

Agora, quando abrimos o modal, o campo name fica devidamente focado ao ser aberto. E, à medida que avançamos, quando chegarmos ao botão Fechar, voltaremos ao campo de nome. Além disso, se pressionarmos shift + tab para navegar para trás, iremos na ordem inversa, tudo sem sair do modal.

Portanto, não só é muito útil para todos os usuários, mas também é muito fácil de implementar.

Uma última coisa a observar: a diretiva trap focus rastreia o último elemento em foco antes de sua inicialização, portanto, quando fechamos o modal, o foco retorna ao botão que o abriu.

Legal, acabamos de economizar muito trabalho e tornar nosso modal mais acessível.

Quer ver isso em ação?

Confira o código de demonstração e exemplos dessas técnicas no exemplo stackblitz abaixo. Se você tiver alguma dúvida ou opinião, não hesite em deixar um comentário.