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á.   https://youtu.be/JKHAjYJ5T2o?embedable=true  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   do   . cdkTrapFocus 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   . A primeira coisa que precisamos fazer para usá-lo é importar o   . cdkTrapFocus 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   é um deles. cdkTrapFocus  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   possui um recurso de foco automático integrado. Podemos usar     . 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. cdkTrapFocus cdkTrapFocusAutoCapture @Input   <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   +   para navegar para trás, iremos na ordem inversa, tudo sem sair do modal.  shift tab  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.   https://stackblitz.com/edit/stackblitz-starters-2bznzs?embed=1&file=src%2Fsign-up-modal%2Fsign-up-modal.component.html&embedable=true

Buy Me a Coffee

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

Como usar a diretiva Angular CDK Trap Focus

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Uma breve introdução à teoria do cérebro de Boltzmann

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Uma breve introdução à teoria do cérebro de Boltzmann

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps