Armadilha de foco em modal
A Silktide identifica páginas que contêm uma caixa de diálogo modal — um pop-up que bloqueia a interação com o restante da página — e pede que você verifique se o foco do teclado é gerido corretamente enquanto a caixa de diálogo está aberta. Esta é uma revisão manual: os testes automatizados conseguem encontrar a caixa de diálogo, mas não observar como ela se comporta quando é aberta e fechada.
Por que isso é importante
Enquanto uma caixa de diálogo modal está aberta, a página por trás dela fica visível, mas inerte. Se o puder escapar da caixa de diálogo, os usuários de teclado e de acabam percorrendo com Tab conteúdos que não conseguem ver nem usar, lendo a página subjacente fora de contexto e perdendo completamente o lugar onde estavam. E, se o foco não for devolvido quando a caixa de diálogo é fechada, eles são levados para o topo da página e precisam navegar novamente até onde estavam.
Como corrigir
Abra cada caixa de diálogo na página e verifique usando apenas o teclado:
- Quando a caixa de diálogo é aberta, o foco passa para dentro dela — normalmente para o primeiro controle ou para a própria caixa de diálogo.
- Pressionar Tab e Shift+Tab percorre os controles da caixa de diálogo sem nunca chegar à página por trás dela.
- Pressionar Escape fecha a caixa de diálogo (para caixas de diálogo que podem ser dispensadas).
- Quando a caixa de diálogo é fechada, o foco retorna ao elemento que a abriu.
Se algum desses pontos falhar, corrija a implementação da caixa de diálogo. O elemento nativo <dialog> aberto com showModal() fornece a maior parte desse comportamento automaticamente; caixas de diálogo personalizadas precisam que ele seja programado. Se tudo se comportar corretamente, o apontamento.
Como a Silktide testa isso
- Procura sinais de que uma página contém uma caixa de diálogo modal: um elemento nativo
<dialog>, um elemento comrole="dialog"ourole="alertdialog", um elemento comaria-modal="true"ou um elemento com um nome de classe comum para modais que também contenha controles que possam receber foco. - Quando qualquer um desses elementos é encontrado, cria um prompt de revisão para a página.
A Silktide não consegue abrir a caixa de diálogo e observar o comportamento do foco em tempo de execução, portanto esta verificação nunca falha automaticamente — ela pede que você faça a verificação.
Solução de problemas
A página não tem nenhum modal visível
Muitos sites incluem a marcação de caixas de diálogo em todas as páginas (um pop-up de newsletter, uma caixa de diálogo de cookies ou uma sobreposição de pesquisa oculta) que só aparece em determinadas condições. O prompt continua válido: verifique o comportamento da caixa de diálogo no estado em que ela é aberta. Se a marcação for um resquício que nunca pode ser aberto, considere removê-la.
Nossas caixas de diálogo vêm de uma biblioteca de terceiros
Bibliotecas de caixas de diálogo conhecidas geralmente gerem o foco corretamente, mas a configuração e o conteúdo personalizado podem comprometê-lo. Verifique o comportamento nas suas próprias páginas, em vez de confiar na documentação da biblioteca.